Firebase Hostingにブログを移行した

今までのうちのブログはAWSの
Route53→Clound Front→S3(静的Webホスティング)
という構成でホスティングしてました。
https://blog.haramishio.xyz/post/000005/

この構成でなにも不満はなかったんですが、
AWSを使った業務を普段やってる都合上、そんなに学べることがない構成でもあります。

一方GCPに関しては

  • GCE
  • GCS
  • BigQuery

くらいしか業務では使わないし、そんなに使うことも今後なさそう。
なのでその辺はプライベートでカバーしたいなと思ったので、
このブログを「Firebase Hosting」に移行しました。

ダウンタイムなしで出来たのでその手順を載せます。

  1. DNS機能をRoute53からCloud DNSに移行する
  2. Firebase Hostingの設定を行う
  3. Firebaseに静的ファイルをデプロイする
  4. デプロイをTravis CIで自動化する
  5. ドメインの向き先をFirebaseに変更する

DNS機能をRoute53からCloud DNSに移行する

当ブログのドメインは「お名前.com」で購入してます。
お名前でのネームサーバーの指定を、AWS Route53のHost Zoneで指定されたネームサーバーにしていました。
なので、今回はGCPのCloud DNSでHost Zoneを作成し、
そこで指定されているネームサーバーをお名前で設定します。

ネームサーバー切り替え時にサイトダウンをさせたくないので、
Cloud DNSで「blog.haramishio.xyz」のレコード設定をしてからネームサーバーの切り替えを行います。

Cloud DNSにレコード追加

Cloud DNSにHost Zoneを追加しておきます。

Route53では、ALIASレコードでCloud Frontのホスト名を指定していました。
Cloud DNSでは当然ALIASレコードはないので、CNAMEでCloud Frontのホスト名を指定します。

ネームサーバー切り替え

お名前でネームサーバーの切り替えを行います。
ネームサーバーの切り替え前に、Cloud DNSでの設定が合っているかの事前確認はできません。
祈りながらネームサーバーの切り替えをしましょう!

切り替え後は、digコマンドを打ちまくってネームサーバーの切り替えが成功してるか確認します。

$ dig blog.haramishio.xyz NS

# NS変わってたらcurlなどでサイト見れるか確認
$ curl blog.haramishio.xyz

Firebase Hostingの設定を行う

以下のページに行きましょう。
https://console.firebase.google.com/project/_/hosting/main?hl=ja

下記画面が現れるので「プロジェクトを追加」

下記画面での入力は適当におねがいします。

下記画面で「使ってみる」ボタンをクリック。

その後サーバーでのコマンド入力を求められるので、
それを行っていきます。

Firebaseに静的ファイルをデプロイする

npmを使ってfirebaseクライアントをインストールしろといわれます。
npmの導入は下記手順を参考にさせていただきました。

Ubuntuに最新のNode.jsを難なくインストールする
http://qiita.com/seibe/items/36cef7df85fe2cefa3ea

その後のfirebaseコマンドの実行の仕方は、環境によってはうまく動きません。
どの環境でも動くやり方は以下のコマンドです。

$ sudo npm install -g firebase-tools

$ firebase login --no-localhost
# 表示されたURLをブラウザでアクセス。
# 出てきたアクセスコードを張り付けて完了

$ firebase init

$ cat firebase.json
{
  "hosting": {
    "public": "public"
  }
}

$ cat .firebaserc
{
  "projects": {
    "default": "<YOUR PROJECT NAME>"
  }
}

$ firebase deploy

上記コマンド後、Firebaseのhosting画面の「デプロイ履歴」にデプロイした内容が表示されてればおk。 またdeployコマンドで表示されたアドレスを確認し、Webサイトが表示されてれば問題なしです。

デプロイをTravis CIで自動化する

さて、今までこのブログのデプロイは「Travis CI」で自動化していました。
引き続きデプロイはTravis CIを使いたいので、 .travis.yml を修正します。

が、その前にTravis CIでFirebaseにデプロイが出来るようトークンを発行します。

# トークンを発行
$ firebase login:ci --no-localhost

# トークンを暗号化
$ travis encrypt "発行されたトークン"
# warningが出ますが無視でおk

そして .travis.yml を編集します。

$ vim .trabis.yml
language: bash
sudo: false

before_script:
  - bash ./script/git.sh

script:
  - bash ./script/build.sh

deploy:
  provider: firebase
  skip_cleanup: true
  token:
    secure: "暗号化したトークン"

使ってるシェルの中身が見たい人は、GitHubに公開しているので見てください。
https://github.com/morix1500/blog

ここまで出来たら、GitHubにPushしてTravis CIが動くか確認しましょう。

ドメインの向き先をFirebaseに変更する

あとはドメインの向き先をFirebaseでhostingしたWebサイトにするだけです。
Firebaseのhosting画面に行き、「ドメインを接続」ボタンをクリックします。

「セットアップモード」は「詳細設定」にします。
「タイプ」は「DNS TXTレコード」を選択します。

ここで表示されているドメイン名とTXTレコードをCloud DNSに登録して「次へ」。

上記TXTレコードの設定に問題なければ、証明書の作成フェーズに入ります。
証明書の作成はすべてFirebaseでやってくれるので待ちます。大体1時間くらいで出来ました。

そして表示されたIPアドレスを
Clout DNSのAレコードに設定したら完了です。

が、動作確認が事前にできるので確認しておきましょう。

Windows10の場合ですが、管理者権限で hostsファイルを開きます。

C:\Windows\System32\drivers\etc\hosts

ファイル末尾に上記IPアドレスとホスト名を入力し保存します。

151.101.1.195 blog.haramishio.xyz

ブラウザで blog.haramishio.xyzにアクセスすると、FirebaseのIPアドレスのほうにアクセスしに行きます。
ここでも表示が問題ないようでしたら、Cloud DNSのAレコードに指定のIPアドレスを入力して完了です!

最後に

こんな感じでダウンタイムなしでFirebase hostingにサイトを移行することが出来ました。

Firebase hostingでサイトを運用するメリットとしては

  • ひとつのサービスで完結する
  • 証明書の発行が楽(勝手にやってくれる)
  • 個人ユースの場合、アクセス数がそんなになければ無料で使える

パブリッククラウドを使い慣れてなくて、
静的Webサイト運用をしたいなら、Firebase hostingはかなり使えるなーという印象です。

これで脱AWSが出来たので、これからは積極的にGCPサービスを使っていきます!