记录一次SpringBoot + Vue前后分离项目的部署流程

前言

本教程使用黑马 SpringBoot3+Vue3全套视频教程 大事件项目作为前后端代码。

前置需要：

• mysql
• jdk
• redis
• nginx
• linux环境

打包

前端

构建项目命令

npm run build

会在项目根路径下生成dist文件夹，这里存放了我们打包好的前端代码。可以使用zip进行全部的压缩等下好上传到服务器上。

后端

使用maven把项目打成jar包，可以在配置文件中把需要的端口改成需要的，我是默认的8080

环境准备

mysql,redis，nginx不再多言。

代码上传到指定路径下

结构如下：

nginx配置

/etc/nginx/conf.d/default.conf

    listen       80;
    server_name  localhost;

    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root /data/big-event/front-end;
        index index.html;
        try_files $uri $uri/ /index.html;

    }

    # 后端API代理配置
    location /api/ {
        proxy_pass http://localhost:8080/; # SpringBoot应用的地址和端口
    }

• location /: 配置前端项目的代码位置

• location /api/: 配置后端项目地址和端口

启动测试

nginx:

# 启动nginx
nginx
# 修改配置的话可以重启
nginx -s reload

后端java

cd /data/big-event/back-end
nohup java -jar big-event-0.0.1-SNAPSHOT.jar &

没问题的话就可以访问服务器的地址 http://地址:端口 测试了。