SpringBoot + vue-cli项目部署

yangj0020

已于 2024-03-18 11:00:02 修改

阅读量224

点赞数

分类专栏： SpringBoot 文章标签： linux java maven spring boot

于 2021-06-16 17:33:43 首次发布

本文链接：https://blog.csdn.net/qq_43907111/article/details/117962072

版权

SpringBoot 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

后端

1. JDK安装和配置

jdk1.8下载（for linux）
链接：https://pan.baidu.com/s/1pXA_jLijnfar2O98-xytQA
提取码：a9f4

本地下载后传输到服务器上即可（选择 /root目录）
解压：tar -zxvf jdk-8u202-linux-x64.tar.gz，可将解压后的文件夹重命名为“jdk1.8”
配置环境变量：vi /etc/profile
在文件末尾加上：

export JAVA_HOME=/root/jdk1.8
export PATH=$JAVA_HOME/bin:$PATH
export CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar

保存，退出
source /etc/profile
验证是否配置成功：java -version

2. 项目发布

步骤 1. 配置生产环境，此处仅更改数据库配置，其它与测试环境保持一致。在resources目录下新建文件application-prod.properties，写入：

# 增加数据库连接
spring.datasource.url=jdbc:mysql://数据库地址:3306/数据库名?characterEncoding=UTF8&autoReconnect=true&serverTimezone=Asia/Shanghai&allowMultiQueries=true
spring.datasource.username=用户名
spring.datasource.password=密码
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

步骤 2. 打包，以下三个命令都会在target文件夹下打出一个包。install多做一步，会将包放到本地仓库；deploy会再多做一步，把包放到远程仓库
在这里插入图片描述
2.1 打包过程中可能遇到的问题：

2.2 解决办法：

<build>
    <plugins>
        
        <!-- 添加此插件 -->
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-resources-plugin</artifactId>
            <version>3.1.0</version>
        </plugin>
        
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>
    </plugins>
</build>

2.3 打包成功后，会发现jar包名称中包含版本号，导致名称冗长，在pom.xml文件的<build>标签下的第一行，添加：

<!-- 将包放到target/dist文件夹下 -->
<finalName>/dist/${artifactId}</finalName>

步骤 3：一键启动项目，并使其在后台运行。在服务器任意目录下（建议 /root），添加文件deploy.sh，如下（按需修改）：

#!/bin/bash
echo "publish----------"

process_id=`ps -ef | grep wiki.jar | grep -v grep |awk '{print $2}'`
if [ $process_id ] ; then
sudo kill -9 $process_id
fi

source /etc/profile
nohup java -jar -Dspring.profiles.active=prod ~/wiki/wiki.jar > /dev/null 2>&1 &

echo "end publish"

步骤 4：运行deploy.sh文件：sh deploy.sh

4.1 如果文件是在windows编写后传输到服务器上的，可能遇到的问题：
在这里插入图片描述
4.2 解决方法，依次执行：vim deploy.sh，:set ff=unix，:wq，回车

步骤 5：查看项目是否启动成功：ps -ef | grep java

3. nginx安装与配置

步骤 1：安装nginx：yum install nginx
步骤 2：vim /etc/nginx/nginx.conf
步骤 3：将 user nginx; 修改为 user root;
步骤 4：启动nginx：service nginx start
步骤 5：验证是否启动成功：curl http://服务器ip

前端

相关链接 vue-cli多环境配置

步骤 0：
在这里插入图片描述
步骤 1：双击运行 build-prod
步骤 2：将生成的dist文件夹下的内容上传到服务器（选择/root/web文件夹）
步骤 3：nginx静态网站配置，添加web.conf文件，写入内容（server_name对应服务器的公网IP），文件放在/etc/nginx/conf.d/目录下：

server{
  listen 80;
  server_name 121.5.252.90;

  location / {
    alias /root/web/;
    index index.html;
    try_files $uri $uri/ /index.html;
  }

}

步骤 4：重新加载 nginx：nginx -s reload
步骤 5：修改.env.prod文件：

NODE_ENV=production
VUE_APP_SERVER=http://121.5.252.90:8880 # 8880为后端项目的默认启动端口
VUE_APP_WS_SERVER=ws://121.5.252.90:8880