VueJS と Firebase と CircleCIで楽々CI CD環境作る話

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

参考になるドキュメント

VueCLI3 Deployment

CircleCI Deploment

手順

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 の環境だけでも整えておくと、開発している時の心理的安全性や、デプロイが楽だったりするのでできる限り導入すると良いのかなと思います。 (緑色のアイコンが見えてるだけで安心したりするからね)

VueJS と Firebase と CircleCIで楽々CI CD環境作る話

VueJS と Firebase と CircleCIで楽々CI CD環境作る話

環境

参考になるドキュメント

手順

Vue

Firebase

CircleCI

circleci/config.ymlを編集しよう

やりたいこと

説明

job

workflow

関連

固定ページ