0

I haven't been able to take the default bare-skin razzle-app (https://github.com/jaredpalmer/razzle) and make it work when I deploy it to Google App Engine. If anyone has experience deploying isomorphic react apps to GAE, then any inputs would be great.

After deployment, it serves the html from the server.js (it only serves the html text for the route but nothing else - no application nor any assets on the page). As a proof of concept, I was returning different html content for different routes, and it apparently works as the html text content as well as head tags were different. However, there are no static assets on the site (no images, css or js).

Build process output:

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

the build directory contains:

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

Notice that the build/static/js doesn't exist. It's inside build/public/static/js. Is it weird? On accessing the site (only html text from the server), I checked the head if the client bundle waas sent or not. Itis fetching from a wrong location.

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

My package.json looks like :

{
  "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"
  }
}

Note that GAE runs npm run start.

I'm currently using flex , standard never worked for me at all. app.yaml looks like:

env: flex
runtime: nodejs
service: web

Running locally :

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

I can access it at localhost:3000, not localhost:3001.

4

1 回答 1

0

使用自定义运行时在 App Engine 柔性环境中部署您的 Razzle 应用。它们是在 App Engine 上部署 razzle 应用程序问题的关键，这取决于process.env.PORT构建时间变量的默认值设置为 3000，为了使用 App Engine，您需要将应用程序的配置设置为侦听端口 8080，如上所述文档。_

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

假设您的 Google Cloud Platform 项目已准备好在App Engine 上部署应用程序，为了简单起见，您可以使用这个现有的 Dockerfile 来部署一个简单的 razzle 应用程序，具体步骤如下：

  1. 在您的 Google Cloud Platform 控制台上打开 Cloud Shell，设置您的项目配置gcloud config set project YOUR-PROJECT-NAME并运行export PROJECT_ID=YOUR-PROJECT-NAME以将 PROJECT_ID 环境变量设置为您的项目 ID。
  2. git clone https://github.com/Sach97/razzle-k8s.git
  3. cd razzle-k8s/web/src
  4. 修改 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 .（包括命令末尾的 . ）。
  2. 将镜像推送到 Container Registrydocker push gcr.io/${PROJECT_ID}/razzle:v1
  3. 在 razzle-k8s 目录下创建部署文件夹mkdir deploy
  4. 转到部署文件夹cd deploy并使用以下配置创建一个 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.
于 2019-11-01T09:10:52.230 回答