Firebase に Next.js のアプリケーションを Hosting する

Firebaseはランニングコストが無料なので今回はNext.jsのアプリケーションを公開するところまでやってみる。

Next.jsのアプリケーションをcreateする

アプリケーションを新規作成

npx create-next-app@latest --typescript

上記で作成したプロジェクトはデフォルトのままだと静的ファイルを export したときにエラーが出るので一部を編集。

pages/index.tsx

         >
           Powered by{' '}
           <span className={styles.logo}>
-            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
+            {/* <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} /> */}
           </span>
         </a>
       </footer>

手動で Firebase にデプロイする

Firebase cliをインストール。

npm install -g firebase-tools

初期設定 & firebase.json 生成する。公開ディレクトリは out に変更する。

$ firebase login
$ firebase init hosting
? Please select an option: Use an existing project
? Select a default Firebase project for this directory: <YOUR-PROJECT-NAME>
? What do you want to use as your public directory? (public) out
? Configure as a single-page app (rewrite all urls to /index.html)? No

npm script に export を追加。

package.json

     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "export": "next export"
   },
   "dependencies": {
     "next": "12.1.6",

build & export

npm build && npm export

デプロイ。

firebase deploy --only hosting

github actionsで自動デプロイする

mainブランチを push したときに自動で Firebase にデプロイする。

.github/workflow/firebase-hosting-merge.yml

# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools

name: Deploy to Firebase Hosting on merge
'on':
  push:
    branches: main
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Cache node modules
        uses: actions/cache@v3
        env:
          cache-name: cache-node-modules
        with:
          # npm cache files are stored in `~/.npm` on Linux/macOS
          path: ~/.npm
          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-build-${{ env.cache-name }}-
            ${{ runner.os }}-build-
            ${{ runner.os }}-
      - name: Build to Static file Export
        run: npm ci && npm run build && npm run export
      - name: Firebase Hosting Deploy
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_<YOUR-PROJECT-NAME> }}'
          channelId: live
          projectId: <YOUR-PROJECT-NAME>

アプリケーションを実装する

割愛。