在 Firebase 谷歌云上部署 nextjs 应用程序答案

【问题标题】：deploy nextjs app on firebase google cloud在 Firebase 谷歌云上部署 nextjs 应用程序
【发布时间】：2020-09-06 11:42:00
【问题描述】：

我正在考虑在 gcp firebase 上部署 nextjs 项目。但是，我看不到任何页面正在运行。我的意思是它显示为完全空白。我不太确定我是否错过了一些部署。

这是我的配置

.next
public
src
  pages
  components
  assets - images
server.js
.babelrc
.env.development
.env.staging
.env.production
.firebaserc
firebase.json
jsconfig.json
next.config.js

现在部署设置

firebase.json

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

.firebaserc

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

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 = process.env.NODE_ENV !== 'production';
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));
});

package.json

{
    "name": "jeweltrek-next",
    "version": "0.1.0",
    "private": true,
    "main": "server.js",
    "engines": {
      "node": "10"
    },
    "scripts": {
      "dev:client": "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:staging": "dotenv -e .env.staging next build",
      "serve": "dotenv -e .env.staging firebase serve --only functions,hosting",
      "deploy": "dotenv -e .env.staging firebase deploy --only functions,hosting",
      "start": "next start"
    },
    "dependencies": {
      "apollo-boost": "^0.4.7",
      "dotenv": "^8.2.0",
      "express": "^4.17.1",
      "firebase-admin": "^8.12.1",
      "firebase-functions": "^3.6.1",
      "formik": "^2.1.4",
      "graphql": "^15.0.0",
      "html-to-draftjs": "^1.5.0",
      "imagemin-mozjpeg": "^8.0.0",
      "imagemin-optipng": "^7.1.0",
      "isomorphic-fetch": "^2.2.1",
      "isomorphic-unfetch": "^3.0.0",
      "lodash": "^4.17.15",
      "lqip-loader": "^2.2.0",
      "next": "^9.4.0",
      "next-compose-plugins": "^2.2.0",
      "next-optimized-images": "^2.5.8",
      "next-pwa": "^2.4.1",
      "next-runtime-dotenv": "^1.2.0",
      "nprogress": "^0.2.0",
      "react": "16.13.1",
      "react-apollo": "^3.1.5",
      "react-apollo-hooks": "^0.5.0",
      "react-dom": "16.13.1",
      "react-draft-wysiwyg": "^1.14.4",
      "styled-components": "^5.1.0",
      "webp-loader": "^0.6.0",
      "yup": "^0.28.3"
    },
    "devDependencies": {
      "babel-eslint": "^10.1.0",
      "firebase-functions-test": "^0.2.1"
    }
  }

对于部署我正在做的事情是

首先我使用yarn build:staging 构建文件，如果它用于暂存
纱线部署

它说部署也完成了，没有错误，但是如果我导航到浏览器，那么它不会呈现页面

https://us-central1-jeweltrek-test.cloudfunctions.net/next/

这就是我得到的

【问题讨论】：

您能帮我解决与 next.config.js 类似的问题吗？谢谢stackoverflow.com/questions/65866071/…

标签： javascript reactjs firebase next.js serverless

【解决方案1】：

这可能与云功能和 IAM 或身份验证的权限有关，请查看此页面：https://firebase.google.com/docs/reference/fcm/rest/v1/ErrorCode 另外，检查这个答案： Firebase Functions HTTPS 403 Forbidden

我希望这能解决它。祝你好运！

【讨论】：