Firebase Hostingにブログを移行した

f:id:mori_morix:20180613231538p:plain

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

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

一方GCPに関しては

GCE
GCS
BigQuery

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

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

DNS機能をRoute53からCloud DNSに移行する
Firebase Hostingの設定を行う
Firebaseに静的ファイルをデプロイする
デプロイをTravis CIで自動化する
ドメインの向き先を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

下記画面が現れるので「プロジェクトを追加」 f:id:mori_morix:20180613231544p:plain

下記画面での入力は適当におねがいします。 f:id:mori_morix:20180613231547p:plain

下記画面で「使ってみる」ボタンをクリック。
f:id:mori_morix:20180613231551p:plain

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

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画面の「デプロイ履歴」にデプロイした内容が表示されてればおｋ。またdeployコマンドで表示されたアドレスを確認し、Webサイトが表示されてれば問題なしです。

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

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

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

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

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

そして .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サービスを使っていきます！

ハラミTech

技術系ブログです