在Nginx中启用带有查询参数的React/Express Route

Question

制作一个缩短链接的网站。站点在我的本地主机生产环境中按预期工作，但在我部署的数字海洋Ubuntu Linux服务器上启用Nginx后，我似乎无法获得带有查询参数的快速get路由。

Node.js/Express GET route:

router.get("/:code", async (req, res) => {
try {
const url = await Url.findOne({ urlCode: req.params.code });
if (url) {
return res.redirect(url.longUrl);
} else {
return res.status(404).json("no url found");
}
} catch (error) {
console.error(error);
res.status(500).json("server error");
}
});

Nginx配置文件(etc/Nginx/sites-available/default)

server {
listen 80 default_server;
listen [::]:80 default_server;
root /var/www/html;

server_name myname.com www.myname.com;
location / {
proxy_pass http://localhost:3000/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_cache_bypass $http_upgrade;
}

如果我将本地主机端口更改为我的Express服务器(7777)，GET路由与URL查询参数(即:http://example.com/random8chars)一起工作，但React前端不加载。

根据当前配置(端口3000/React服务器)，一个Postman GET路由到"/:code"返回所需的结果，但是当我在Chrome浏览器的URL栏中输入转换后的链接时，它返回默认的splash页面。事实上，当我在Chrome浏览器中输入任何超出我的网站名称的扩展名时，它总是显示默认的splash页面。我知道这是Nginx的一个问题，但我似乎无法让它工作。

我一整天都在做这件事，但无济于事。发现多个堆栈溢出线程触及的主题，但没有任何工作。我尝试在Nginx配置文件中添加第二个位置路由，但无济于事。一个我尝试过的例子:

location /:code {
proxy_pass http://localhost:7777/:code;
}

请帮忙!我被困住了，感觉我离成功很近了。我将非常感谢任何解决这个问题的见解。谢谢你。

Answer 1

我刚刚添加了一个评论，但我还没有代表。所以在我看来，Nginx试图提供另一个文件，这并不存在。尝试添加:

location / {
try_files $uri /index.html;
}

这将使nginx总是尝试在正确的文件中忽略路径。

Answer 2

所以我终于解决了这个问题!我最初从错误的角度来看待这个问题。在我的开发环境中，我在我的react服务器上设置了一个代理，将任何未知请求反弹到我的express服务器。问题是，包中的代理设置。Json不能在生产环境中工作，这就是为什么我的链接缩短应用程序在开发中工作，但没有在生产中复制。

我是这样解决的:

我设置nginx指向我的express服务器@端口7777。我使用NPM构建命令将我的react应用程序导出到构建文件夹，然后设置我的express服务器来为构建文件夹服务。就是这样。当你访问网站的默认URL时，它会加载react构建文件夹，然后当我放入一个缩短的链接(GET/:code)时，它就像一个魅力。谢谢!