CircleCIでVue.jsアプリをFirebaseにデプロイする #Vue.js

以前作ったVue.jsアプリ、これはFirebaseでHositingさせてもらってます。

当時の記事はこれです。

Vue.jsアプリをFirebaseHostingにデプロイするには、

yarn build
yarn deploy

で、デプロイしてました。

ただ、厳密（？）には、これだけじゃなくて、firebase login、してfirebase use [プロジェクト]をしておかなければならないわけです。

で、本題ですがこれをCircleCIで自動化したれということです。

始めたばかりなので設定ファイルに過不足があるかと思いますがこんな感じで設定しておけば、git push origin masterすれば、CircleCIのほうでビルドしてFirebaseにHostingまでしてくれるようになります。

CircleCIの設定

一点注意することがあります。Macのコマンドラインでfirebase loginをするとブラウザが立ち上がりますがそういうことは無理なので事前にDeploy用のアクセストークンを取得して完全にコマンドで操作できるようにしなければなりません。

それで、Firebaseのアクセストークンを取得して、ついでにデプロイ用のプロジェクトIDも設定します。画面はこんな感じです。

こうすると、CircleCIのconfig.ymlの中で変数として利用できるようになります。

ディレクトリ構成はこんな感じ

Vue.jsとFirebaseでプロジェクトつくるとこんな感じになってると思います。

プロジェクトのトップレベルに.circleci/config.ymlを作るのがポイントだそうです。

.
├── .circleci
│    └── config.yml
├── .env
├── .env.development
├── .env.production
├── .eslintrc.js
├── .firebase
├── .firebaserc
├── .git
├── .gitignore
├── .node-version
├── README.md
├── babel.config.js
├── dist       <-------- build したもの
├── firebase.json
├── firestore.indexes.json
├── firestore.rules
├── functions
├── node_modules
├── package.json
├── public
├── src
├── storage.rules
├── vue.config.js
└── yarn.lock

.circleci/config.yml

中身はこんな感じです。テストなしｗ、ビルドしていきなりデプロイしちゃいます。

version: 2
jobs:
  build:
    working_directory: ~/app
    docker:
      - image: circleci/node:10
        environment:
          LANG: ja_JP.UTF-8
          TZ: Asia/Tokyo
    steps:
      - checkout # ソースコードを作業ディレクトリにチェックアウト
      - run:
          name: install & build
          command: |
            yarn install
            yarn build
      - persist_to_workspace:
          root: . # workspaceのrootパスを永続化する、要は共有
          paths:
            - . # rootからの相対パス
  deploy:
    working_directory: ~/app
    docker:
      - image: circleci/node:10
        environment:
          LANG: ja_JP.UTF-8
          TZ: Asia/Tokyo
    steps:
      - attach_workspace: # persist_to_workspaceで設定したディレクトリを利用する
          at: .
      - run:
          name: deploy firebase hosting
          command: |
            yarn global add firebase-tools
            `yarn global bin`/firebase deploy --only hosting --project "${PROJECT_ID}" --token "${FIREBASE_TOKEN}"
workflows:
  version: 2
  build_and_deploy:
    jobs:
      - build
      - deploy:
          requires: # buildが成功したら実行
            - build
          filters:
            branches:
              only: master # master branchのみdeploy

これでいい感じにデプロイするようになりました〜