Gatsby+Strapiでブログを構築した話（１０） Gatsbyデプロイ

前回のあらすじ

Nginxでリバースプロキシを建てた
Strapiに対して外部からドメインでアクセス出来るようになった

この記事ですること

GatsbyをFirebase hostingにデプロイする

Firebase hosting

https://firebase.google.com/docs/hosting?hl=ja

主に静的サイトのホスティングに使うやつ。
一応Express.jsでAPIサーバー作れるとも書いてるけど、今回はGatsbyで生成したものを置いておくだけ。
独自ドメインが使えてhttpsも設定なしで使えるのでサイト公開するだけならほぼ手間が掛からないといっていいだろう。

肝心の料金だが、
https://firebase.google.com/pricing?hl=ja

ここにあるように10Gbのストレージと10Gb/月の転送量の内は無料のSparkプランで行ける。
よほどメディアファイルを置かない限り超えることは無いと思うが、もし超えても課金プランに手動で移行しない限りは請求はこないので問題ないはず。
このブログ程度じゃ超えないので…
超えたら止まるんですかね。
そうなったらNetlifyに乗り換えるかもしれない。

https://www.netlify.com/

まあFirebaseにしろNetlifyにしろ情報はたくさんあるんで詰まることはないでしょう。

導入

https://firebase.google.com/docs/cli?hl=ja

yarnで簡単に入る。

yarn global add firebase-tools

初回はログインする必要があるので下のコマンドも打つ。
要Googleアカウント。

firebase login

ここからはGatsbyプロジェクトルートでの作業。
私の場合は~/dreamer/dreamer-gatsby となる。

firebaseのプロジェクトを作成していく。

$ firebase init

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  /<カレントディレクトリパス>

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, t
hen Enter to confirm your choices. (Press <space> to select, <a> to toggle all, <i> to invert selectio
n)
 ◯ Database: Deploy Firebase Realtime Database Rules
 ◯ Firestore: Deploy rules and create indexes for Firestore
 ◯ Functions: Configure and deploy Cloud Functions
❯◉ Hosting: Configure and deploy Firebase Hosting sites
 ◯ Storage: Deploy Cloud Storage security rules
 ◯ Emulators: Set up local emulators for Firebase features

いろいろサービスがあるが今回使うのはHostingのみ。

? Please select an option: (Use arrow keys)
  Use an existing project
❯ Create a new project
  Add Firebase to an existing Google Cloud Platform project
  Don't set up a default project

事前にプロジェクトを作っているなら一番上選んでそのプロジェクトを選択してもいい。
今回は新しく作っていく。

? Please specify a unique project id (warning: cannot be modified afterward) [6-30 characters]:
 ()
? What would you like to call your project? (defaults to your project ID) ()

IDをつける。
変更できないっていう脅しつき。
その後は表示名もつける。
IDに関してはおそらく全ユーザー内で一意じゃないといけないので既存のプロジェクト使ったほうが色々楽。
今回はdreamer-test-9999にしてみた。

これでプロジェクトが作れたらそれに対する設定が始まる。

? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? No
? File public/404.html already exists. Overwrite? No
i  Skipping write of public/404.html
? File public/index.html already exists. Overwrite? No
i  Skipping write of public/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

色々質問されるが全部EnterでOK。
Gatsbyがデフォルトでpublicにファイルを作ってくれるので問題なし。

Gatsbyのビルド

今まではyarn developで開発していたが、本番用のデータを書き出すコマンドが以下になる。

yarn build

これで、<プロジェクトルート>/public以下にHostingするためのデータが出力される。

Firebase Hosting へのデプロイ

$ firebase deploy

=== Deploying to 'dreamer-test-9999'...

i  deploying hosting
i  hosting[dreamer-test-9999]: beginning deploy...
i  hosting[dreamer-test-9999]: found 367 files in public
✔  hosting[dreamer-test-9999]: file upload complete
i  hosting[dreamer-test-9999]: finalizing version...
✔  hosting[dreamer-test-9999]: version finalized
i  hosting[dreamer-test-9999]: releasing new version...
✔  hosting[dreamer-test-9999]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/dreamer-test-9999/overview
Hosting URL: https://dreamer-test-9999.web.app