【Next.js】Next.jsアプリ(静的サイト)をFirebase Hostingにデプロイしてみた

はじめに

こんにちは、がんがんです。
昨日の記事でNext.jsについて扱いました。

localhostだけで使用しているのは退屈なので、今回はFirebase Hostingにデプロイしてみようかなと思います。

目次

目的

• [今回の内容] create-next-app with-material-uiをfirebase対応させてデプロイする
• create-next-app with-firebase-hostingをinitしてみる

環境の準備

まずはどちらにも共通するDocker環境をセットアップします。5000ポートはfirebaseのローカル実行用です。

docker-compose.yml

version: '3'
services:
  app:
    build: .
    image: practice/next-firebase-hosting:dev
    ports:
      - 3000:3000
      - 5000:5000
    volumes:
      - .:/usr/src
    tty: true
    stdin_open: true
    command: /bin/sh

Dockerfile

FROM node:10.19.0

WORKDIR /usr/src

RUN npm i -g npm \
    npm i -g firebase-tools \
    && rm -rf /var/lib/apt/lists/*

create-next-app with-material-uiをfirebase hostingに対応させてデプロイする

別のcreate-next-appをデプロイしてみます。今回はwith-material-uiのexamplesを使用していきます。

参考

Material-uiの公式リポジトリを参考にしていきます。
github.com

今回は先にMaterial-uiを導入しましたが、あとから追加する場合はこちらなどが参考になります。
qiita.com

また、Next.jsのstatic適用にはこちらを参考にしました。
qiita.com

create-next-appを実行

(ホストOS) $ curl https://codeload.github.com/mui-org/material-ui/tar.gz/master | tar -xz --strip=2  material-ui-master/examples/nextjs
(ホストOS) $ docker-compose exec app bash
(Docker) $ cd nextjs
(Docker) $ npm install
(Docker) $ npm run dev

http://localhost:3000にアクセスして下記の画面になればOKです。
ちゃんとMaterial-uiっぽいButtonが配置されているのがポイント高いです。

[上] localhost:3000 [下] localhost:3000/about

firebaseのセッティングおよびデプロイ

さて、firebaseのセッティングをしてデプロイします。

#  on Docker
$  firebase login --no-localhost
$  firebase init hosting

どのプロジェクトを使用するかの設定を行い、Hostingからされる2つの質問に答えていきます。

? What do you want to use as your public directory? out
? Configure as a single-page app (rewrite all urls to /index.html)? No

実際にデプロイして下記のような画面が表示されたらまず大丈夫です。

$  firebase deploy

Next.js Appの中身を表示させていく

実際にNext.jsのアプリをデプロイしていきます。
公式ドキュメントを見る感じ、静的サイトとしてのNext.jsの使用方法みたいです。
nextjs.org

まずはnext.config.jsを生成します。

$  touch next.config.js

next.config.js

module.exports = {
  exportPathMap: async function (defaultPathMap) {
    return {
      '/': {page: '/' },
    }
  }
}

次に、package.jsonにexportを追加します。

  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    #  追加
    "export": "npm run build && next export",
    #  デプロイも一応追加
    "deploy": "firebase deploy"

ファイル準備が完了したらデプロイしていきます。

$  npm run export
$  npm run deploy

localhost:3000で確認した画面が表示されていればOKです。

おわりに

今回はNext.jsのアプリをFirebase Hostingにデプロイしていきました。
Firebase Hostingが静的サイト対応ということで意図せず静的サイトの構築を学びました。

次回はFirebaseにおけるSSR対応のNext.jsアプリを作成していきます。