一看就懂！Linux服务器部署Springboot+VUE前后端分离式项目

  前后端分离是目前的大趋势了。以前往往是前端打包页面后交给后台放入静态资源文件夹下进行部署，这样子做其实是一个不太聪明的行为。这里就不展开说了。

首先是环境：

后台基于：Springboot2.1.3，Maven3.3.6。

后台服务器：Tomcat

前端基于：Vue2，@vue/cli 4.x

前端服务器：nginx （自行安装）

部署后台项目：

往这戳，部署Springboot项目

 

部署前端项目：

1.vue.config.js

@vue/cli 4.x需要自己手动新建在根目录下即可。

module.exports = {
    //.. 其他省略
    // 设置publicPath
    publicPath: './',
}

2.打包

npm run build

3.打包完后出现dist文件夹。

4.修改dist文件夹下的index.html

将所有的路径前添加 ./ 注意是全部！以下只是示例。

原index.html文件路径前缀是没有./的

添加上./

5.将dist上传到服务器指定文件夹下。

6.新建/etc/nginx/conf.d/项目名.conf

vim /etc/nginx/conf.d/项目名.conf

server {
    listen       80; 
    server_name  xxx.xxx.xxx.xxx; #(ip或者域名)
    # 注意 listen 和 servername 不要覆盖你其他重要项目~
    # 如果条件允许使用域名最好了，就不会出现端口冲突

    location / {
        root /usr/local/project/test/dist; # 项目路径
        index index.html;
    }
    location /code{
    	proxy_pass http://localhost:9090/test/; # 后台代码的路径 对应vue.config.js里的target
    }
}

nginx -t #查看配置文件是否正确
nginx -s reload # nginx重新加载配置文件

接着访问打开浏览器访问 ip:80即可访问前端页面。

 

此外：nginx配置SSL简直不要太简单

1.下载证书，放到 /etc/nginx/cert文件夹下

2.修改配置文件

server {
    listen 443 ssl;
    server_name shiro.itaem.top; # 你的域名
    root /myProject/shirodemo/dist;
    index index.html;
 
    ssl_certificate  cert/test.itaem.top.pem;   # 改成你的证书的名字
    ssl_certificate_key cert/test.itaem.top.key; # 你的证书的名字
    ssl_session_timeout 5m;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;
    location / {
        root /usr/local/project/test/dist; # 项目路径
        index index.html;
    }
    location /shiro {
        proxy_pass http://127.0.0.1:9090/test/;
    }

}
server {
    listen 80;
    server_name test.itaem.top; # 你的域名
    rewrite ^(.*)$ https://$host$1 permanent; #把http的域名请求转成https
}

3.重新加载配置文件即可

ps：可以只配置前端代码的SSL，不配置后台的SSL一样可以使用。

 

---

有什么问题可以评论或者私信我，每日在线解（LIAO）疑（SAO）。

我是大誌，一位准备996的卑微码农，觉得好用记得点赞收藏！！！