この記事は、yoshitaku_jpの1人 Advent Calendar 2018 - Adventar の11日目の記事です。
CircleCIからFirebaseへデプロイ
CircleCIを回してFirebaseへデプロイをしてみたかったので調べてやってみました。
CircleCI上での設定
Environment Variables
まずはCircleCI側に、Firebaseの情報を設定していきます。 CircleCIの設定画面のEnvironment Variablesに
- FIREBASE_PROJECT_NAME
- FIREBASE_TOKEN
を設定します。Environment VariablesからAdd Variableをクリックすれば、各値を設定することができます。
FIREBASE_PROJECT_NAME
は、今現在取り組んでいるプロジェクトの名前を設定すればOKです。
FIREBASE_TOKEN
はfirebase login:ci
コマンドをローカル環境で実行すると、ブラウザでの認証が終わったあとにコンソールるに表示されます。
一部内容を変えて、実行結果を載せておきます。
yoshitaku$ firebase login:ci Visit this URL on any device to log in: URLが Waiting for authentication... ✔ Success! Use this token to login on a CI server: <FIREBASE_TOKENの内容> Example: firebase deploy --token "$FIREBASE_TOKEN"
config.ymlの設定
画面上の設定が終わったら、config.ymlの設定です。下はビルドして、デプロイをしている内容です。
version: 2 jobs: build: docker: - image: circleci/node:8 working_directory: ~/repo steps: - checkout - run: npm install - run: name: 'Build Client Code' command: npx webpack - persist_to_workspace: root: . paths: - . deploy: docker: - image: circleci/node:8 working_directory: ~/repo steps: - attach_workspace: at: . - run: name: 'Install Dependecies' command: npm install -save firebase-tools - run: name: 'Deploy to Hosting' command: npm run deploy workflows: version: 2 build_and_deploy: jobs: - build - deploy: requires: - build
package.jsonのscripts 部分
config.yml
で、command: npm run deploy
を使いました。package.json
のscript部分では"deploy": "npx firebase deploy --only hosting --project \"$FIREBASE_PROJECT_ID\" --token \"$FIREBASE_TOKEN\""
と記述しています。
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack-dev-server --hot", "build": "webpack -p", "deploy": "npx firebase deploy --only hosting --project \"$FIREBASE_PROJECT_ID\" --token \"$FIREBASE_TOKEN\"" },
まとめ
- CircleCIからFirebaseへデプロイができた
- CicleCI上で
firebase-tools
をインストールする際に、躓いた- グローバルにはインストールできない
-save
をつけた
build
とdeploy
でのattach_workspace
の受け渡しも学べた