Next を使ってFireBase Hostingを利用する

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

## Table of Contents
0. 前提知識
1. 利用環境
2. Nextのプロジェクトを作成する
3. NextのSSTを設定する

## 0.前提知識

### NextJSとは

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


### Firebaseとは

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


## 1.利用環境

- [Next](https://github.com/zeit/next.js)
- [FireBase](https://firebase.google.com/?hl=ja)

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

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

```terminal
$ 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を表示させる

#### 現状のディレクトリ構成

```terminal
$ 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ディレクトリを作成する

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

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

![404  This page could not be found.png](https://qiita-image-store.s3.amazonaws.com/0/144543/a3e09e3a-800c-6639-76e7-16cb54dd4b7e.png)

### index pageの作成

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

```terminal
$ touch pages/index.js
```

```pages/index.js
import React from 'react';

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

```terminal
$ npm run dev
```

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

![localhost 3000 (1).png](https://qiita-image-store.s3.amazonaws.com/0/144543/5597c621-4196-de2d-1298-bf837942f55d.png)



##2. FireBase Hosting

### Firebaseのプロジェクトを作成

[Firebase console](https://console.firebase.google.com/)に向かい以下のページにてプロジェクトを作成します。

![Firebase console.png](https://qiita-image-store.s3.amazonaws.com/0/144543/627a09b9-2853-e91d-078d-80dfe9e750f7.png)

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

![Firebase console Modal.png](https://qiita-image-store.s3.amazonaws.com/0/144543/fcf33886-8775-c9fd-f399-613295514532.png)

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

### Firebaseのセットアップ

#### Firebaseをcliをインストール

```terminal
$ npm install -g firebase-tools
```

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

```terminal
$ 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

![Welcome to Firebase Hosting.png](https://qiita-image-store.s3.amazonaws.com/0/144543/47bdedab-5d1c-cc15-8fb4-68de0524f6c1.png)

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

```terminal
$ 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ファイルを作成します。

```terminal
$ touch next.config.js
```

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

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

scriptプロパティを編集する

```package.json
//省略
"scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "export": "npm run build && next export"
  },
//省略

```

### デプロイ

順序としては、outディレクトリを編集→firebaseにデプロイを実行していきます。

```
$ npm run export
$ firebase deploy
```

firebase deployに表示されたURLに飛び、Hello Worldの文字列が表示されればOKかと。