ファイアウォールにNuxtを配備する

導入

私はすでにNuxtとSSRを使用して作業ウェブサイトを持っているので、なぜ私はすべてのFirebaseに移動しますか?

SSR stands for server-side rendering, you can find more information here

多くの理由がある!
いくつかのリストを表示します.

価格

現在の解決策:私は個人サーバーのために毎月支払う必要があります
私のニーズのために、それは無料です.

構成

現在の解決策:私はすべてを設定する必要があります.Dockerコンテナ、https、nginxリバースプロキシ、...
Firebase:あなたが必要とするすべては、すでにされます.カスタムドメインのログを作成します.

更新

現在の解決:私のウェブサイトの変化?ステップはこちら

は、Git

に変化を押します
チェッカーハブの

フックは、起動して、コンテナ(10 - 15分)

を造ります

サーバ(1分)

に接続します

最新コンテナコンテナ(1分)を

プル

Dockerが構成する正しいフォルダーを見つける.YAMLは、それを更新します
私は、私がもう少しものを自動化することができたということを知っています、しかし、まだ...
ステップ:Firebase

端末でのFirebaseの配備( 1 - 2 min )

….変更はライブです
あなたは夢中ですか?明らかに、あなたです.あなたがそれを走らせるのを手伝わせてください.

Firebaseプロジェクトの設定

Firebaseアカウントの作成

Firebaseを使いたいですね.さて、あなたは最初にcreate your accountに必要です.
できた?新しいプロジェクトを作成することができます.

Firebaseプロジェクトを作成する

Firebase consoleに向かいましょう.
プロジェクト名を設定します.
をクリックします.
すぐにGoogle Analyticsをチェックして、FireBaseを加えてください.
プロジェクトの初期化を待ち、続行をクリックします.

ファイアウォールのインストール

今NPMの助けを借りて、我々はコンピュータ上でFireBaseツールをインストールします.
単にあなたの大好きな端末でこのコマンドを入力してください

npm i -g firebase-tools

その後、このコマンドでログインできます

firebase login

ブラウザのウィンドウがポップアップ表示され、あなたのGoogleアカウントでログインすることができます.
さて、最初のFirebaseセットアップが行われます.
プロジェクトにFireBaseを追加する前に、アプリケーションプロジェクトの構造を更新する必要があります.

プロジェクト構造

I'm supposing you already have a nuxt project.

If not, head over to the Nuxt website to create a new app with express for the server side.

当社のプロジェクトは3つのディレクトリに分解されます

src :開発ファイルが

にあるところです

機能:これは、我々のSSR機能が

であるところです

パブリックディレクトリ:このディレクトリはFirebaseホスティング

によってサーブされるファイルを保持します
私たちは、機能と公共のディレクトリの世話をしません.これは自動的に生成されます.
したがって、srcディレクトリを作成して、それにすべてのnuxtディレクトリを動かしてください.
ディレクトリだけが設定ファイルをrootに残します
あなたは以下の構造のようなものを持つべきです

アプリは現在壊れている!Nuxtの設定を更新して修正しましょう.

アップデートNuxt設定

Nuxtで.設定.jsで次の行をモジュールに追加します.輸出

module.exports = {
[...]
  srcDir: 'src',
  buildDir: 'functions/.nuxt',
[...]
}

そして、buildオブジェクトで、ExtractCSSをtrueに設定します

module.exports = {
[...]
  build: {
    extractCSS: true,
    [...]
  }
[...]
}

NPMスクリプトがエントリーファイルサーバー/インデックスを見つけることができないので、それはまだ壊れています.js
荷物を更新しましょう.JSON
devとstartスクリプトを置き換えます.

I just prefixed the path with "src"

    "dev": "cross-env NODE_ENV=development nodemon src/server/index.js --watch server",
    "start": "cross-env NODE_ENV=production node src/server/index.js",

これで、Win devやNPMランdevを入力してアプリケーションを起動できるようになりました

Notice that the functions directory has been created with the nuxt files in it.

プロジェクトにfirebaseを追加する

gitやnpmのように、FireBaseのCLIはすぐに必要なすべてを得るためにそのinitコマンドを持っています.
コマンドを起動する

firebase init

CLIはあなたにいくつかの質問をします.

? Are you ready to proceed?
> Yes

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices.
> Functions: Configure and deploy Cloud Functions,
> Hosting: Configure and deploy Firebase Hosting sites

? Please select an option:
> Use an existing project
(Select the project we created earlier)

? What language would you like to use to write Cloud Functions? (Use arrow keys)
> JavaScript

? Do you want to use ESLint to catch probable bugs and enforce style? (y/N)
> y

? Do you want to install dependencies with npm now? (Y/n)
> Y

? What do you want to use as your public directory? (public)
> public

? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)
> N

A wild public directory appeared! Our project structure is now complete.

我々は現在、我々の機能を編集することができます.

SSR関数の実装

関数/indexを開きます.JSファイルは、すべて削除し、以下のコードを貼り付ける

const functions = require('firebase-functions')
const { Nuxt } = require('nuxt')
const express = require('express')

const app = express()

const config = {
  dev: false
}

const nuxt = new Nuxt(config)

let isReady = false
const readyPromise = nuxt
  .ready()
  .then(() => {
    isReady = true
  })
  .catch(() => {
    process.exit(1)
  })

async function handleRequest(req, res) {
  if (!isReady) {
    await readyPromise
  }
  res.set('Cache-Control', 'public, max-age=1, s-maxage=1')
  await nuxt.render(req, res)
}

app.get('*', handleRequest)
app.use(handleRequest)
exports.nuxtssr = functions.https.onRequest(app)

それを合計するために、各々のreqestに、機能はレスポンスおよびリクエストオブジェクトをNUXTに渡します.レンダリング(REQ、RES)は、アプリケーションのレンダリングを処理する関数です.

関数パッケージの更新。JSON

関数は、Nuxtアプリと同じライブラリが必要になります.パッケージをコピーします.JSON依存関数/パッケージ.依存性
この記事を書くとき、Firebaseはノードバージョン10をサポートします.関数/パッケージで.JSONは8から10までのノードエンジンのバージョンを更新できます.
以下は関数/パッケージの例です.ブランクNuxtプロジェクトのJSON

{
  "name": "functions",
  "description": "Cloud Functions for Firebase",
  "scripts": {
    "lint": "eslint .",
    "serve": "firebase serve --only functions",
    "shell": "firebase functions:shell",
    "start": "npm run shell",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
  },
  "engines": {
    "node": "10"
  },
  "dependencies": {
    "firebase-admin": "^8.0.0",
    "firebase-functions": "^3.1.0",
    "cross-env": "^5.2.0",
    "nuxt": "^2.3.4",
    "express": "^4.16.4",
    "vuetify": "^1.3.14",
    "vuetify-loader": "^1.0.8",
    "@nuxtjs/pwa": "^2.6.0"
  },
  "devDependencies": {
    "eslint": "^5.12.0",
    "eslint-plugin-promise": "^4.0.1",
    "firebase-functions-test": "^0.1.6"
  },
  "private": true
}

firebaseの更新JSON

ファイル全体を置換する

{
  "hosting": {
    "public": "public",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "function": "nuxtssr"
      }
    ]
  }
}

それは我々が作った機能にすべての要求をリダイレクトするでしょう

Using a node version above 10 can cause some issues...
You can use nvm or directly install NodeJs 10 on your computer.

自動化する

静的ファイル

静的ファイルがパブリックディレクトリに保持されることを以前に知りました.しかし、Nuxt静的ファイルは何ですか?
Nuxtアプリケーション自体、Nuxtビルドコマンドの結果があります.
と静的ファイル(. jpg、. ico、. png、...)src/staticディレクトリに保存されます.
それで、パブリックディレクトリで両方を動かす必要があります.

一歩一歩

ここでは、スクリプトと自動化するつもりです

には既にディレクトリがあります.

ビルドNuXTアプリ

内蔵アプリケーションは、関数のディレクトリになりました.関数の内容をコピーします.Nuxt/dist/ディレクトリ/public nuxtディレクトリ

静的ファイルをsrc/static/ディレクトリからパブリックディレクトリ

のルートにコピーします

関数の依存関係をヤーン

にインストールする

The public folder should look something like this

これらのスクリプトは私たちのすべてを行います.彼らはとても親切だ.
これらをメインパッケージに追加します.JSONファイル.

Windowsバージョン

scripts: {
    "build": "nuxt build",
    "build:firebase": "yarn clean && yarn build && yarn copy && cd \"functions\" && yarn",

    "clean": "yarn clean:public && yarn clean:functions && yarn clean:static",
    "clean:functions": "rimraf \"functions/node_modules\" && rimraf \"functions/.nuxt\"",
    "clean:public": "rimraf \"public/**/*.*!(md)\" && rimraf \"public/_nuxt\"",
    "clean:static": "rimraf \"src/static/sw.js\"",

    "copy": "yarn copy:nuxt && yarn copy:static",
    "copy:nuxt": "xcopy \"functions\\.nuxt\\dist\\*\" \"public\\_nuxt\\\" /E /Y",
    "copy:static": "xcopy \"src\\static\\*\" \"public\\\" /E /Y",

    "start:firebase": "firebase serve --only functions,hosting",

    "deploy": "firebase deploy --only functions,hosting"
}

MacOSバージョン

Thanks to for his MacOs scripts version

 "scripts": {
    // ...
    "build:firebase": "yarn clean && yarn build && yarn copy && cd functions && yarn",

    "clean": "yarn clean:public && yarn clean:functions && yarn clean:static",
    "clean:functions": "rimraf \"functions/node_modules\" && rimraf \"functions/.nuxt\"",
    "clean:public": "rimraf \"public/**/*.*!(md)\" && rimraf \"public/_nuxt\"",
    "clean:static": "rimraf \"src/static/sw.js\"",

    "copy": "yarn copy:nuxt && yarn copy:static",
    "copy:nuxt": "mkdir public/_nuxt && cp -r functions/.nuxt/dist/* public/_nuxt",
    "copy:static": "cp -r src/static/* public",

    "start:firebase": "firebase serve --only functions,hosting",

    "deploy": "firebase deploy --only functions,hosting",

    // ...
  }

Still having issues? comment might help you

グランドフィナーレ

これらのコマンドを起動してアプリケーションを起動できます

yarn build:firebase
yarn start:firebase

展開します.

yarn build:firebase
yarn deploy

To、開発のために、あなたはまだ使用できます

yarn dev

結論

これで、サーバーにNuxtアプリケーションをfirebaseにレンダリングしました.簡単な?
この記事のために、私は空白Nuxtアプリで例をしました.最終的なプロジェクトはnuxt-on-firebase example repositoryです.
あなたはエラーを見つけましたか?恥を知れ!プルリクエストを行うことによって修正することができます