ParcelとFirebase Hostingで簡単サイト公開

ParcelとFirebase Hostingを使ってみて今はこんなに簡単にサイトが作れるんだと感動したので紹介。

先週こんなサイトを公開した。

reiwa-count-up.web.app

ただの悪ふざけで作ったサイト。
平成のカウントアップなのにreiwa-count-upというサブドメインにしたり。
ちょうど令和100日目にこんなツイートをして公開した。

本日はなんと令和100日目！！！
100日目を記念してサイトをつくりました！！！！
令和最高！！！https://t.co/UqxThBsmGP
— 山口さんちのいがにん (@igayamaguchi) August 7, 2019

このサイトはParcelとFirebase Hostingを使用して開発している。

parceljs.org

firebase.google.com

Parcelすっごく簡単

Parcelは簡単に言ってしまえばWebpackの簡易版。
指定のHTMLをエンドポイントにHTML、CSS、JSを良しなにまとめてくれる。
例えば以下のHTMLをparcelでビルドするとmain.jsを main.4217b2e0.jsみたいな感じのファイルとして生成してリンクを張り替えてくれる。

<html>
<body>
<script src="main.js"></script>
</body>
</html

JS内での他ファイルのimportももちろん対応している。

import './style.css';
import hoge from './hoge';

hoge();

試していないがDynamic importsなんかも対応しているとのこと。

npm install --save-dev parcel-bundlerでインストールしnpm scriptでparcel index.html で開発用のサーバーが立ち上がる。
標準はdistというディレクトリに出力される。これは-dオプションで出力ディレクトリを変更可能。
開発ではなく本番用のビルドをするにはparcel build index.html。

Parcelの気になったところ

Mochaとの組み合わせ。
テストをするときにParcelでビルドされたものをテストする方法が分からなかった。
なのでテストファイルに書いたimportがそのままでは解決できず、Parcelでは必要ない.babelrcを設定する必要が出た。
こんな感じのnpm scriptを用意して、.babelrcを用意してテストを走らせる必要があった。

"test": "cross-env NODE_ENV=test mocha --require babel-register src/js/*.spec.js",

{
  "presets": ["es2015"]
}

あとは特定の画像などをハッシュ付きにしないで出力ディレクトリに出力する方法が分からなかった。
コピープラグインなどあるようだが、Parcelだけだと出来なそう？
SNS用のOGP画像などは https://reiwa-count-up.web.app/hei.png といったメインでの絶対パス指定になるのでhashがついたパスで出力されるとそこがうまく解決できなかった。
なので同じ画像を出力先ディレクトリに保存しておく運用にしている。
buildした後はhei.pngとhei.[hash].pngが存在する形になっている。これはsitemap.xmlなども同じで出力ディレクトリに保存している。

Parcelについてもっと知りたかったらこの記事を見るといいかも。
よくまとまっている。

qiita.com

細かい設定が出来ないが、すごくシンプルなのでプロトタイプや小規模なものをサクッと作るのに良さそう。

Firebase Hosting色々便利

ドメインもらえる！

Firebase自体もちゃんと使うのは初めてで、Hostingを使ってみたがこれがすごい。
まずドメインが貰える。
正確には[プロジェクト名].web.appと[プロジェクト名].firebase.comというドメインをもらうことが出来る。
しかもHTTPSにも対応しているのでそのまま使うことが出来る。

f:id:igatea:20190813015853p:plain

凄くいいなと思ったのはxxx.web.appというドメインが設定できること。
なんかアプリ感あるドメインぽくてよくない？
今までHerokuもそうだけどPaaSの製品名がドメインに入っているのが普通だったけど、ちゃんと普通のサイトっぽいドメインをそのまま使えるのはいい。
最初は独自ドメイン当てようかなと思ってたんだけどこんなちょっとしたサイトでドメイン買うのもなーと思っていたら、このドメインだったのでこれはいいと思ってそのまま使った。

CLIでデプロイ簡単、バージョン管理も

プロジェクトディレクトリでfirebase initコマンドを叩くとfirebaseプロジェクトとして設定を行うことができる。
どの機能を使うか（HostingやFirestoreなど）、プロジェクト名などの設定が簡単にできる。
設定後はfirebase deployで即デプロイが可能。
設定ファイルも以下のような数行で終わる程度。

{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}