如何在 IBM bluemix Cloud Foundry 上设置 nginx.conf 以进行单页应用程序路由以及如何设置 url 重写以支持 spa 路由？

Question

我正在为我的应用程序使用 React 单页应用程序。我使用 Cloud Foundry 在 IBM Bluemix 上托管了解决方案。我需要 2 个帮助。

1. 如何用新配置覆盖现有的 nginx 配置以支持我的反应路由的 URL 重写？

2. nginx 服务器的 url 重写配置是什么？ （我是第一次使用 nginx）

这是我用来托管在 Cloud Foundry 上的 manifest.yml。我正在为 node.js 使用 staticfile-buildpack。

applications:
- buildpack: https://github.com/cloudfoundry/staticfile-buildpack.git
  name: xyz
  memory: 128M
  stack: cflinuxfs2
  path: build/
  routes:
  - route: xyz.eu-gb.mybluemix.net/
  - route: xyz.eu-gb.mybluemix.net/store
  - route: xyz.eu-gb.mybluemix.net/checkout

这里 xyz 是我的应用程序域。我可以加载我的应用程序并通过点击操作传递到其他路由，但是当我从浏览器地址栏中硬刷新或更改 url 时，它会显示 404 错误。

有人可以在这里指导我解决上述问题吗？

谢谢。

Answer 1

1. 如何用新配置覆盖现有的 nginx 配置以支持我的 react 路由的 URL 重写？

您可以覆盖 nginx.conf，但不建议使用静态文件 buildpack。相反，请尝试使用 buildpack 提供的配置选项来实现您的目标。 buildpack 有很多常用的选项，所以你不需要下拉到自己配置 Nginx 的级别。

https://docs.cloudfoundry.org/buildpacks/staticfile/index.html#config-options

这里 xyz 是我的应用程序域。我能够加载我的应用程序并通过点击操作传递给其他路由，但是当我从浏览器地址栏中硬刷新或更改 url 时，它会显示 404 错误。

听起来您需要启用pushstate 支持。将pushstate: enabled 添加到您的Staticfile 我认为这应该可以解决您的问题。

1. nginx 服务器的 url 重写配置是什么？ （我是第一次使用 nginx）

您可以查看为您的应用生成的 Nginx 配置。推送应用程序并启动后，运行cf ssh <app-name> -c "cat app/nginx/conf/nginx.conf"。那应该将 nginx 配置转储到您的屏幕上。

构建包：https://github.com/cloudfoundry/staticfile-buildpack.git

不要指向 any buildpack 的 master 分支。这是一个移动的目标。提交到提交可以改变甚至中断。

您通常应该使用您的运营商提供的 buildpack。如果你运行cf buildpacks，你可以在那里看到列表。如果这还不够新，或者您的提供商没有包含您需要的 buildpack，您可以使用 git repo 语法链接到在线仓库，但请确保在您的 URL 中包含 #<branch|tag>。

例如：https://github.com/cloudfoundry/staticfile-buildpack.git#v1.4.29

这会将 buildpack 锁定到一个带标签的版本，从而防止它从您下面更改。