CircleCI에서 Vue.js 앱을 Firebase에 배포

이전에 만든 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

내용은 이런 느낌입니다. 테스트 없음 w, 빌드하고 갑자기 배포 버립니다.

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

이제 좋은 느낌에 배포하게 되었습니다~