Nextを利用してFirebaseのHostingサービスを利用する

前提知識
利用環境
Nextのプロジェクトを作成する
NextのSSTを設定する

0.前提知識

NextJSとは

Next.jsはzeitが提供しているOpen Source Projectで、SSRとSSTの軽量なreactフレームワークです。VueでいうNuxtみたいな位置付けと考えてもらえればあながち間違いではないかと。

Firebaseとは

Googleが提供しているMobile Backend as a Service（MBaas）です。
他のMBaasと同様な機能と同様なサービスと同様に様々な企業が提供されています。

1.利用環境

2.Nextのプロジェクトを作成する

Nextのプロジェクト環境を作成する

$ mkdir my-project && cd my-project
$ npm init -y
$ npm insall -S react react-dom next

Package.jsonを書き換える

Nextのサービスを利用するために、package.jsonを書き換えます。

package.json

  //省略
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  //省略

404を表示させる

現状のディレクトリ構成

$ tree -L 1
.
├── node_modules
├── package-lock.json
└── package.json
$ npm run start
# 省略
> Couldn't find a `pages` directory. Please create one under the project root

Nuxtでのpageのレンダリングは、pagesフォルダをレンダリングします。

Pagesディレクトリを作成する

$ mkdir pages
$ tree -L 1
.
├── node_modules
├── package-lock.json
├── package.json
└── pages
$ npm run dev

http://localhost:3000にアクセスすると、以下の画面が表示されればOK

index pageの作成

localhost:3000にアクセスしたら、
Hello Worldの文字列を表示されるようにファイルを作成します。

$ touch pages/index.js

pages/index.js

import React from 'react';

export default class App extends React.Component {
  render() {
    return (<div>Hello World</div>)
  }
}

$ npm run dev

localhost:3000にアクセスをして以下のように文字列が表示されればOK

2. FireBase Hosting

Firebaseのプロジェクトを作成

Firebase consoleに向かい以下のページにてプロジェクトを作成します。

プロジェクトを追加を選択して、プロジェクトの作成modalに移動します。
以下、見たいな感じ。

プロジェクトを作成を選択して、Firebaseのプロジェクトの作成は完了です。

Firebaseのセットアップ

Firebaseをcliをインストール

$ npm install -g firebase-tools

Firebaseプロジェクトにアクセスする

$ firebase login

でFirebaseにログインします。

サイトを初期化する

$ cd project-path
$ firebase init

# Hostingのところでspaceを押してEnter

? Which Firebase CLI features do you want to setup for this folder? Press Space
to select features, then Enter to confirm your choices.
 ◯ Database: Deploy Firebase Realtime Database Rules
 ◯ Firestore: Deploy rules and create indexes for Firestore
 ◯ Functions: Configure and deploy Cloud Functions
>◯ Hosting: Configure and deploy Firebase Hosting sites
 ◯ Storage: Deploy Cloud Storage security rules

=== 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.

# 先ほど作ったプロジェクトに向かいEnter

? Select a default Firebase project for this directory:
  [don't setup a default project]
> sample-project (XXXXXXXXXXXXXXXXXXXX)
  [create a new project]

=== Hosting Setup

# NextのSSTのdefaultのディレクトリは./outなので、以下はoutと書きます。

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? (public)out

# yを入力してEnter
? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) y

これでfirebaseのプロジェクトが立ち上がります。

$ firebase deploy

を実行してして指定したURLに向かい以下の画像のように出ればOK

現状のディレクトリ構成は以下

$ tree -aL 2
.
├── .firebase
├── .firebaserc
├── .git
├── .gitignore
├── .next
├── firebase.json
├── node_modules
├── out
├── package-lock.json
├── package.json
└── pages

3.SSTを設定する

nextではindex.html(HTMLファイル)を作成されないため、
SSTを設定してhtmlファイルを作成していきます。

next.config.jsの作成

プロジェクトディレクトリの直下にnext.config.jsファイルを作成します。

$ touch next.config.js

next.config.js

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

Package.jsonを使ってout directoryにファイルをはかせるようにする

scriptプロパティを編集する