Github ActionでfirebaseプロジェクトをS3にデプロイする

公開日時
更新日時

Nuxt.jsのSPAサービスをGithub ActionでS3にデプロイできるようにした。

[[.github/workflows/deploy.yml]]に以下を追加して、secretを設定。

name: deploy to s3

request
on:
  push:
    branches: [deployment]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: Use Node.js
        uses: actions/setup-node@v1
        with:
          node-version: "12.x"

      - name: Install dependencies
        run: yarn

      - name: Build
        env:
          FIREBASE_APIKEY: ${{ secrets.FIREBASE_APIKEY }}
          FIREBASE_AUTH_DOMAIN: ${{ secrets.FIREBASE_AUTH_DOMAIN }}
          FIREBASE_DATABASE_URL: ${{ secrets.FIREBASE_DATABASE_URL }}
          FIREBASE_PROJECT_ID: ${{ secrets.FIREBASE_PROJECT_ID }}
          FIREBASE_STORAGE_BUCKET: ${{ secrets.FIREBASE_STORAGE_BUCKET }}
          FIREBASE_MESSAGING_SENDER_ID: ${{ secrets.FIREBASE_MESSAGING_SENDER_ID }}
          FIREBASE_APP_ID: ${{ secrets.FIREBASE_APP_ID }}
        run: yarn run build

      - name: Publish to AWS S3
        uses: jakejarvis/s3-sync-action@v0.5.1
        with:
          args: --acl public-read --follow-symlinks --delete
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          AWS_REGION: ${{ secrets.AWS_REGION }}
          SOURCE_DIR: "dist"
          AWS_S3_BUCKET: "nuxt-sample"

IAMロールのポリシーには以下のようにS3バケットへのアクセスを許可しておく。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "s3:ListBucket"
            ],
            "Resource": [
                "arn:aws:s3:::nuxt-sample"
            ]
        },
        {
            "Effect": "Allow",
            "Action": [
                "s3:*"
            ],
            "Resource": [
                "arn:aws:s3:::nuxt-sample/*"
            ]
        }
    ]
}

これでdeploymentブランチにpushしたら自動でs3にデプロイできるようになった。

参考


Related #firebase

SharedArrayBuffer updates in Android Chrome 88 and Desktop Chrome 92

クロスオリジン分離対応を実施

Firebase Emulator Suiteで起動しているFunctionsから本番のFirestoreにアクセスする

functionsのみエミュレータを使うようにするとできる

Firebase Functions呼び出し時に Error: function terminated. が発生した場合

firebase functions:logで詳細を確認できる

Cloud BuildでFirebase Hostingのデプロイを行う

リポジトリへのpush以外をトリガーにしたい場合に使用

Firebase FunctionsでonCallで実装しているにも関わらずCORSエラーが発生した場合

Cloud Functions(GCP)の管理画面を確認してみる

JestでFirestoreセキュリティルールのテストを書く

Github ActionsでCIを回せるようになった