Vue.js

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

Vue.js

VueJSで多言語対応した話

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

固定ページ