Nginx + Vue + Flask 部署遇到的坑

Nginx + Vue + Flask 部署遇到的坑

1. 正常配置文件部署

正常情况下，在nginx.conf中加入需要的监听端口、ip、后端服务，就能部署成功（注意dist文件夹路径问题）

server {
#端口
listen 9900;
server_name “服务器IP”;
location / {
root “C:\web\dist”; # dist文件路径
index index.html;
try_files $uri KaTeX parse error: Expected 'EOF', got '}' at position 17: …ri/ @router; }̲ location @ro… /index.html last;
}
location /api {
rewrite ^/api/(.*)$ /$1 break;
proxy_pass http://127.0.0.1:5000; # 后端请求端口
}
location /socket {
proxy_pass http://127.0.0.1:5001; #websocket地址
proxy_http_version 1.1;
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_read_timeout 120s;
proxy_set_header Upgrade websocket;
proxy_set_header Connection Upgrade;
}

}

2. 405问题

经过与前端对接，发现前端使用的代理字符串为/lims，结果配置文件为/api，更改为/lims成功

server {
#端口
listen 9900;
server_name “服务器IP”;
location / {
root “C:\web\dist”; # dist文件路径
index index.html;
try_files $uri KaTeX parse error: Expected 'EOF', got '}' at position 17: …ri/ @router; }̲ location @ro… /index.html last;
}
location /lims {
rewrite ^/lims/(.*)$ /$1 break;
proxy_pass http://127.0.0.1:5000; # 后端请求端口
}
location /socket {
proxy_pass http://127.0.0.1:5001; #websocket地址
proxy_http_version 1.1;
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_read_timeout 120s;
proxy_set_header Upgrade websocket;
proxy_set_header Connection Upgrade;
}

}

3. 502问题

端口配置出错，前端请求后端的端口，需配置一致

server {
#端口
listen 9900;
server_name “服务器IP”;
location / {
root “C:\web\dist”; # dist文件路径
index index.html;
try_files $uri KaTeX parse error: Expected 'EOF', got '}' at position 17: …ri/ @router; }̲ location @ro… /index.html last;
}
location /lims {
rewrite ^/lims/(.*)$ /$1 break;
proxy_pass http://127.0.0.1:5000; # 后端请求端口
}
location /socket {
proxy_pass http://127.0.0.1:5001; #websocket地址
proxy_http_version 1.1;
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_read_timeout 120s;
proxy_set_header Upgrade websocket;
proxy_set_header Connection Upgrade;
}

}

4. 500问题

部署完成以后在浏览器访问时，直接报500错误，检查后发现是dist配置文件路径出错。

5. 多个项目同时部署

server {
#端口
listen 9900;
server_name “服务器IP”;
location / {
root C:\server\LIMS\web\dist;
index index.html;
try_files $uri KaTeX parse error: Expected 'EOF', got '}' at position 17: …ri/ @router; }̲ location @ro… /index.html last;
}
location /api {
rewrite ^/api/(.)$ /$1 break;
proxy_pass http://127.0.0.1:5000;
}
location /socket {
proxy_pass http://127.0.0.1:5002; #websocket地址
proxy_http_version 1.1;
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_read_timeout 120s;
proxy_set_header Upgrade websocket;
proxy_set_header Connection Upgrade;
}
}
server {
#端口
listen 9800;
server_name “服务器IP”;
location / {
root C:\server\LIMS\weblims\dist;
index index.html;
try_files $uri KaTeX parse error: Expected 'EOF', got '}' at position 17: …ri/ @router; }̲ location @ro… /index.html last;
}
location /lims {
rewrite ^/lims/(.)$ /$1 break;
proxy_pass http://127.0.0.1:10002;
}
}
server {
#端口
listen 9700;
server_name “服务器IP”;
location / {
root C:\server\LIMS\webqs\dist;
index index.html;
try_files $uri KaTeX parse error: Expected 'EOF', got '}' at position 17: …ri/ @router; }̲ location @ro… /index.html last;
}
location /lims {
rewrite ^/lims/(.*)$ /$1 break;
proxy_pass http://127.0.0.1:10002;
}
}