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

10447 ワード
nuxt.js TypeScript Firebase PWA TypeScript テキストリンク

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

①firebase-toolsのインストール

npm install -g firebase-tools

firebaseで使用したいものの登録をしておく

firebase login
firebase init
ProjectSetup
? Please select an option: Use an existing project
? Select a default Firebase project for this directory: プロジェクト名 (プロジェクト名)
i  Using project プロジェクト名 (プロジェクト名)
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
DatabaseSetup
? What file should be used for Firestore Rules? firestore.rules
? What file should be used for Firestore indexes? firestore.indexes.json
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
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
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のプロジェクトを作成

プロジェクト名
cd functions
npx create-nuxt-app nuxt-app
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は以下のとおりです。

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
}

不要となったファイルを削除

以下のファイルを削除します。

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

ファイルの移動

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

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

nuxt.config.jsに追加の記述

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

npm installでファイルを更新

functions
npm install

④デプロイの設定

nuxt.config.jsのexport defaultを変更する。

後ほどrequireで読み込むため。詳細はMDNを御覧ください。
MDN importの説明

functions/nuxt.config.js
export default {
↓
module.exports = {

/functions/src/index.tsを変更する

・まずは拡張子をjsに変更
・内容を以下のように変更する

/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へファイルが生成される。

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

⑤デプロイ

functions
npm run build
functions
firebase deploy

・firebaseのホスティングページに行きデプロイができており、nuxtのページが表示できているか確認する。

参考記事

とても助かりました。ありがとうございました。
Expressなしで、最短でNuxt（SSR）をfirebaseで公開してみる。
nuxt日本語ドキュメント
Firebase Hosting を使ってみる