本文已参与[新人创作礼]活动，一起开启掘金创作之路。

nginx配置一个简单的前端文件

主要介绍了把打包好的Vue项目静态资源使用nginx代理部署到服务器上。

1.项目打包并上传至服务器

项目打包出现错误：

解决方法：运行npm install后再运行npm run build。

将打包后的文件压缩为.zip的包，上传至服务器。将静态资源包放在自己指定的目录，这里在home目录下创建了test文件夹，前端资源包就放在这里面。

安装解压zip的依赖：

yum -y install zip unzip

解压：unzip dist.zip

2.修改nginx配置文件

进入nginx安装目录的conf目录，修改nginx.conf文件。

配置nginx.conf文件（这里只是简单的配置）：

...
 server {
        listen       8080; #监听的端口
        server_name  XX.XX.XX.XX;  #所在域名即nginx所在服务器ip

        location / {
            root   /home/test/dist; #上传的前端项目文件所在位置
            try_files $uri $uri/ /index.html   #解决post请求出现404问题
            index  index.html index.htm;
        }
        
        error_page 500 502 503 504 /50x.html;

        location = /50x.html{
                root html;
        }
    }
...

重新加载nginx

systemctl reload nginx

3.访问

访问：域名加端口。

http://ip:port

405问题解决

页面访问成功，但访问接口出现出现405问题。

解决：

...
location / {
            root   /home/test/dist; #上传的前端项目文件所在位置
            try_files $uri $uri/ /index.html   # 解决post请求出现404问题
            index  index.html index.htm;
            # 解决post请求出现405问题，增加下面配置信息 
            error_page 405 =200  $request_uri;
        }
...

出现：We're sorry but hello-vue doesn't work properly without JavaScript enabled. Please enable it to continue.的问题。

原因：nginx配置异常，没有正确配置后端服务代理地址。

解决方法1：将路由的模式改为hash模式。

在nginx中配置转发访问后端的具体地址。

解决方法2：修改nginx。

...
location / {
            root   /opt/dist;
            try_files $uri $uri/ /index.html
            index  index.html index.htm;
            error_page 405 =200 http://$host$request_uri;
        }
...
# ip 是后端项目发布的服务器的ip。
# port 是后端允许访问的端口。
# api 是前端使用的请求后端的时候的baseURL。
location ^~ /api/ {
    proxy_pass http://ip:port/;
}

即下面文件里面的baseURL。

如果没有baseURL即：

baseURL: '/'

可以查看vue.config.js接口代理的配置：

如：

...
devServer: {
    // 服务代理
    proxy: {
        '/{{contextPath}}': {
            target: '{{ url }}',
            ws: true,
            changeOrigin: true
        },
        '/abc/def/': {
            target: 'http://xx.xx.xx.xx:xxxx/',
            ws: true,
            changeOrigin: true
        }
    }
}
...

可以知道接口 xx.xx.xx.xx:xxxx/ 共有的前缀为/abc/def/，所以在nginx中需要在location中配置转发访问后端的具体地址（xx.xx.xx.xx:xxxx/）

server {
    listen       8080; #监听的端口
    server_name  XX.XX.XX.XX;  #所在域名即nginx所在服务器ip

    location / {
        root   /home/test/dist; #上传的前端项目文件所在位置
        try_files $uri $uri/ /index.html   # 解决post请求出现404问题
        index  index.html index.htm;
    }
    
    # 配置转发访问后端的地址
    location /abc/ {
        proxy_pass http://ip:port;
    }
    
    error_page 500 502 503 504 /50x.html;

    location = /50x.html{
            root html;
    }
}

注意，每次修改完nginx配置文件，都要重新加载。

proxy_pass后面的url加/和不加/的区别

这里简单介绍一下proxy_pass后面的url加/和不加/的区别：

1.加/，表示绝对根路径。

2.不加/，表示相对路径，把匹配的路径部分也带走。

如访问 http://192.168.1.1:8080/test/index.html 地址

不加/

location /test/ {
        proxy_pass http://192.168.1.2:9000;
}

则把匹配的路径也带走，这时代理的url为：http://192.168.1.2:9000/test/index.html

加/

location /test/ {
        proxy_pass http://192.168.1.2:9000/;
}

这时代理的url为：http://192.168.1.2:9000/index.html

location /test/ {
        proxy_pass http://192.168.1.2:9000/abc/;
}

这时代理的url为：http://192.168.1.2:9000/abc/index.html

location /test/ {
        proxy_pass http://192.168.1.2:9000/abc;
}

这时代理的url为：http://192.168.1.2:9000/abcindex.html

Nginx解析location/后面的字符串

Nginx解析location/后面的字符串，配置不同的字符串，从而匹配不同的URL进行反向代理。

worker_processes  1;  
  
  
events {  
    worker_connections  1024;  
}  
  
  
http {  
    include       mime.types;  
    default_type  application/octet-stream;  
  
    sendfile        on;  
  
    keepalive_timeout  65;  
  
    server {  
        listen       8080;  
        server_name  localhost;  
        location / {  
            root   html;  
            index  index.html index.htm;  
        }  
        location /abcd {  
            proxy_pass http://192.168.1.1:8081;  
            proxy_set_header   Host    $host;  
            proxy_set_header   X-Real-IP   $remote_addr;   
            proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;  
        }  
        location /efgh {  
            proxy_pass http://192.168.1.1:8082;  
            proxy_set_header   Host    $host;  
            proxy_set_header   X-Real-IP   $remote_addr;   
            proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;  
        }  
        location /ijkl {  
            proxy_pass http://192.168.1.2:8081;  
            proxy_set_header   Host    $host;  
            proxy_set_header   X-Real-IP   $remote_addr;   
            proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;  
        }  
        location /mnop {  
            proxy_pass http://192.168.1.2:8082;  
            proxy_set_header   Host    $host;  
            proxy_set_header   X-Real-IP   $remote_addr;   
            proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;  
        }  
        error_page   500 502 503 504  /50x.html;  
        location = /50x.html {  
            root   html;  
        }  
    }  
}