Spring boot + Vue项目部署上线

2024-12-19

部署项目前要配置好所需的数据库等服务

部署的服务器需要配置Nginx和Java运行环境

部署前端

打包

打开前端项目，在request文件中修改baseURL为线上访问地址，终端执行npm run build命令打包vue文件，会生成一个dist目录。

nginx的默认根目录为/usr/share/nginx/html，将dist目录下的内容上传到/usr/share/nginx/html下（不放dist）。如果不想覆盖默认的index页面或者想部署多个项目的话，在html目录下创建子目录，并将dist下的内容放入，注意在下文修改nginx配置文件的时候要加上子目录。

配置Nginx

在/etc/nginx/conf.d目录下创建nginx配置文件

server {
    listen 80;
    server_name xxxx.com www.xxxx.com;#这里是外部访问的域名

    # Vue 项目根目录
    location / {
        root /usr/share/nginx/html;#如果添加了子目录，这里要加上
        index index.html;

        # 支持 Vue 的前端路由（history 模式）
        try_files $uri $uri/ /index.html;
    }

    # 转发 /api 请求到后端服务
    location /api/ {
        proxy_pass http://127.0.0.1:8080;  # 后端项目地址和端口
        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 ~* \.(?:ico|css|js|gif|jpg|jpeg|png|svg|woff|woff2|eot|ttf|otf|ttc|map)$ {
        expires 6M;
        access_log off;
        add_header Cache-Control "public";
    }

    # 防止访问隐藏文件
    location ~ /\. {
        deny all;
    }
}

这里可以访问域名来看静态资源是否正确加载，我在这里遇到了一个问题，浏览器加载为空白页，没有报404。浏览器控制台显示资源请求返回404，查看nginx错误日志中显示寻找资源的路径为/etc/nginx/html/assets

tail -f /var/log/nginx/error.log 查看nginx错误日志

排查了所有的配置文件，没有发现覆盖当前配置文件的内容，遂在/etc/nginx/下创建了个html文件夹......把资源放过来了，但是配置文件中写的还是/usr/share/nginx/html

成功访问

部署后端

打包

打开后端项目

创建好线上的配置文件

确认引入maven打包插件

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.8.1</version>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                    <encoding>UTF-8</encoding>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <version>${spring-boot.version}</version>
                <configuration>
                    <mainClass>com.juicew.juicepicbackend.JuicePicBackendApplication</mainClass>
<!--                    <skip>true</skip>-->
                </configuration>
                <executions>
                    <execution>
                        <id>repackage</id>
                        <goals>
                            <goal>repackage</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>

这里skip要注释或者删掉，否则生成的jar包的MANIFEST.MF文件中缺少Main-Class，执行会报no main manifest attribute

在maven中切换跳过测试模式，执行clean命令，package命令

将target目录下的jar文件上传到服务器

启动

在jar包所在目录下执行命令

java -jar your-application.jar --spring.profiles.active=prod

指定prod配置文件启动服务，这里是在前台启动的，确认无误后输入ctrl+C结束。

这里我的前后端是部署在同一台服务器上，nginx将前端的请求转发到了本机的8080端口，所以不需要再打开服务器的其他端口了，只需要80和443端口即可。如果前后端分开部署在两台服务器上，记得开放后端所在的服务器端口并修改nginx转发的地址。

后台启动执行命令并将日志打印到指定文件下

nohup java -jar /path/to/your-application.jar > /path/to/logs/app.log 2>&1 &

查看日志

tail -f /path/to/logs/app.log

需要停止服务的话先查看进程，记下pid

ps -ef | grep your-application.jar

停止服务

kill -15 <pid>

使用脚本启动和停止

这里也可以用shell脚本来实现启动和停止服务

启动命令

#!/bin/bash

#设置变量
JAR_PATH="/path/to/your-application.jar"  #JAR文件路径
LOG_DIR="/path/to/logs"         #日志文件目录
LOG_FILE="$LOG_DIR/app.log"   #日志文件路径
#检查日志目录是否存在，如果不存在则创建
if [ ! -d "$LOG_DIR" ]; then
    mkdir -p "$LOG_DIR"
fi

nohup java -jar "$JAR_PATH" > "$LOG_FILE" 2>&1 &
#获取启动进程的 PID 并存储到日志目录中的 PID 文件
echo $! > "$LOG_DIR/app.pid"

停止命令

#!/bin/bash

#设置变量
LOG_DIR="/path/to/logs"      #日志文件目录
PID_FILE="$LOG_DIR/app.pid"  #存储pid的文件路径
# 检查pid文件是否存在
if [ ! -f "$PID_FILE" ]; then
    echo "pid file not found"
    exit 1
fi
#获取pid
PID=$(cat "$PID_FILE")
#检查进程是否存在
if ps -p $PID > /dev/null; then
    kill $PID
    rm -f "$PID_FILE"
else
    exit 1
fi

添加权限

chmod +x start.sh
chmod +x stop.sh

执行

./start.sh
./stop.sh