使用Nginx如何部署两个不同的项目

nginx目录简介

1、安装好后的目录结构

2、conf文件目录结构

我们打开nginx.conf文件，找到配置两个项目端口的地方：

 server {
            listen       8081;
            server_name  10.174.0.22;

            location / {
                root   html;--此处是需要创建的文件，端口是8081的文件，后续打包的项目也要放到这个文件里（复制时将此注释删掉）
                index  index.html index.htm;
            }

            location /prod-api/ {
                proxy_pass  http://10.174.0.22:8089;--后端连接的服务器和端口（赋值时将本注释删掉）
                proxy_set_header  Host $http_host;
                proxy_set_header  X-real-ip $remote_addr;
                proxy_set_header  REMOTE-HOST $remote_addr;
                proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
            }
         }

    server {
        listen       8080;
        server_name  10.174.0.22;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   mos_html;--此处是需要创建的文件，此文件是8080端口的文件，后续打包的项目也要放到这个文件里（复制时将此注释删掉）
            index  index.html index.htm;
        }

        location ^~/api/ {
            rewrite ^/api/(.*)$/$1 break;
            proxy_pass  http://10.174.0.22:8088;
            proxy_set_header  Host $http_host;
            proxy_set_header  X-real-ip $remote_addr;
            proxy_set_header  REMOTE-HOST $remote_addr;
            proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
        }

想必细心的小伙伴可以观察到这两处不一样，
第一个图是我后端使用axios跨域时没有/api前缀

对应的第二个图就是我厚度按请求的携带/api

例如后端代码：

效果

最后重启 nginx，然后访问链接就可以咯