将使用 Yarn 的 Next.JS 网络应用程序部署到 Google App Engine

Posted 2023-02-16

【中文标题】将使用 Yarn 的 Next.JS 网络应用程序部署到 Google App Engine

【英文标题】：Deploy Next.JS web-app that used Yarn to Google App Engine

【发布时间】：2020-12-14 22:30:56

【问题描述】：

我正在尝试部署一个使用朋友提供的模板构建的网络应用程序。我对React/NextJS 框架很陌生，所以我不确定yarn 和npx 之间的区别。

我使用yarn next-build 让应用程序在本地运行，它运行良好。但是，现在我正在尝试将其部署到 NodeJS 上的 Google App Engine，但无法正常工作。

这是项目结构：

/dist/functions/next
/nginx
/node_modules
/packages
/public
.gcloudignore
.nowignore
.prettierrc
.yarnrc
app.yaml
babel.config.js
firebase.json
landing.now.json
lerna.json
package-lock.json
package.json
yarn.lock

这是app.yaml：

runtime: nodejs10

handlers:
- url: /.*
  script: auto

这是package.json：

"name": "streamplate-landing",
"description": "Your universal health app",
"version": "1.0.0",
"private": true,
"author": "Streamplate",
"devDependencies": 
"@babel/cli": "^7.10.3",
"cpx": "^1.5.0",
"cross-env": "^7.0.2",
"firebase-tools": "8.4.3",
"husky": "^4.2.5",
"lerna": "^3.22.1",
"lint-staged": "^10.2.11",
"prettier": "^2.0.5",
"rimraf": "^3.0.2",
"polished": "^3.4.4"
,
"workspaces": [
"packages/common",
"packages/landing",
"packages/landing-gatsby"
],

"scripts": 
"dev": "next",
"build": "next build",
"start": "next start",
"clean": "lerna clean --yes && rimraf node_modules",
"preweb": "cpx \"packages/common/src/assets/image/**/*.*\" \"packages/landing/static\" -C",
"next-dev": "yarn workspace next-landing run dev",
"next-build": "rimraf dist && yarn workspace next-landing run build",
"next-start": "yarn workspace next-landing run start",
"next-export": "yarn workspace next-landing run export",
"gatsby-dev": "yarn workspace gatsby-landing run dev",
"gatsby-build": "yarn workspace gatsby-landing run build",
"gatsby-serve": "yarn workspace gatsby-landing run serve",
"prebuild-public": "rimraf \"dist/functions/**\" && rimraf \"dist/public\"",
"prefirebase-serve": "yarn run build-public && yarn run build-funcs && yarn workspace next- 
landing run build && yarn run copy-deps && yarn run install-deps",
"firebase-serve": "cross-env NODE_ENV=production firebase serve",
"prefirebase-deploy": "yarn run build-public && yarn run build-funcs && yarn workspace next- 
landing run build && yarn run copy-deps",
"firebase-deploy": "cross-env NODE_ENV=production firebase deploy",
"build-public": "cpx \"packages/common/src/assets/**/*.*\" \"dist/public/static\" -C && cpx 
\"public/**/*.*\" \"dist/public\" -C && cpx \"packages/landing/public/**/*.*\" 
\"dist/public\" -C",
"build-funcs": "babel \"packages/functions\" --out-dir \"dist/functions\"",
"copy-deps": "cpx \"packages/landing/*package.json,package-lock.json,yarn.lock\" 
\"dist/functions\" -C",
"install-deps": "cd \"dist/functions\" && yarn",
"pregatsby-firebase-serve": "rimraf dist && yarn run gatsby-build && cpx \"packages/landing- 
gatsby/public/**/*.*\" \"dist/public\" -C",
"gatsby-firebase-serve": "cross-env NODE_ENV=production firebase serve",
"pregatsby-firebase-deploy": "rimraf dist && yarn run gatsby-build && cpx 
\"packages/landing-gatsby/public/**/*.*\" \"dist/public\" -C",
"gatsby-firebase-deploy": "firebase deploy",
"netlify-deploy": "yarn workspace next-landing run netlify-build"
,
"husky": 
"hooks": 
  "pre-commit": "lint-staged"

,
"lint-staged": 
"*.js,md,css": [
  "prettier --trailing-comma es5 --single-quote --write"
]

【问题讨论】：

您能发布您收到的错误消息吗？要获取有关部署过程的更多信息，请尝试部署添加标志“--verbosity=debug”。您使用的是什么 App Engine 环境（标准或灵活）？另外，如果您正在关注指南，请分享链接

【参考方案1】：

将next export 添加到package.json 的脚本区域中

"scripts": 
...
"build": "next build && next export"
...

执行yarn build 后，out 目录将生成并添加到您的项目中。

在初始化 firebase 时，使用 out 目录作为您的 public。