在 Heroku 上部署 React 应用程序和 Nginx 时出现问题

Posted 2023-03-14

【中文标题】在 Heroku 上部署 React 应用程序和 Nginx 时出现问题

【英文标题】：Issue with React app and Nginx when deployed on Heroku

【发布时间】：2019-03-14 18:01:04

【问题描述】：

我有一个使用“create-react-app”创建的 React 应用程序，并使用“heroku create --buildpack https://github.com/mars/create-react-app-buildpack.git”设置 Heroku 部署。通过 Travis CI 进行的初始部署和后续部署都是成功的。然而，从昨天开始，虽然应用在构建成功后仍在部署中，但无法打开，Heroku 日志显示：

2018-10-09T20:14:16.000000+00:00 app[api]: 构建成功2018-10-09T20:14:19.093204+00:00 heroku [web.1]: 使用命令 bin/boot2018-10-09T20:14:21.599174+00:00 app[web.1]: 启动进程进入 /app/build/static/js/1.65a45b50.chunk.js（来自 .profile.d/inject_react_app_env.sh）2018-10-09T20:14:22.010832+00:00 app[web. 1]： 将运行时 env 注入 /app/build/static/js/main.b9301262.chunk.js（来自 .profile.d/inject_react_app_env.sh）2018-10-09T20： 14:22.212043+00:00 app[web.1]: 将运行时环境注入 /app/build/static/js/runtime~main.229c360f.js（来自 .profile.d/inject_react_app_env.sh）2018-10-09T20:14:22.748085+00:00 app[web.1]: 开始日志重定向...2018-10-09T20:14:22.748475 +00:00 app[web.1]: 正在启动 nginx...2018-10-09T20:14:22.846806+00:00 app[web.1]:进程意外退出：nginx2018-10-09T20:14:22.847047+00:00 app[web.1]: 向下，终止子进程...2018-10-09T20: 14:22.845551+00:00 app[web.1]: nginx：[emerg] ./config/nginx.conf:76 中“set”指令中的参数数量无效2018- 10-09T20:14:22.949293+00:00 heroku[web.1]: 状态从开始变为崩溃2018-10-09T20:14:22.950957+00:00 heroku[web .1]: 状态从 crashed 更改为 starting2018-10-09T20:14:22.935763+00:00 heroku[web.1]: 进程退出，状态为 1

我看不到“set”指令所指的内容以及我应该如何配置它。据我了解，配置 Nginx 服务器行为的方法是通过 static.json 文件（https://github.com/heroku/heroku-buildpack-static#configuration），但我可能错了。到目前为止，它是这样配置的：

    "root": "build/",
    "routes": 
      "/**": "index.html"
    ,
    "proxies": 
        "/api/": 
            "origin": "$PORT"
        
    

我还添加了一个 app.json，如此处所示https://github.com/mars/create-react-app-buildpack#user-content-commit--deploy-%EF%B8%8F：

    "buildpacks": [
        
        "url": "mars/create-react-app"
        
    ]

我使用的 buildpack 配置了 dyno this way，所以我不需要 Procfile

我进行了大量研究，但找不到任何可以解决此问题的方法。任何帮助深表感谢！ 谢谢！

【参考方案1】：

我从我的 static.json 文件中删除了代理，它解决了这个问题。我所指的 PORT 是不必要的，因为我已经在后端设置了 CORS。