Next.jsをGithubActionsでFirebaseにデプロイすると環境変数が適応されない

はじめに

Next.jsの実装をして、GithubActionsをやったときにうまくいかなかったのでまとめます

問題

以下のようにデプロイをするステップをGithubActionsにいれました

  deploy:
    name: deploy
    runs-on: ubuntu-latest
    # needs: test
    needs: build
    steps:
      - name: Checkout code
        uses: actions/checkout@v2
      - name: Setup Node.js and cache
        uses: actions/setup-node@v2
        with:
          node-version: "18"
          cache: "npm"
      - name: Install firebase-tools
        run: npm install --save-dev firebase-tools
      - name: Decode Firebase service account key
        run: |
          echo "${{ secrets.FIREBASE_KEY }}" | base64 -d > ./firebase-key.json
          echo "GOOGLE_APPLICATION_CREDENTIALS=${{ github.workspace }}/firebase-key.json" >> $GITHUB_ENV
      - name: change space
        run: |
          ./node_modules/.bin/firebase use ${{ secrets.FIREBASE_PROJECT_ID }}
      - name: Deploy to Firebase Hosting
        run: |
          ./node_modules/.bin/firebase deploy
        env:
          FIREBASE_CLI_EXPERIMENTS: webframeworks
          SERVICE_DOMAIN: ${{ secrets.SERVICE_DOMAIN }}
          CMS_API_KEY: ${{ secrets.CMS_API_KEY }}
          QIITA_API_KEY: ${{ secrets.QIITA_API_KEY }}
          NEXT_PUBLIC_API_URL: ${{ secrets.NEXT_PUBLIC_API_URL }}
      - name: delete GOOGLE_APPLICATION_CREDENTIALS
        run: rm $GOOGLE_APPLICATION_CREDENTIALS
        if: ${{ always() }}

しかしデプロイしたアプリケーションはSSRのAPIだとなぜか環境変数が存在せずにエラーが返却されました
Reactでは動いているのに、Next.jsだとうまくいきませんでした

解決方法

.envを作ってそこに環境変数をいれることでうまくいきました

  deploy:
    name: deploy
    runs-on: ubuntu-latest
    # needs: test
    needs: build
    steps:
      - name: Checkout code
        uses: actions/checkout@v2
      - name: Setup Node.js and cache
        uses: actions/setup-node@v2
        with:
          node-version: "18"
          cache: "npm"
      - name: Install firebase-tools
        run: npm install --save-dev firebase-tools
      - name: Decode Firebase service account key
        run: |
          echo "${{ secrets.FIREBASE_KEY }}" | base64 -d > ./firebase-key.json
          echo "GOOGLE_APPLICATION_CREDENTIALS=${{ github.workspace }}/firebase-key.json" >> $GITHUB_ENV
      - name: change space
        run: |
          touch .env
          echo "SERVICE_DOMAIN=${{ secrets.SERVICE_DOMAIN }}" >> .env
          echo "CMS_API_KEY=${{ secrets.CMS_API_KEY }}" >> .env
          echo "QIITA_API_KEY=${{ secrets.QIITA_API_KEY }}" >> .env
          echo "NEXT_PUBLIC_API_URL=${{ secrets.NEXT_PUBLIC_API_URL }}" >> .env
          ./node_modules/.bin/firebase use ${{ secrets.FIREBASE_PROJECT_ID }}
      - name: Deploy to Firebase Hosting
        run: |
          ./node_modules/.bin/firebase deploy
        env:
          FIREBASE_CLI_EXPERIMENTS: webframeworks
      - name: delete GOOGLE_APPLICATION_CREDENTIALS
        run: rm $GOOGLE_APPLICATION_CREDENTIALS
        if: ${{ always() }}

おわりに

沼って気づいたら深夜になっていました。
FirebaseあまりNext.jsとあいしょうよくないなとかんじました