firebasehostingを使いnuxt SPAをデプロイするまで（firebase-toolsフルセット）。

firebaseのホスティングを使いnuxtのデプロイをしてみたので、まとめて置こうと思います。

#①firebase-toolsのインストール

 ```console:
npm install -g firebase-tools
```
firebaseで使用したいものの登録をしておく


 ```console:
firebase login
firebase init
```


 ```console:ProjectSetup
? Please select an option: Use an existing project
? Select a default Firebase project for this directory: プロジェクト名 (プロジェクト名)
i  Using project プロジェクト名 (プロジェクト名)
```

 ```console:DatabaseSetup
? What file should be used for Database Rules? database.rules.json
? File database.rules.json already exists. Do you want to overwrite it with the Database Rules for gccfitness from the Firebase Console? Yes
```

 ```console:DatabaseSetup
? What file should be used for Firestore Rules? firestore.rules
? What file should be used for Firestore indexes? firestore.indexes.json
```

```console:FunctionsSetup
? What language would you like to use to write Cloud Functions? TypeScript
? Do you want to use TSLint to catch probable bugs and enforce style? Yes
? Do you want to install dependencies with npm now? Yes
```

```console:HostingSetup
? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? What file should be used for Storage Rules? storage.rules
```

```console:EmulatorsSetup
? Which Firebase emulators do you want to set up? Press Space to select emulators, then Enter to confirm your choices. Functions, Firestore, Database, Hosting, Pubsub
? Which port do you want to use for the functions emulator? 5001
? Which port do you want to use for the firestore emulator? 8080
? Which port do you want to use for the database emulator? 9000
? Which port do you want to use for the hosting emulator? 5000
? Which port do you want to use for the pubsub emulator? 8085
? Would you like to download the emulators now? Yes
```

functions同士

#②nuxt.jsのプロジェクトを作成

```console:プロジェクト名
cd functions
npx create-nuxt-app nuxt-app
```

```console:functions
? Project name nuxt-app
? Project description My scrumtrulescent Nuxt.js project
? Author name Satoshi
? Choose programming language TypeScript
? Choose the package manager Npm
? Choose UI framework Vuetify.js
? Choose custom server framework None (Recommended)
? Choose the runtime for TypeScript Default
? Choose Nuxt.js modules Axios, Progressive Web App (PWA) Support
? Choose linting tools
? Choose test framework None
? Choose rendering mode Single Page App
? Choose development tools jsconfig.json (Recommended for VS Code)
```

#③ディレクトリ構造の整理

###package.jsonの統合
現在package.jsonがfunctions/nuxt-app/package.jsonとfunctions/package.jsonの2つあります。
functions/package.jsonにすべて設定を書くように変更を加えていきます。

・functions/nuxt-app/package.jsonからscripts、dependencies、devDependenciesの項目をコピーし　　　
　functions/package.jsonにペーストします。
　functions/nuxt-app/package.jsonの内容を優先します。
・scripts:の中にdevがなかったので追加します。
・engines:のノードを"8"→　"10"に変更します。

最終的なpackage.jsonは以下のとおりです。

```console:functions/package.json
{
  "name": "functions",
  "scripts": {
    "lint": "tslint --project tsconfig.json",
    "build": "nuxt build",
    "serve": "npm run build && firebase serve --only functions",
    "shell": "npm run build && firebase functions:shell",
    "start": "nuxt start",
    "dev": "nuxt",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log",
    "generate": "nuxt generate"
  },
  "engines": {
    "node": "10"
  },
  "main": "lib/index.js",
  "dependencies": {
    "firebase-admin": "^8.6.0",
    "firebase-functions": "^3.3.0",
    "nuxt": "^2.0.0",
    "@nuxtjs/axios": "^5.3.6",
    "@nuxtjs/pwa": "^3.0.0-0"
  },
  "devDependencies": {
    "tslint": "^5.12.0",
    "typescript": "^3.2.2",
    "firebase-functions-test": "^0.1.6",
    "@nuxt/typescript-build": "^0.6.0",
    "@nuxtjs/vuetify": "^1.0.0"
  },
  "private": true
}
```
###不要となったファイルを削除
以下のファイルを削除します。

```console:functions/nuxt-app
rm -rf functions/nuxt-app/.git node_modules package.json package-lock.json
```

###ファイルの移動
functions/nuxt-app配下にある以下のファイルをfunctions直下のファイルへと移動

```console:functions/nuxt-app　→　functions
.editorconfig
.gitignore //※上書きでOK
nuxt.config.js
README.md
```

###nuxt.config.jsに追加の記述

```console:functions/nuxt.config.js
  srcDir: 'nuxt-app',
  build: {
    /*
    ** You can extend webpack config here
    */
    publicPath: '/assets/',
    extend (config, ctx) {
    }
  }
```

###npm installでファイルを更新 

```console:functions
npm install
```

#④デプロイの設定
###nuxt.config.jsのexport defaultを変更する。
後ほどrequireで読み込むため。詳細はMDNを御覧ください。
[MDN importの説明](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import)

```console:functions/nuxt.config.js
export default {
↓
module.exports = {
```
###/functions/src/index.tsを変更する
・まずは拡張子をjsに変更
・内容を以下のように変更する

```console:/functions/src/index.js
const functions = require('firebase-functions')
const { Nuxt } = require('nuxt')

const config = require('./nuxt.config.js')
const nuxt = new Nuxt(config)

exports.nuxtServer = functions.https.onRequest(async (request, response) => {
  const result = await nuxt.renderRoute(request.originalUrl, { request })
  response.send(result.html)
})
```
・firebase.jsonの変更
これによりnuxtがホスティングできるようになる。
npm run buildするとdistへファイルが生成される。

```console:/firebase.json
  "hosting": {
    "public": "functions/dist",  // 変更
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "nuxtServer" // 変更
      }
    ]
  },
```

#⑤デプロイ

```console:functions
npm run build
```

```console:functions
firebase deploy
```

・firebaseのホスティングページに行きデプロイができており、nuxtのページが表示できているか確認する。
<img width="1680" alt="スクリーンショット 2020-04-03 08.52.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543154/0e5b3a8d-4f07-eb72-1494-25fb6e8f8b8e.png">

#参考記事
とても助かりました。ありがとうございました。
[Expressなしで、最短でNuxt（SSR）をfirebaseで公開してみる。](https://dog-ears.net/nuxt/post-190702/)
[nuxt日本語ドキュメント](https://ja.nuxtjs.org/)
[Firebase Hosting を使ってみる](https://firebase.google.com/docs/hosting/quickstart?hl=ja)