やりたいこと
CircleCI によって GitHub の master ブランチへのプルリクエストをマージしたタイミングで Firebase Hosting 環境にデプロイすることです。
Firebase を始めて利用する人向けに説明します。
また、CircleCI の説明については割愛します。
CircleCI について知りたい方はこちらの記事を読んでみてください。
Firebase Hosting にコマンドラインからデプロイするまで
CircleCI から Firebase Hosting にコマンドラインからデプロイ前に、まずはコマンドラインから Firebase Hosting にデプロイまでについて説明します。
クラウド上でのプロジェクトの作成
まずは、Firebase のプロジェクトを作成します。
Firebase のサイトから「使ってみる」をクリックします。
「プロジェクトを作成」をクリックします。
適当な名前をつけて「続行」をクリックします。
「続行」をクリックします。
全部チェックつけて「プロジェクトを作成」をクリックします。
「続行」をクリックします。
ダッシュボードに遷移できたらプロジェクトの作成の終了です。
firebase login
ローカル環境で firebase コマンドを有効にするために firebase-tools をインストールする必要があるので npm install -g でインストールします。
npm install -g firebase-tools
続いてログインコマンドを実行し、Googleアカウントを紐づけます。
firebase login
ブラウザにこのような表示がでてきたらログイン完了です。
firebase init
Firebase Hostingにてデプロイさせたいプロジェクトにcdコマンドなどで移動して firebase init を実行します。
gitプロジェクトでいうと .gitignore がある階層で実行するイメージです。
今回、実際に firebase init を実行したリポジトリはこちらに公開しております。
vue-cli にて作成したプロジェクトになります。
このプロジェクトを作成した記事はこちらになります。ご参考までに。
適当なディレクトリに移動して firebase init を実行します。
firebase init
対話方式で設定を求められます。
各環境に合わせて設定してください。今回の場合は以下に設定しました。
-
? Which Firebase CLI features do you want to set up for this folder? Press Space to select fea tures, then Enter to confirm your choices.-> Hosting を選択。 -
? Please select an option-> Use an existing project を選択。 -
? Select a default Firebase project for this directory-> さきほど作成したプロジェクトを選択。 -
? What do you want to use as your public directory?->distディレクトリを指定。これは vue-cli プロジェクトはnpm run buildコマンドによってdistディレクトリに build したソースを配置するように設定しているため。ここは各環境に合わせて設定してください。 -
? Configure as a single-page app (rewrite all urls to /index.html)?-> SPA ではないので No を選択。
（↑このようなコンソールが表示されます）
firebase deploy
この段階でコマンドによるデプロイが可能になります。
npm run build コマンドによって dist ディレクトリに build したソースを配置されます。（これは vue-cli での設定です。）
そして firebase deploy コマンドを実行することによって dist ディレクトリに配置されたファイル郡が Firebase Hosting にデプロイされます。
npm run build
firebase deploy
デプロイしたページにはコンソールに表示されるURLからアクセスできます。
コンソールに表示されている https://vuesample-e2c8b.web.app にアクセスすると自作のWebページが表示されていることがわかります。
Webサーバーを用意することなく簡単に世の中にデプロイできましたね！
これだけでもすごいことです！
CircleCI から Firebase Hosting にデプロイするまで
コマンドラインからデプロイできるところまで先ほど説明しました。
そしてこれから CircleCI から Firebase Hosting にデプロイするまでについて説明します。
基本的な流れは以下のようになります。
-
firebase-toolsのプロジェクトへのインストール - Firebase のトークンの CircleCI への登録
-
firebase deployコマンドの.circleci/config.ymlへの設定
1. firebase-tools のプロジェクトへのインストール
CircleCI で動く Pipeline に firebase-tools をインストールさせる必要があるので、ローカルのプロジェクトに対して npm install --save-dev firebase-tools コマンドを実行することによって、CircleCI の Pipeline 上で npm install した際に firebase-tools がインストールされるようにします。
npm install --save-dev firebase-tools
2. Firebase のトークンの CircleCI への登録
自身の環境外からデプロイするためには Firebase のトークンが必要なため、それを生成して CircleCI に登録します。
firebase login:ci
以下のようにトークンが生成されます。
トークンが生成されたので、こちらを CircleCI に登録しに行きます。
CircleCI のサイトから右上の「Project Settings」をクリックする。
「Environment Variables」 -> 「Add Environment Variables」をクリックする。
Name に FIREBASE_TOKEN、Value に先ほど生成したトークンを設定して「Add Variable」をクリックする。
登録完了になります。
これで .circleci/config.yml のコマンド上で $FIREBASE_TOKEN と宣言すれば、トークンが使用できます。
※ Firebase ID が記載されている .firebaserc を .gitignore に登録している場合は同様の手順で、$FIREBASE_ID を登録して、デプロイコマンド時に $FIREBASE_ID を指定してください。今回は .firebaserc を .gitignore として登録していないのでそちらについてはスキップします。
3. firebase deploy コマンドの .circleci/config.yml への設定
今回は .circleci/config.yml を以下のように登録しました。
version: 2.1
executors:
default:
working_directory: ~/workspace
docker:
- image: node:12
commands:
restore_npm:
steps:
- restore_cache:
name: Restore npm dependencies
key: npm-{{ checksum "package.json" }}
save_npm:
steps:
- save_cache:
name: Cache npm dependencies
key: npm-{{ checksum "package.json" }}
paths:
- ~/workspace/node_modules
jobs:
build:
executor: default
steps:
- checkout
- restore_npm
- run:
name: Install dependencies
command: npm install
- run:
name: Lint
command: npm run lint
- run:
name: Build
command: npm run build
- run:
name: Test
command: npm run test:unit
- save_npm
deploy:
executor: default
steps:
- checkout
- restore_npm
- run:
name: Build
command: npm run build
- run:
name: Check dist
command: ls -la dist
- run:
name: Deploy to Firebase Hosting
command: ./node_modules/.bin/firebase deploy --token=$FIREBASE_TOKEN
workflows:
push-build:
jobs:
- build
- deploy:
requires:
- build
filters:
branches:
only: master
ポイントは Firebase Hosting にデプロイするのは master ブランチに Push された場合のみに設定したところです。（filtersの箇所になります。）
つまり、以下のようにプルリクエストのために開発用ブランチでPushした場合は build のジョブのみ走り、master ブランチへのプルリクエストがマージされたタイミング、または master ブランチへ直接 Push した場合は build と deploy の2つのジョブが走るように設定しました。
もちろんプロジェクトの運用にもよりますがこのようにも設定できるということで、紹介も兼ねて設定しました。
下図のように feature/firebase ブランチでは build しか走ってないですが、master ブランチでは build と deploy の2つのジョブが走るようになっているのが確認できますね。
以上が CircleCI から Firebase にデプロイするまでになります。
さいごに
次は今回のデプロイの結果を Slack で通知する仕組みを作成したいと思います。