前后端项目外网打包方式

前后端项目部署内部IP（例如：192.168.30.003，以下简称：003）无法使用，必须使用外部网络IP（例如：192.168.30.001，以下简称：001）部署，步骤:

1、前端项目打包时的IP为外部网络，端口为nginx端口（例如：8000）

2、后端项目打包端口为自己本身端口（例如：8080），与nginx无关

3、nginx配置：

1）前端

① 端口（8000）

② server_name 中必须填写外网IP（001）

③ location中配置前端项目路径

location /{
    # 前端项目路径
    root   /var/webStaticService/userServer/Website_PC/;
    index  index.html index.htm;
    # 访问报405问题时，需要的配置
    error_page 405 = 200  $request_uri;
}

2）后端

① 端口（8001）

② server_name 中必须填写外网IP（001）

③ location中配置跳转后端路径

location ^~ /api/ {
    #Proxy Settings
    proxy_redirect     off;
    proxy_set_header   Host             $host;
    proxy_set_header   X-Real-IP        $remote_addr;
    proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
    proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
    proxy_max_temp_file_size 0;
    proxy_connect_timeout      90;
    proxy_send_timeout         90;
    proxy_read_timeout         90;
    proxy_buffer_size          4k;
    proxy_buffers              4 32k;
    proxy_busy_buffers_size    64k;
    proxy_temp_file_write_size 64k;
    rewrite ^/api/(.*)$ /$1 break;
    # http后面的路径与 ④ 中的upstream名一致
    proxy_pass  http://user_server;
}

④ 在http中配置后端项目的实际访问路径

upstream user_server  {
    # 此端口与后端项目打包时的端口一致，IP为内部网络IP（003）
    server 127.0.0.1:8080; #api gateway
}

注意事项

1、前端页面访问报405，需要在前端的server（端口：8000）location中写以下配置

error_page 405 =200  $request_uri;

2、前端访问后端IP和端口配置正确以后还是访问不通，是因为在后端server（端口：8001）中的location没有配置根据路径中的关键字跳转到相应路径的配置

例如前端项目访问后端路径为：http://192.168.30.001:8001/api/login

IP：外网IP

8001端口：nginx配置端口

/api/：nginx监听关键字，此关键字与后端server（端口8001）中的location监听路径保持一致（location ^~ /api/），api前面的^~不能省略

3、上传文件报413是因为文件太大，需要在nginx中设置文件上传的最大大小，在http中写以下配置

client_max_body_size 20M;

4、上传的文件访问不了：可以在nginx设置访问权限，在http之外，文件的最上方设置

user  root;

以下为配置全文

# 配置
user  root;
worker_processes  1;
events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    # 配置
    client_max_body_size 20M;
    
    upstream user_server  {
        server 127.0.0.1:8080; #api gateway
    }
    
    server {
        listen        8000;
        server_name  192.168.30.001  localhost;

        location /{
            root   /var/webStaticService/userServer/Website_PC/;
            index  index.html index.htm;
            # 配置
            error_page 405 =200  $request_uri;
        }
        
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
    
    server {
        listen       8001;
        server_name  192.168.30.001  localhost;

        location / {
            root   html;
            index  index.html index.htm;
        }
    location ^~ /api/ {
           #Proxy Settings
           proxy_redirect     off;
           proxy_set_header   Host             $host;
           proxy_set_header   X-Real-IP        $remote_addr;
           proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
           proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
           proxy_max_temp_file_size 0;
           proxy_connect_timeout      90;
           proxy_send_timeout         90;
           proxy_read_timeout         90;
           proxy_buffer_size          4k;
           proxy_buffers              4 32k;
           proxy_busy_buffers_size    64k;
           proxy_temp_file_write_size 64k;
           rewrite ^/api/(.*)$ /$1 break;
           proxy_pass  http://user_server;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}