FirebaseでNextjsプロジェクトを簡単にデプロイする
使用機材
Mac M1 pro
Sonoma 14.1
事前準備
- Nextjsプロジェクトを準備
- npm , nodeインストール
- next exportの静的ファイル
Firebaseプロジェクトを登録 プロジェクト名を入力後、 あなりスティックスを設定（特に希望がなければ有効にしたほうが良いです）
Firebase toolsインストール
npm install -g firebase-tools
上記のコマンドでグローバルインストールを行います。
firebaseログイン
firebase login
実行したらブラウザのログイン画面が表示され、プロジェクトを生成したアカウントでログインを行います。
- Firebaseをプロジェクトでインストールする
プロジェクトフォルダで以下のコマンドを入力します。
1
firebase init
以下のシェルが出力されます。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
######## #### ######## ######## ######## ### ###### ########
## ## ## ## ## ## ## ## ## ## ##
###### ## ######## ###### ######## ######### ###### ######
## ## ## ## ## ## ## ## ## ## ##
## #### ## ## ######## ######## ## ## ###### ########
You're about to initialize a Firebase project in this directory:
{プロジェクト名}
? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices. (Press <space> to select, <a> to toggle all, <i>
to invert selection, and <enter> to proceed)
◯ Realtime Database: Configure a security rules file for Realtime Database and (optionally) provision default instance
◯ Firestore: Configure security rules and indexes files for Firestore
◯ Functions: Configure a Cloud Functions directory and its files
❯◯ Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
◯ Hosting: Set up GitHub Action deploys
◯ Storage: Configure a security rules file for Cloud Storage
◯ Emulators: Set up local emulators for Firebase products
ここでHostingのみ利用するので以下を選びます。
1
◯ Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
次に以下のシェルが出力されます。
1
2
3
4
5
6
7
8
9
10
11
=== Project Setup
First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.
? Please select an option:
❯ Use an existing project
Create a new project
Add Firebase to an existing Google Cloud Platform project
Don't set up a default project
ここでプロジェクトをすでに生成しているので Use an existing projectを選び、生成したプロジェクトを選択します（Enter)
次に、静的ファイルが存在しているディレクトリを指定します。next exportで生成する場合。 /out に配置されます。
1
2
3
4
5
6
Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.
? What do you want to use as your public directory? out
? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) y
以降はGithubのactionsの設定ができます。
1
2
3
4
? What do you want to use as your public directory? out
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? Yes
? File out/index.html already exists. Overwrite? No
これは好みによって行なってください。(github認証が必要です）
1
2
3
4
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
✔ Firebase initialization complete!
- デプロイする
設定後、以下のコマンドでデプロイできます。Github Actionsを設定した場合は、設定したブランチにマージされたら反映がされます。
1
firebase deploy
[追記]
本機能は静的ファイルをアップロードすることがメインなので動的動作においてはその動作が不完全な場合があります。なので、他のサービスを使うか、動作確認を行うことをお勧めします。（無料枠があるので使えるなら使いたいですね）
[追記2]
Github Actionsを通してPRを作成すると失敗します。 Nextjsの場合はGithub actionsファイルを以下のようにdependencyをインストールするようにすること(PRとデプロイ両方）
1
2
3
4
5
6
7
8
9
10
11
12
name: Deploy to Firebase Hosting on PR
'on': pull_request
jobs:
build_and_preview:
if: '$'
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- run: npm install
- run: npm run build && npm run lint
- uses: FirebaseExtended/action-hosting-deploy@v0
...
追加に以下のエラーがある場合は
1
Resource not accessible by integration
この場合は必要なトークン取得に失敗しているのでレポジトリの設定のActions -> Generalで権限を変更します。 このように作成権限を与えることで解消されます。