くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

トップ > Nuxt.js > GitHub ActionsでNuxtアプリをHostingとFunctionsにデプロイする

GitHub ActionsでNuxtアプリをHostingとFunctionsにデプロイする

Nuxt.js Firebase GitHub Actions

GitHub ActionsでFirebase Hostingへデプロイできるようになったので、
試してみたときの備忘録。

HostingへデプロイするGitHub Actionsはいろいろある

以下の2つがあるっぽい。

  • GitHub Action for Firebase
    • GitHub Actionでfirebase-toolsが利用できるやつ
    • Hosting以外も使えるので、今回はこっちを利用
  • Deploy to Firebase Hosting
    • Firebaseの公式で利用されているやつ
    • firebase init hosting:githubではこれが使われる
    • Hosting以外は対応していないが、チャネルなどの設定もできる

今回は、Functionsもデプロイできるようにしたかったので、
GitHub Action for Firebaseを利用している。

ディレクトリ構成

ディレクトリ構成はこんな感じ。

.
├── .github
│   └── workflows
│       └── firebase-hosting-prod.yml
│
├── app               ... Nuxtアプリ
├── functions         ... Functions
│   ├── src
│   ├── package.json
│   └── tsconfig.json
├── .firebaserc
├── firebase.json
├── nuxt.config.ts
├── package-lock.json
├── package.json
└── tsconfig.json

firebase-hosting-prod.ymlの中身

name: Deploy to Firebase Hosting and Cloud Functions
# どのタイミングで実行するかの設定
# masterブランチにプッシュされたら実行する。
"on":
  push:
    branches:
      - master

# 実行するジョブ(一連の操作)の設定
jobs:
  build_and_deploy_prod:
    runs-on: ubuntu-latest
    steps:
      # リポジトリをチェックアウト
      - name: Checuout
        uses: actions/checkout@v2
      
      # Nuxtアプリのビルド
      # 環境変数が必要な場合は、ここで設定
      - name: Build for Hosting
        run: npm ci && npm run build
        env:
          BASE_URL: ${{ secrets.BASE_URL }}
          API_KEY: ${{ secrets.API_KEY }}
          AUTH_DOMAIN: ${{ secrets.AUTH_DOMAIN }}
          PROJECT_ID: ${{ secrets.PROJECT_ID }}
          STORAGE_BUCKET: ${{ secrets.STORAGE_BUCKET }}
          MESSAGING_SENDER_ID: ${{ secrets.MESSAGING_SENDER_ID }}
          APP_ID: ${{ secrets.APP_ID }}
          MEASUREMENT_ID: ${{ secrets.MEASUREMENT_ID }}
      
      # NuxtアプリをHostingへデプロイ
      - name: Deploy for Hosting
        uses: w9jds/firebase-action@master
        with:
          args: deploy --only hosting --project=${{ secrets.PROJECT_ID }}
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
          
      # Cloud Functionのビルド
      - name: Build for Function
        run: npm ci --prefix functions && npm run build --prefix functions

      # Cloud Functionのデプロイ
      - name: Deploy for Function
        uses: w9jds/firebase-action@master
        with:
          args: deploy --only functions --project=${{ secrets.PROJECT_ID }}
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

secrets.XXXは、GithHubからブラウザ上で設定する。
・暗号化されたシークレット - GitHub Docs

secrets.FIREBASE_TOKENは、firebase login:ciで取得したトークンを設定。

設定後に、firebase-hosting-prod.ymlを含めて、pushすると、 GitHub Actionsが実行されて、デプロイできるようになる。

以上!!　便利!!

参考にしたサイトさま