在Cloud Function Firebase上部署时,页面加载速度非常慢

时间:2020-05-27 09:00:48

标签: reactjs firebase google-cloud-functions next.js serverless

以前,我将项目部署在计算引擎上,而页面加载没有任何问题。该页面过去加载非常快。但是,当我转向无服务器时,该页面的加载速度非常慢,而且有时我会收到'Error: could not handle the request'。我对无服务器部署没有足够的信心。

这就是我的部署方式

结构

.firebase
.next
public
src
  components
  pages
  utils
next.config.js
server.js
.firebaserc
firebase.json
package.json

配置部分

.firebaserc

{
  "projects": {
    "default": "project-test"
  }
}

firebase.json

{
  "hosting": {
    "public": "public",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "function": "next"
      }
    ]
  },
  "functions": {
    "source": ".",
    "ignore": [
      ".firebase/**",
      ".firebaserc",
      "firebase.json",
      "**/node_modules/**",
      "**/.vscode/**",
      "**/.hooks/**",
      "**/public/**"
    ]
  }
}

next.config.js

const withPlugins = require("next-compose-plugins");
const optimizedImages = require("next-optimized-images");
const withPWA = require("next-pwa");

module.exports = withPlugins(
    [optimizedImages],
    [
      withPWA({
        pwa: {
          dest: "public",
        },
      }),
    ]
);

server.js(我不知道它在哪里使用)

const functions = require('firebase-functions');
const next = require('next');

var dev = false;
console.log('dev', process.env.NODE_ENV);
var app = next({ dev, conf: { distDir: '.next' } });
var handle = app.getRequestHandler();

exports.next = functions.https.onRequest((req, res) => {
  console.log('File: ' + req.originalUrl); // log the page.js file that is being requested
  return app.prepare().then(() => handle(req, res));
});

脚本

"scripts": {
    "dev:client": "next",
    "local": "dotenv -e .env.local next",
    "dev:server": "node src/server --source-maps --watch",
    "dev": "dotenv -e .env.development yarn dev:client & yarn dev:server",
    "build": "dotenv -e .env.production next build",
    "build:dev": "dotenv -e .env.development next build",
    "build:staging": "dotenv -e .env.staging next build",
    "build:production": "NODE_ENV=production dotenv -e .env.production next build",
    "deploy:dev": "dotenv -e .env.development firebase deploy --only functions,hosting",
    "deploy:staging": "dotenv -e .env.staging firebase deploy -P staging --only functions,hosting",
    "start": "next start",
  },

我的部署方式是

首先,我使用以下命令构建项目

yarn build:dev

然后使用yarn deploy:dev

进行部署

这是构建文件

enter image description here

部署过程中我是否错过任何重要的事情?

注意:我正在使用nextjs 9.4

0 个答案:

没有答案