Deploy the uni-app front-end project (vue) to the local win system Nginx

 Ruoyi’s mobile project: Integrated the uview open source UI framework,

Configure the base path address of the backend request interface:

Package and reproduce under nginx:

After that you can happily use this port. As follows, use it to point to a new website project:

Configured site and api proxy on nginx 

It's ready to run. 

Install a stable version: nginx-1.24.0

Deployment configuration:

Added website: port 8083, the subdirectory of the website directory under nginx/html: newxss

Configure cross-domain forwarding /apixss,

If there are multiple backend servers, add cross-domain configuration such as /secondapi, and write them in the server{} object of port 8083.

 location /secondapi {                   # The real interface of the backend http://10086.whhkj.com/webapi                   proxy_pass http://10087.whhkj.com/webapi;

            }

nginx.conf

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

   
    }
     server {
        # 监听的端口号
        listen       8083;
        # 服务名称 生产环境要修改成 公网ip 如 47.105.134.120
        server_name  192.168.10.101;
        # 配置根目录的地址是以 nginx 下的 html 文件夹为根目录来查找的
        root html;
        # 配置默认的主页显示 比如 47.105.134.120:8080 显示的 index 页面
        location / {
            root html/newxss;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

         # 关键步骤，这里表示将所有的 http://192.168.7.8:8888/teamnote/api/ 开头的请求都转发到下面 proxy_pass 指定的链接中
            # http://192.168.10.101/xss/ 开头的请求都会转发到下面proxy_pass

            location /apixss {
                  # 后端的真实接口 http://10086.whhkj.com/webapi
                  proxy_pass http://10086.whhkj.com/webapi;

            }

          location /secondapi {
                  # 后端的真实接口 http://10086.whhkj.com/webapi
                  proxy_pass http://10087.whhkj.com/webapi;

            }
        }
  
}

Restart nginx: nginx -s reload, and you can access it normally.

If you encounter 404, the cross-domain path is not matched, and 405 means the path is matched, but the path is wrong.

Deploy to Alibaba Cloud nginx

Alibaba Cloud Linux's nginx configures uni-app's front-end project vue_Lan.W's blog-CSDN blog

---

Always 404, 405 exclude:

1. There are two nginx in the server, which may cause cross-domain failure.

2. After changing the configuration many times and copying some unsuitable configurations from the Internet, the interface and path are all correct and the results are 404 and 405. Then delete the entire nginx.conf, copy a clean one again, and then configure it again.