Reactjs 如何将NGINX配置为在同一个框中提供JSON API和React.js

我一直在使用phoenix框架编写用Elixir编写的JSON API，昨天我成功部署了它。但是，如果没有web前端（我也使用React.js编写了web前端），API就没有那么大用处

我正在使用蒸馏厂和gatling的组合部署phoenix API，当我使用Postman测试它时，一切似乎都正常工作

然后我将nginx配置文件编辑为look，如下所示

/etc/nginx/sites available/kegcopr\u api

server {
  listen 80;
  server_name kegcopr.chrisrjones.com;
  root /opt/Code/react/kegcopr-frontend/build;
  index index.html index.htm;

  access_log /home/deploy/deployments/kegcopr_api/nginx.access.log;
  error_log /home/deploy/deployments/kegcopr_api/nginx.error.log;

  location / {
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_redirect off;
    proxy_pass http://localhost:33725;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
  }

}

然后，我在React.js项目的根目录中创建了一个

.env

文件，如下所示：

REACT_APP_API_URL=http://localhost:33725/api

任何关于如何配置此配置的帮助都将不胜感激

更新 我将

.env

文件更改为

REACT_APP_API_URL=http://kegcopr.chrisrjones.com/api

然后运行下面的命令

npm run build

---

但是我仍然没有看到React.js前端显示在浏览器中。

您已经设置了

根目录，但是您正在无条件地将所有请求发送到
本地主机：33725
。如果您想从
根目录提供静态文件，并将所有其他请求传递给
代理\u pass
，您可以像这样使用
try\u files
：

location / {
  try_files $uri @proxy;
}

location @proxy {
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  proxy_set_header Host $http_host;
  proxy_redirect off;
  proxy_pass http://localhost:33725;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection "upgrade";
}

try_files
将尝试在
根目录下找到与URL同名的文件，如果找不到文件，它将把请求传递给
@proxy
，后者将把请求传递给运行在
localhost:33725
上的Phoenix应用程序，这到底是什么问题？另外，不应该
REACT\u APP\u API\u URL
http://kegcopr.chrisrjones.com/api
假设这个nginx配置代理在端口33725上运行的Phoenix？@Dogbert感谢您指出这一点。到目前为止，React.js前端没有显示在浏览器中。您能试试这个吗：？我使用类似的方法来使用nginx服务静态文件，并将其他请求代理到Phoenix。@Dogbert尝试了您提供的要点，仍然看到
页面未找到
@Dogbert似乎您的解决方案正在工作。可能与浏览器缓存有关。谢谢你的帮助。