firebasehostingを使いnuxt SPAをデプロイするまで(firebase-toolsフルセット)。
firebaseのホスティングを使いnuxtのデプロイをしてみたので、まとめて置こうと思います。
①firebase-toolsのインストール
npm install -g firebase-tools
npm install -g firebase-tools
firebaseで使用したいものの登録をしておく
firebase login
firebase init
? Please select an option: Use an existing project
? Select a default Firebase project for this directory: プロジェクト名 (プロジェクト名)
i Using project プロジェクト名 (プロジェクト名)
? 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
? What file should be used for Firestore Rules? firestore.rules
? What file should be used for Firestore indexes? firestore.indexes.json
? 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
? 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
? 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の統合
cd functions
npx create-nuxt-app nuxt-app
? 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は以下のとおりです。
{
"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
}
不要となったファイルを削除
以下のファイルを削除します。
rm -rf functions/nuxt-app/.git node_modules package.json package-lock.json
ファイルの移動
functions/nuxt-app配下にある以下のファイルをfunctions直下のファイルへと移動
.editorconfig
.gitignore //※上書きでOK
nuxt.config.js
README.md
nuxt.config.jsに追加の記述
srcDir: 'nuxt-app',
build: {
/*
** You can extend webpack config here
*/
publicPath: '/assets/',
extend (config, ctx) {
}
}
npm installでファイルを更新
npm install
④デプロイの設定
nuxt.config.jsのexport defaultを変更する。
後ほどrequireで読み込むため。詳細はMDNを御覧ください。
MDN importの説明
export default {
↓
module.exports = {
/functions/src/index.tsを変更する
・まずは拡張子を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へファイルが生成される。
"hosting": {
"public": "functions/dist", // 変更
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "nuxtServer" // 変更
}
]
},
⑤デプロイ
functions
npm run build
functions
firebase deploy
npm run build
firebase deploy
・firebaseのホスティングページに行きデプロイができており、nuxtのページが表示できているか確認する。
参考記事
とても助かりました。ありがとうございました。
Expressなしで、最短でNuxt(SSR)をfirebaseで公開してみる。
nuxt日本語ドキュメント
Firebase Hosting を使ってみる
Author And Source
この問題について(firebasehostingを使いnuxt SPAをデプロイするまで(firebase-toolsフルセット)。), 我々は、より多くの情報をここで見つけました https://qiita.com/aki319809/items/9c0dc31bd150eac17007著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .