Google App Engine - Razzle同构react应用服务问题，没有客户端捆绑包或资产

Question

当我将默认的裸皮razzle-app (https://github.com/jaredpalmer/razzle)部署到Google App Engine时，我无法使其正常工作。如果有人有将同构的react应用部署到GAE的经验，那么任何输入都会很棒。

部署后，它从server.js提供html (它只提供路由的html文本，而不提供其他内容-没有应用程序或页面上的任何资源)。作为概念的证明，我为不同的路径返回了不同的html内容，它显然是因为html文本内容和head标签是不同的。但是，网站上没有静态资源(没有图片、css或js)。

构建过程输出：

razzle build

Creating an optimized production build...
Compiling client...
Compiled client successfully.
Compiling server...
Compiled server successfully.
Compiled successfully.

File sizes after gzip:

  48.22 KB  build/static/js/bundle.c798792d.js
  333 B     build/static/css/bundle.659481d8.css

build目录包含：

> build
      > public 
            > static
                   > css
                   > js
                   > media
            > favicon and robots
     > static
            > media (same one as public/staic)
     > assets.json
     > server.js

请注意，build/static/js并不存在。它在build/public/static/js内部。是不是很奇怪？在访问站点(只有来自服务器的html文本)时，我检查了头部是否发送了客户端包。正在从错误的位置获取。

<script src="http://localhost:8081/static/js/bundle.js" defer="" crossorigin=""></script>

我的package.json看起来像这样：

{
  "name": "my-razzle-app",
  "version": "0.1.0",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/server.js"
  },
  "dependencies": {standard
    "express": "^4.17.1",
    "razzle": "^3.0.0",
    "react": "^16.11.0",
    "react-dom": "^16.11.0",
    "react-router-dom": "^5.1.2"
  }
}

请注意，GAE运行npm run start。

我目前使用的是flex，标准版对我来说根本不起作用。app.yaml看起来像这样：

env: flex
runtime: nodejs
service: web

在本地运行：

razzle start

 WAIT  Compiling...


✔ Client
  Compiled successfully in 2.14s

✔ Server
  Compiled successfully in 153.86ms

ℹ ｢wds｣: Project is running at http://localhost:3001/
ℹ ｢wds｣: webpack output is served from undefined
ℹ ｢wds｣: Content not from webpack is served from /home/anz/Cogi/timecloud-client/my-app
ℹ ｢wds｣: 404s will fallback to /index.html
✅  Server-side HMR Enabled!
 started

我可以通过localhost:3000访问它，而不是localhost:3001。

Answer 1

使用custom runtime在app Engine灵活的环境中部署您的Razzle应用程序。问题的关键在于process.env.PORT构建时间变量的默认值设置为3000，为了使用App Engine，您需要按照documentation上的说明将应用程序配置为侦听端口8080。

部署过程包括创建Dockerfile，确保您的应用程序的index.js侦听端口8080，构建docker镜像，将镜像推送到Container Registry，为自定义运行时创建app.yaml，最后将应用程序部署到app Engine。

在您的Google Cloud Platform控制台上，打开Cloud

• ，使用gcloud config set project YOUR-PROJECT-NAME设置您的项目配置，并运行export PROJECT_ID=YOUR-PROJECT-NAME将PROJECT_ID环境变量设置为您的项目ID.

• git clone https://github.com/Sach97/razzle-k8s.git

• cd razzle-k8s/web/src

• Modify index.js文件，以确保服务器侦听8080端口。将代码const port = process.env.PORT || 3000;的这一部分更改为const port = 8080或仅硬编码8080值：

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(8080, function(err) {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });

1. 返回到razzle-k8s/web文件夹，并使用docker build docker build -t gcr.io/${PROJECT_ID}/razzle:v1 . (.在命令的末尾，将镜像included).
2. Push到容器注册表docker push gcr.io/${PROJECT_ID}/razzle:v1
3. Create中的部署文件夹mkdir deploy
4. Go到部署文件夹cd deploy，并使用以下configuration.

创建一个app.yaml

runtime: custom
env: flex
service: razzle

1. 运行gcloud app deploy --image-url gcr.io/${PROJECT_ID}/razzle:v1以使用自定义运行时部署您的应用程序，键入(Y)表示是以使用您的razzle映像部署您的应用程序。
2. 要查看您的应用程序，只需键入gcloud app browse -s razzle并转到URL。它的格式应该是https://razzle-dot-your-project-name.appspot.com.