名もなき未知

エンジニアリングとか、日常とかそういうのをまとめる場所。アクセス解析のためGAを利用、Googleに情報を送信しています。商品紹介のためAmazonアフィリエイトを利用、Amazonに情報を送信しています。記事に関しては私が書いていない引用文を除いて自由にご利用ください。

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

改訂新版 Vue.jsとFirebaseで作るミニWebサービス (技術の泉シリーズ(NextPublishing)) | 渡邊 達明 | 工学 | Kindleストア | Amazon を今更ながら触りつつ、勉強している。

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

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