在 Google App Engine 上部署 create-react-app-typescript

Question

我正在尝试将使用 CRA 和 Typescript 创建的应用程序部署到 Google Cloud App Engine 服务中，但是，由于某种原因，appspot 链接会一直加载直到出现 502 Bad Gateway（有时会出现错误，通常它只是一直在加载..)

我已经检查了几个教程和问题，但都没有成功。

• Deploy create-react-app on Google App Engine
• https://medium.com/tech-tajawal/deploying-react-app-to-google-app-engine-a6ea0d5af132

app.yaml 如下：

env: flex
runtime: nodejs
handlers:
  - url: /static/js/(.*)
    static_files: build/static/js/\1
    upload: build/static/js/(.*)
  - url: /static/css/(.*)
    static_files: build/static/css/\1
    upload: build/static/css/(.*)
  - url: /static/media/(.*)
    static_files: build/static/media/\1
    upload: build/static/media/(.*)
  - url: /(.*\.(json|ico))$
    static_files: build/\1
    upload: build/.*\.(json|ico)$
  - url: /
    static_files: build/index.html
    upload: build/index.html
  - url: /.*
    static_files: build/index.html
    upload: build/index.html
env_variables:
  REACT_APP_DEV_API_URL: "......"
  REACT_APP_MAP_API_KEY: "........"
# [END app_yaml]

Logs of the app engine（好像每次打开页面都会调用'npm run start'命令）

当然，我的应用程序在开发模式下运行良好，而且在deployment logs 中似乎也没有任何问题。 如果有人以前遇到过这个问题，请告诉我如何解决。提前致谢。

package.json:

{
 "name": "testing-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/google-map-react": "^1.1.5",
    "@types/jest": "^24.0.0",
    "@types/lodash": "^4.14.149",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "@types/react-helmet": "^5.0.15",
    "@types/react-router-dom": "^5.1.3",
    "@types/styled-components": "^5.0.0",
    "@types/swiper": "^5.2.1",
    "axios": "^0.19.2",
    "google-map-react": "^1.1.6",
    "lodash.differenceby": "^4.8.0",
    "lodash.throttle": "^4.1.1",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-circular-progressbar": "^2.0.3",
    "react-dom": "^16.12.0",
    "react-id-swiper": "^3.0.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.0",
    "semantic-ui-react": "^0.88.2",
    "styled-components": "^5.0.1",
    "swiper": "^5.3.6",
    "typescript": "~3.7.2"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.14.0",
    "@typescript-eslint/parser": "^2.14.0",
    "cross-env": "^6.0.3",
    "eslint": "^6.8.0",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-config-airbnb-base": "^14.0.0",
    "eslint-config-prettier": "^6.9.0",
    "eslint-config-react-app": "^5.1.0",
    "eslint-plugin-import": "^2.19.1",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-prettier": "^3.1.2",
    "eslint-plugin-react": "^7.17.0",
    "eslint-plugin-react-hooks": "^2.3.0",
    "gh-pages": "^2.2.0",
    "jest": "^24.9.0",
    "lint-staged": "^9.5.0",
    "pre-commit": "^1.2.2",
    "prettier": "^1.19.1"
  },
  "lint-staged": {
    "*.js": [
      "npm run lint:eslint:fix",
      "git add --force"
    ],
    "*.json": [
      "prettier --write",
      "git add --force"
    ]
  },
  "pre-commit": "lint:staged",
  "resolutions": {
    "serialize-javascript": "^2.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "build:clean": "rimraf ./build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint:staged": "lint-staged",
    "lint:eslint": "eslint --ignore-path .gitignore",
    "lint:eslint:fix": "eslint --ignore-path .gitignore --fix",
    "prettify": "prettier --write"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

项目结构是typical CRA with containers-components（忽略我在拍摄照片时使用 Gcloud 运行另一种方式测试的 nginx.conf 和 dockerfile）

编辑：添加项目结构和package.json

Answer 1

已解决（2020 年 5 月 18 日） 我改变了我的方法并选择了一个自定义运行时，它成功了。 如果以后有人遇到这个问题，这是我使用的配置。

在 App.yaml 中将运行时更改为自定义

<!-- language: lang-html -->
env: flex
runtime: custom

并包含一个带有 nginx.conf 的 Dockerfile 用于运行时管理

Dockerfile：

FROM node:8-alpine as react-build
WORKDIR /app
COPY . ./
RUN npm install
RUN npm run build

# server environment
FROM nginx:alpine
COPY nginx.conf /etc/nginx/conf.d/configfile.template
ENV PORT 8080
ENV HOST 0.0.0.0
RUN sh -c "envsubst '\$PORT'  < /etc/nginx/conf.d/configfile.template > /etc/nginx/conf.d/default.conf"
COPY --from=react-build /app/build /usr/share/nginx/html
EXPOSE 8080
CMD ["nginx", "-g", "daemon off;"]

nginx.conf

    server {
     listen       $PORT;
     server_name  localhost;

     location / {
         root   /usr/share/nginx/html;
         index  index.html index.htm;
         try_files $uri /index.html;
     }

     gzip on;
     gzip_vary on;
     gzip_min_length 10240;
     gzip_proxied expired no-cache no-store private auth;
     gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml;
     gzip_disable "MSIE [1-6]\.";

}

此配置出现在此处的其中一个教程中：https://cloud.google.com/community/tutorials/deploy-react-nginx-cloud-run

感谢@Nibrass H 提出一些可能的解决方案。