☰

nginx 代理传递仅适用于根位置

tag-icon • tag-icon nginx proxy
nginx 代理传递仅适用于根位置

我在 vps 内运行 Node js 应用程序。

这是我的 nginx 配置：

server {
    listen       80;
    server_name  xxx.xxx.xxx.xxx;
    #access_log   logs/ecommerce.access.log  main;
    
    location /ecommerce/api/ {
        proxy_pass      http://127.0.0.1:8000/api/;
    }
    
    location /ecapp/ {
        proxy_pass      http://127.0.0.1:3000/;
    }
}

localhost:8000/api是使用mongodb atlas的后端服务器。我已经通过使用邮递员和发送请求确认了这一点。

localhost:3000是前端应用程序。

前端应用程序只能通过我的 vps 的公共 IP 运行，如果：

server {
    listen       80;
    server_name  xxx.xxx.xxx.xxx;
    #access_log   logs/ecommerce.access.log  main;
    
    location /ecommerce/api/ {
        proxy_pass      http://127.0.0.1:8000/api/;
    }
    
    location / {
        proxy_pass      http://127.0.0.1:3000/;
    }
}

除了/喜欢的位置之外的其他位置/ecapp/都行不通。仅位置/作品。

http://my_vps_ip/我想通过类似以外的方式访问前端应用程序http://my_vps_ip/ecapp。

任何帮助表示赞赏。

答案1

我想通了，所以我在这里发布我的解决方案。

客观的

在 http://my_public_vps_addr:port/sub_path 托管 create-react-app 站点。

程序

  1. 在 .env 文件中： a) 设置 NODE_ENV=product b) 将 PUBLIC_URL 设置为 http://my_public_vps_addr:port/sub_path
  2. 设置基本名称：<Router basename=’/sub_path’></Router>
  3. npm run build a) 这会在 build/ 目录中生成静态文件。
  4. 将 build/* 内容复制到 /var/www/sub_path/html/sub_path/
  5. cd 到 /var/www/sub_path/html/ a) sudo find . -type d -exec chmod 755 {} \; b)sudo find . -type f -exec chmod 644 {} \;
  6. touch /etc/nginx/sites-available/sub_path a) ln -s /etc/nginx/sites-available/sub_path /etc/nginx/sites-enabled/sub_path
  7. /etc/nginx/sites-available/sub_path 的内容
    server {
      listen port;
      listen [::]:port;
      root /var/www/sub_path/html;
      index index.html index.htm index.nginx-debian.html;
      server_name my_public_vps_addr:port;
      location /sub_path {
        try_files $uri $uri/ /index.html =404
      }
    }
  1. 重新启动 nginx 服务： a) sudo systemctl restart nginx.service
  2. 您的网站应该可以从 http://my_public_vps_addr:port/sub_path 访问
  3. 就是这样！

答案2

将位置设置为 /ecapp/ 时，当我加载 http://my_vps_ip/ecapp 并检查控制台时，我得到：

GET http://my_public_vps_addr/static/js/bundle.js
GET http://my_public_vps_addr/static/js/0.chunk.js
GET http://my_public_vps_addr/static/js/main.chunk.js
Loading failed for the <script> with source “http://my_vps_public_ip/static/js/bundle.js”.
Loading failed for the <script> with source “http://my_vps_ip_public_ip/static/js/0.chunk.js”. ecapp:30:1
Loading failed for the <script> with source “http://my_vps_ip_public_ip/static/js/main.chunk.js”. ecapp:30:1

为什么要寻找静态文件？ /var/www/html/ 下没有静态目录。

电子商务项目的源代码在这里： https://github.com/kaloraat/react-node-ecommerce

相关内容