友情链接

阿里云CentOS8系统上安装Nginx服务器----Vue项目部署(一)阿里云CentOS8系统上部署前后端分离项目----Vue项目部署(二)

vue项目打包

编译工具:webstorm

终端中输入:npm run build

一台nginx 可以监听多个域名的443请求吗 nginx多端口监听_运维


打包成功,文件都生成在项目中dist下

一台nginx 可以监听多个域名的443请求吗 nginx多端口监听_centos_02

查看nginx的配置文件路径

sudo find / -name nginx.conf

一台nginx 可以监听多个域名的443请求吗 nginx多端口监听_vue.js_03

部署项目

将打包好的Vue项目的dist文件夹中的文件全部上传到服务器上。

路径位于上一步查到的nginx配置文件上一级中的html文件夹中。

在html文件夹中定义好项目的文件夹名字,将dist中的所有文件上传至其中就行。

一台nginx 可以监听多个域名的443请求吗 nginx多端口监听_阿里云_04

nginx配置文件修改

找到nginx.config修改其中的配置

一台nginx 可以监听多个域名的443请求吗 nginx多端口监听_vue.js_05


此时监听的是 http://localhost:8084

监听配置多个项目

如果需要监听多个端口项目的时候,只需在nginx.config文件中新增一个相应的server模块就行。

此时其他项目监听的是http://localhost:8088/api

一台nginx 可以监听多个域名的443请求吗 nginx多端口监听_centos_06

重启nginx

配置完成后,需要重启nginx才能更改成功。

/usr/local/webserver/nginx/sbin/nginx -s reload

放开端口

阿里云配置路径:云服务器ECS -> 安全组 -> 点击安全组名字进入详情页手动配置

一台nginx 可以监听多个域名的443请求吗 nginx多端口监听_运维_07

其他

nginx默认访问nginx/html文件夹中的index.html。如果仅需要配置一个项目的时候,只需将打包好的项目上传至此文件夹并替换为新的,再修改nginx.config配置文件中的端口号就行了,无需修改项目路径。

一台nginx 可以监听多个域名的443请求吗 nginx多端口监听_运维_08

注意事项

去除nginx代理前缀

nginx反向代理请求地址最后带‘/’时会将原监听地址的前缀去除,即http:localhost:8081/api/xx
的代理地址为http:localhost:8082/xx;
若反向代理请求地址最后不带‘/’则不会去除原来监听的前缀,即http:localhost:8081/api/xx
的代理地址为http:localhost:8082/api/xx。

server {
            listen       8081;
            server_name  localhost;
            location /api {
                  #加/会去除api前缀,但是后端security会拦截‘//’
                  proxy_pass   http://localhost:8082/; 
            }
        }

解决请求地址带’//'时后端Spring Security拦截问题

The request was rejected because the URL contained a potentially malicious String “//“

源码位置:StrictHttpFirewall.setAllowUrlEncodedDoubleSlash

一台nginx 可以监听多个域名的443请求吗 nginx多端口监听_阿里云_09

只需在相应配置中重新注入StrictHttpFirewall对象,就可以让它支持//的模式

/**
     * 配置地址栏不能识别 // 的情况
     * @return
     */
    @Bean
    public HttpFirewall allowUrlEncodedSlashHttpFirewall() {
        StrictHttpFirewall firewall = new StrictHttpFirewall();
        //此处可添加别的规则,目前只设置 允许双 //
        firewall.setAllowUrlEncodedDoubleSlash(true);
        return firewall;
    }

一台nginx 可以监听多个域名的443请求吗 nginx多端口监听_阿里云_10

前端vue请求路径统一添加前缀

在main.js文件中设置baseURL

import axios from "axios";
//设置全局前缀(window.open(url)时,url不会加此前缀)
axios.defaults.baseURL = '/api'

一台nginx 可以监听多个域名的443请求吗 nginx多端口监听_阿里云_11



注:能力有限,还请谅解,争取早日能够写出有质量的文章!

我是皮蛋布丁,一位爱吃皮蛋的热爱运动的废铁程序猿。