当我刷新页面时，我的网站没有加载同一页面

Question

我已经使用 docker 和 nginx 作为反向代理部署了多个 reactapps。

我的 Docker 文件与单独的 3 个 React 应用程序相同！！

FROM node:16-alpine
WORKDIR /app
COPY package.json ./
COPY package-lock.json ./
COPY ./ ./
RUN npm i
CMD ["npm", "run", "start"]

我的nginx.conf

server {
listen 80;
return 301 https://$host$request_uri;
}

server {

listen 443 ssl default_server;
listen [::]:443 ssl default_server;

add_header 'Cache-Control' "public, max-age=31536000";
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
add_header X-Frame-Options "SAMEORIGIN";
add_header X-XSS-Protection "1; mode=block";
add_header X-Content-Type-Options: "nosniff";

ssl_certificate /etc/nginx/conf.d/cert.crt;
ssl_certificate_key /etc/nginx/conf.d/ssl.key;

server_name <my-ip-address>;

location / {
proxy_pass http://172.17.0.5:3000;
#try_files $uri /index.html;
}

location /qae {
proxy_pass http://172.17.0.2:3001;
#try_files $uri /index.html;
}

location /qac {
proxy_pass http://172.17.0.4:3002;
#try_files $uri /index.html;
}
}

这段代码运行没问题，我的 reactapps 正在打开它，但是当我登录到我的网站并尝试重新加载我的页面时，它会重定向到 404 错误页面。

当我删除 try_files $uri /index.html; 的主题标签时 我收到 500 内部服务器错误。

需要解决方案：当我刷新 reactapp 时，它必须保持在同一页面上。

我为 3 个 reactapps 使用 3 个不同的图像，nginx 也是单独的图像，并为 3 个容器制作 proxy_pass。

Answer 1

在nginx下托管react文件应该就是将所有文件复制到文档根目录下即可。类似于（大致基于 this article）：

mkdir -p /var/www/my_site
cd /home/me/react1
npm run build
cp -r ./build/* /var/www/my_site/

mkdir -p /var/www/my_site/qae
cd /home/me/react2
npm run build
cp -r ./build/* /var/www/my_site/qae/

mkdir -p /var/www/my_site/qac
cd /home/me/react3
npm run build
cp -r ./build/* /var/www/my_site/qac/

然后在您的 nginx conf 中，您需要为每个子目录设置不同的 try_files 规则，以便每个子目录都使用正确的 index.html。（大致基于 this answer）：


root /var/www/my_site;

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

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

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

当我刷新页面时，我的网站没有加载同一页面

My website is not loading the same page when i refresh the page

nginx

url-rewriting

reactjs

react-native

nginx-reverse-proxy