VueJS と Firebase と CircleCIで楽々CI CD環境作る話
環境
% sw_vers
ProductName: Mac OS X
ProductVersion: 10.13.6
BuildVersion: 17G3025
% node -v
v8.11.3
% npm -v
6.4.1
% firebase -V
6.1.1
% circleci version
0.1.4058+7a4af3a
参考になるドキュメント
手順
Vue
Vue CLI3 を使います。 まずプロジェクトを作ります。ついでにgithubのリポジトリを作りますhub
コマンドを使うと便利です。 またまたついでに、firebase-toolsを入れときましょう これをしないとcircleciがfirebaseコマンドを叩けません
$ vue create my_app
$ cd my_app
$ hub create
$ npm install --save-dev firebase-tools
Firebase
firebase consoleに行き、プロジェクトを作成します。 https://console.firebase.google.com 確かロケーションをアメリカにするとAlwaysFreeプランが適用されるんだったか? Firebaseの設定をします。
$ firebase init
hostingを選び、 先ほど作ったfirebaseのプロジェクトを指定します。 What do you want to use as your public directory?
と効かれるのでvueのビルドファイルが置かれるディレクトリを指定しましょう 僕はdist
を指定しました。 ? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)
はSPAならy
で大丈夫です。
CircleCI
https://circleci.com/add-projects/ にアクセスすると のように表示されるはずです。 Set Up Projectを選ぶと、次の画面でOSとLangageを指定できます。 今回は
Other
を選びます。 すると下にconfig.yml
が表示されます。
version: 2
jobs:
build:
docker:
- image: debian:stretch
steps:
- checkout
- run:
name: Greeting
command: echo Hello, world.
- run:
name: Print the Current Time
command: date
それを.circleci/config.yml
に配置します。 Start Building
を押します。 これで、準備は終了です。 配置できたらgithubにPushしてみて、CircleCIを動かしてみましょう。 こんな感じで緑色になると思います。これで動くことが確認できました。
circleci/config.ymlを編集しよう
結論から こんなymlを生成します。
version: 2
jobs:
build:
working_directory: ~/workspace
docker:
- image: circleci/node:9.4.0
steps:
- checkout
- restore_cache:
keys:
- npm-{{ .Branch }}-{{ checksum "package-lock.json" }}
- npm-{{ .Branch }}-
- npm-
- run:
name: Install Dependency
command: npm install
- run:
name: Build
command: npm run build
- save_cache:
key: npm-{{ .Branch }}-{{ checksum "package-lock.json" }}
paths:
- ~/workspace/node_modules
- ~/workspace/dist
force: yes
deploy:
working_directory: ~/workspace
docker:
- image: circleci/node:9.4.0
steps:
- checkout
- restore_cache:
keys:
- npm-{{ .Branch }}-{{ checksum "package-lock.json" }}
- npm-{{ .Branch }}-
- npm-
- run:
name: Install Dependency
command: npm install
- run:
name: deploy
command: ./node_modules/.bin/firebase deploy --only hosting --project "$FIREBASE_PROJECT_ID" --token "$FIREBASE_TOKEN"
workflows:
version: 2
build_deploy:
jobs:
- build
- deploy:
requires:
- build
filters:
branches:
only: master
やりたいこと
マスターにマージされたら、デプロイ 各ブランチで、ビルドできてるかチェック こんな感じのこと、よくあるCI, CD
説明
先ほどのymlの簡単な解説を書きます。
job
buildとdeplyの2つのjobを用意します。 まずbuildです。
build:
working_directory: ~/workspace
docker:
- image: circleci/node:9.4.0
steps:
- checkout
- restore_cache:
keys:
- npm-{{ .Branch }}-{{ checksum "package-lock.json" }}
- npm-{{ .Branch }}-
- npm-
- run:
name: Install Dependency
command: npm install
- run:
name: Build
command: npm run build
- save_cache:
key: npm-{{ .Branch }}-{{ checksum "package-lock.json" }}
paths:
- ~/workspace/node_modules
- ~/workspace/dist
force: yes
buildは 見ての通り、npm run build
でビルドします。ビルドしたものをdeployでも使えるようにsave_cacheを使ってnode_modules
とdist
をキャッシュしてあげます。 CircleCIではjobごとにコンテナがたつので、データの同期にはキャッシュして上げる必要があります。 またキャッシュのkeyを
- npm-{{ .Branch }}-{{ checksum "package-lock.json" }}
- npm-{{ .Branch }}-
- npm-
のようにしてあげないとうまくキャッシュが働いてくれなかったので、設定しましょう。 ちなみにここでは、ブランチ名とpackage-lock.json
のhash値を繋げてKeyを作っています。 次はdeployです。
deploy:
working_directory: ~/workspace
docker:
- image: circleci/node:9.4.0
steps:
- checkout
- restore_cache:
keys:
- npm-{{ .Branch }}-{{ checksum "package-lock.json" }}
- npm-{{ .Branch }}-
- npm-
- run:
name: deploy
command: ./node_modules/.bin/firebase deploy --only hosting --project "$FIREBASE_PROJECT_ID" --token "$FIREBASE_TOKEN"
まず、Tokenを設定します firebase login:ci
をしてアクセスリクエストを通します。 そのTokenをCircleCIのBuild Settings/Environment Valiables
からFIREBASE_TOKEN
という環境変数で登録します。ついでに、ProjectIDもFIREBASE_PROJECT_ID"
で環境変数に登録しましょう。
workflow
CircleCI2から追加されたWorkFlowを使って、masterの時だけデプロイします。
workflows:
version: 2
build_deploy:
jobs:
- build
- deploy:
requires:
- build
filters:
branches:
only: master
requires
で特定のjobを通るのを条件にできます。 filters
でブランチの指定をできます。今回はmasterにしています。
ここまでできると、やりたいことはできるはずです。 今回テストは入れていませんが、テストもjobに追加して上げることで簡単にできます。 CI, CD の環境だけでも整えておくと、開発している時の心理的安全性や、デプロイが楽だったりするのでできる限り導入すると良いのかなと思います。 (緑色のアイコンが見えてるだけで安心したりするからね)