こんにちはかみむらです。先日Designfindというサービスを作りました。このサービスはNext.js(静的サイト) + 外部のAPIで構成されていて、Jamstackアーキテクチャーを採用しています。そして、ホスティング先にFirebaseを利用しています。
Firebaseのホスティングは非常に優秀で、CLIコマンドで簡単にデプロイすることができます。なので静的サイトをホストする際は、Firebaseを使うのも選択肢の一つです。
今回はNext.js(静的サイト)をFirebaseにホスティングしていきます。また、ホスティングした静的サイトの個別ページでブラウザをリロードすると、リライト(URLは変わってないのに、404のページが表示されてしまう)する問題もありました。こちらの解決策の知見も共有していきます。
Jamstackアーキテクチャーについて詳しく知りたい方は、こちらの記事も一読ください。
前提
create-next-appで作成したプロジェクトを前提としています。
Firebase CLIのインストールとログインを事前に済ませてください。
こちらのドキュメントが参考になります。
firebase.google.com
セットアップ
まずは、Next.jsを静的サイトとして構成するための設定をしていきます。next exportを使用します。
package.json
"scripts": { "dev": "next dev", "build": "next build", "start": "next start", //追加 "export": "yarn run build && next export" },
試しに、pagesフォルダにabout.jsと_error.jsを作成してみましょう。_error.jsはステータスコードが404もしくは500のエラーがでた場合表示させることができます。
pages/about.js
const About = () => ( <div>About</div> ); export default About;
pages/_error.js
const Error = () => ( <div>404</div> ); export default Error;
これで準備は完了です。一旦exportしてみましょう
$ yarn run export
outフォルダが作成されましたので、中身をみてみましょう。pagesフォルダの3つのhtmlが生成されています。
これで、静的サイトとして構成することができました。
Firebaseのセットアップ
次にFirebaseにホスティングする設定をしていきます。CLI上で、下記のコマンドを実行してください。
$ firebase init
いくつか質問されるので、選択していきます。まずは、Hostingを選択します。
そして、ホスティング先のプロジェクトを選択します。
そして、デプロイするフォルダをoutにします。
Firebaseのリライト設定
このままでもFirebaseにデプロイできるのですが、例えばaboutページにいってブラウザをリロードする、もしくはaboutとURLを直打ちすると、404ページがリライトされてしまいます。これを回避するために、個別ページ毎にリライト設定します。
今回のケースだとaboutページの設定を追加します。これで、aboutページでブラウザリロードしても、404ページがリライトされません。
firebase.json
{ "hosting": { "public": "out", "ignore": ["firebase.json", "**/.*", "**/node_modules/**"], "rewrites": [ { "source": "/about", "destination": "/about.html" } ] } }
最後にFirebaseにデプロイしましょう。下記のコマンドでデプロイすることができます。
$ firebase deploy
URLが発行されるので、アクセスすると無事デプロイできてることが確認できます。
最後に
Next.js(静的サイト)をFirebaseにホスティングしてみました。これを気にぜひNext.jsを使ってみてください。
