时间戳

首页 > 解决方案 > 将使用 Yarn 的 Next.JS 网络应用程序部署到 Google App Engine

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

问题描述

我正在尝试部署一个使用朋友提供的模板构建的网络应用程序。我对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"
]
}
}

标签： reactjsgoogle-app-enginenext.jsyarnpkgfirebase-hosting

解决方案

next export在您的脚本区域中添加package.json

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

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

在初始化 firebase 使用out目录作为您的public.

推荐阅读