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

Posted 2023-03-07

【中文标题】在 Google App Engine 上部署 create-react-app-typescript

【英文标题】：Deploy create-react-app-typescript on Google App Engine

【发布时间】：2020-08-18 13:39:56

【问题描述】：

我正在尝试将使用 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

【问题讨论】：

你能分享你的 Dockerfile 吗？谢谢

您好，感谢您的回答。我没有使用 dockerfile 部署它。如教程中所述，我只使用 gcloud app run deploy 。我看到了另一种使用 Gcloud run 的方法，但我想知道为什么它不适用于 App Engine。

你能分享你的 package.json 文件吗？否则您能否分享您的应用程序文件的结构？谢谢

通过App Engine Flexible Official Documentation，你必须使用 gcloud app delpoy 命令，你能解释一下你为什么运行 gcloud app run deploy 命令吗？

对不起，我没有解释清楚。我说的是那个命令（gcloud app deploy）。我将在今天晚些时候更新 package.json 和结构。谢谢

【参考方案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 提出一些可能的解决方案。

【讨论】：

感谢您让我知道您解决了您的问题。如果您对此问题有任何其他问题，请告诉我。

我很好奇为什么默认的 Node 运行时会失败，但我稍后会深入检查。非常感谢！

您能否尝试关注此quickstart，如果您仍然看到 502 BAD Gateway 错误以缩小问题范围，请告诉我。

我试图在本地运行它，但它一直在加载，没有错误或任何东西，但“hello world”消息从未出现。 github.com/GoogleCloudPlatform/nodejs-docs-samples/issues/1757 教程似乎有问题（不过我在 Mac 上）。你在本地运行它有什么问题吗？

我能够在本地运行它，它在网络预览中显示为 hello world。在 Github 问题中，有一些解决方法，您是否遵循它们并且能够正确运行它？否则，您能否在本地和 App Engine 中运行时更新帖子的详细步骤？谢谢