Github Actionを使ってFirebaseにデプロイしたい

を今更ながら触りつつ、勉強している。

そこでFrebase Hostingにデプロイすることを手動でやっていたが、ちょい足しポイントでCIでデプロイしてみようみたいなものがあり、そこで試行錯誤していたときのメモ。

組み合わせとか

書籍に出てきたとおり vue-cli は使っているが、個人的に yarn を使っているので、パッケージマネージャーは yarn でやった（あんまり変わらないけど）。

できたもの

とりあえずこれで動いた。環境変数は firebase-tools でやったらとれた。

name: Node CI

on:
  push:
    branches: [ master ]

jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [12.x]
    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
    - run: yarn
    - run: yarn run build
    - name: replace index.html
      run: cp index.html dist/
      shell: bash
    - name: deploy to Firebase Hosting
      uses: w9jds/firebase-action@master
      with:
        args: deploy
      env:
        FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

結構見様見真似なので、書き方微妙なところはあるカモ。

見たところとか

• github Actionsで pushされたらfirebase hostingにdeployする - Qiita
  • 最初に参考にした
  • なんか微妙に変で、別に git clone して二回ビルドする必要あるのかなと思った（意図的にやるならファイル分けてもいいのかなと思った）
  • run コマンドあたりは参考になった
  • 環境変数のセットはわかりやすい記事だった
• Nuxt × Firebase アプリケーションを GitHub Actions で自動デプロイ - Qiita
  • 結論、こっちを参考にした
  • build & deploy はこっちのほうがきれい
  • Nuxt でやっているので、Nuxt 用のコマンドになっているのがあれで、書籍に合わせた形で書き換えた
  • Firabase 認証トークンの得方とか、設定もわかりやすかった
• GitHub Action for Yarn · Actions · GitHub Marketplace
  • なんかこれ前見てやったけど yarn のバージョンが古すぎて大丈夫か？ となった
  • 結果的に run: yarn が普通に動いたので（前、GitHub Actionsで遊んでみたときに yarn 動くのは確認できていた） まあいっかとおもって、この方法は採用しなかった
  • なにかの原因で CI 動かなくなったらまた参考にする
• GitHub Actionsのワークフロー構文 - GitHub ヘルプ
  • 忘れるのでよく参照している

まとめ

GitHub Acitonsで環境変数の入れ方とか含めて学べたのでとても良かったです。あとは人間が手でやってもFirebaseへのデプロイ簡単なんですが、それを自動でできるのはいいなあという感想です（それについても色々学びがあったので他の記事で触れたい）

繰り返し作業の自動化をしていくのは活動時間の確保につながるので、ガンガンやっていきたいですね。