Firebase HostingにCircleCI経由でデプロイしたり、リダイレクトしたり

これまでFirebaseにHostingしているサイトは、ローカルからCLIで直接デプロイしていたが、GitHubにプッシュしたらCircleCI経由でデプロイするフローにして、シンプルにリリースまで行いたい。

どのように行ったかなど、軽くまとめておくので、ぜひ参考にしてほしい!

やりたいこと

主な流れは以下の通りだが、やりたいことをまとめておく。GitHubにPushしたらCircleCI経由でデプロイしたい。なお、ブランチがmasterのときのみ。そして、ビルドはCircleCI上で行う。

firebase hosting deploy 方法

CI経由でデプロイするための設定

CI経由でデプロイするには、Firebaseのトークン発行が必要。まずは、firebaseコマンドが使えるローカルで発行して、コピーする。

firebase login:ci

それを$FIREBASE_TOKENという変数名で、CircleCIの設定からEnvironment Variables(環境関数)を設定しておく。

この環境変数は、.circleci/config.ymlで使う。作るものによって違うが、npmでビルドするためnpmのDockerイメージをつかい、その上でビルドできるようにした。いろいろ弄ったが、firebase-toolfirebaseコマンドがなぜか使えないので、以下のファイルでは直接使っている。【PJ NAME】は自分が使うプロジェクト名を入れること!

version: 2
jobs:
  deploy:
    docker:
      - image: circleci/node:7.10

    working_directory: ~/repo

    steps:
      - checkout
      - run:
          name: start build
          command: |
            npm install
            npm install --save-dev firebase-tools
            npm run build
            ./node_modules/.bin/firebase use --add 【PJ NAME】
            ./node_modules/.bin/firebase deploy --token="$FIREBASE_TOKEN"
workflows:
  version: 2
  build_and_deploy:
    jobs:
      - deploy:
          filters:
            branches:
              only: master

ローカルでGitHubにmasterブランチでプッシュすると、CircleCI上でビルドされ、Firebaseにデプロイされるようになった。最近静的サイトのホスティングはFirebaseに頼りっきり。これで使いやすいフローができた!

リダイレクトもできるみたい

自分のポートフォリオは、Firebaseでのホスティングを利用している。先日、ドメインを「youta.org」から「yo-ta.me」に変更するにあたり、旧ドメインから新ドメインへリダイレクトしたいと考えていた。

Firebaseには、firebase.jsonにリダイレクトの設定をすることで、簡単にリダイレクトできる機能もあったので、メモ!

これまで、firebase.jsonのhosting部分には以下のように書いてあった。

リダイレクト設定はこのように追加する。source[/code]には、リダイレクトするパス、destinationにはリダイレクト先。type`は、一般的にURLを永久に変更する場合は「301」、一時的に変更する場合は「302」を使う。

これをデプロイするとリダイレクトされるため、Firebaseの手軽さに改めて気がついた。静的サイトだけなら本当にサーバレスで十分そうだなぁ!

Hosting 動作をカスタマイズする | Firebase