はじめに
この記事ではFirebase HostingにNext.jsプロジェクトをデプロイし、初期表示画面が出るまでを行います。
この記事で取り扱わないこと
- Firebaseへのアカウント登録方法
動作環境
MacOS Ventura 13.5
Node v21.6.2
目次
Next.jsプロジェクトを作成する
Next.jsのプロジェクトを作成します。
npm run devを実行後http://localhost:3000を確認し、Next.jsの初期ページが表示されればOKです。
$ npx create-next-app@latest
$ npm i
$ npm run dev
Next.jsの初期ページ
Firebaseにプロジェクトを作成する
Firebaseのコンソールにアクセスします。
プロジェクトを追加をクリックします。
プロジェクト名を入力します。
続行を選択します。
プロジェクトを作成をクリックします。
これで少し待つとプロジェクトが作成されます
Firebaseにデプロイする
firebase-toolsをインストールし、ログインします。
firebase login実行後、Googleログイン画面に遷移するのでご自身のアカウントでログインしてください。
$ npm install -g firebase-tools
$ firebase login
Firebaseにデプロイするためのセッティングを行います。
実行すると質問されるので、以下のように選択してください。
最後にFirebase initialization complete!と出力されればOKです。
$ firebase init hosting
? Please select an option: Use an existing project
? Select a default Firebase project for this directory: {先ほど作ったプロジェクトを選択}
? What do you want to use as your public directory? out
? Configure as a single-page app (rewrite all urls to /index.html)? No
? Set up automatic builds and deploys with GitHub? Yes
✔ Wrote out/404.html
✔ Wrote out/index.html
・・・・・
✔ Firebase initialization complete!
exportの設定を追加します。
next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export'
};
export default nextConfig;
コードをビルドし、Firebaseにデプロイします。
firebase deploy --only hostingの実行が終わると、Hosting URLが出力されるので、それにアクセスするとデプロイしたものを確認することができます。
$ npm run build
$ firebase deploy --only hosting
・・・・
Hosting URL: https://test1-c5bdc.web.app