前后端分离项目在云服务器上的部署(Spring Boot + Vue)

1.服务器的环境准备

(1)redis

(2)nginx

2.前端项目部署

1.服务器的环境准备

(1)redis

在云服务器上配置redis环境(OpenCloudOS)-CSDN博客

(2)nginx

在官网下载好压缩包上传到服务器当中：

解压后会出现第二个文件夹ngnix-1.23.3

输入

复制代码

./configure

这样就算完成了

然后编译安装nginx：

复制代码

make&&make install

运行完这行命令之后，会在/usr/local/目录产生一个nginx文件夹

进入nginx文件夹之后如图：

进入nginx的/sbin目录下运行：

复制代码

./nginx

通过ip地址+端口号(默认80)的方式访问：

出现这个页面说明运行成功了

2.前端项目部署

(1)打包前端项目

修改vue.config.js当中的url：按照自己的ip和后端的springboot端口修改

在vscode中运行命令：

复制代码

npm run build:prod

运行成功之后会在项目文件夹目录里面生成打包好的文件夹dist

在云服务器中创建目录：/usr/local/src/myLibrary/

把打包好的dist文件夹放到里面

(2)修改nginx的配置文件

按照部署需要修改配置文件：

复制代码

worker_processes  1;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  106.55.104.210;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        # 前端静态文件
        location / {
            root   /usr/local/src/myLibrary/dist;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;  # 解决 Vue 路由问题
        }

        # 后端 API 代理 - 将 /prod-api/ 转发到 Spring Boot
        location /prod-api/ {
            proxy_pass http://127.0.0.1:8282/;  # 转发到 Spring Boot
            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_set_header X-Forwarded-Proto $scheme;
            
            # 增加超时设置
            proxy_connect_timeout 30s;
            proxy_send_timeout 30s;
            proxy_read_timeout 30s;
        }

        
        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   404 =200 /index.html;
        location = /50x.html {
            #root   html;
            root /usr/local/src/myLibrary/dist;
        }

    }
}

重启nginx让配置生效，

然后再用ip地址+端口的形式访问：

前端就部署完了

3.后端项目部署

(1)打包后端项目

修改配置文件：

把原来的图片路径改一下，去掉D:前缀，云服务器没有D盘，改到根目录下

修改数据库的用户名和密码，改成云服务器的

用Maven打包：双击install

命令执行无误之后会在项目根目录下生成target文件夹，jar包就在里面。

把jar包放到云服务器的目录下(自己按需创建)

(2)云服务器运行

然后进入到这个目录下运行命令：

复制代码

nohup java -jar ai_community-1.0-SNAPSHOT.jar nohup.out &

这个命令可以让springboot项目在后台运行，并且日志产生到该目录下的nohup.out当中

nohup.out如图：

springboot项目能够启动的话，访问前端页面：

输入账号密码验证码之后登录：

项目就部署完成了