一个 SpringBoot + Vue 项目的部署

2022-11-10 13:16:54 阅读：333 来源： 互联网

手动部署

去年的这个时候心血来潮搭建了个人博客，是基于 SpringBoot 和 Vue2 的，但是仅仅搭起来一个架子，前后端也简单地对接了下，里面的具体内容全是空的，数据库什么的根本没有设计。今年春天闲来无事，忽然想起这回事来，一时手痒，便打算继续搞搞。于是，mysql 简单地建了几张表，写了几个 CRUD 的接口，另附上几个页面，便想服务器上先部署一个版本。虽说当前会一些相关的操作，但整个部署过程对于我来讲，依旧不算十分熟悉，于是在翻阅了很多资料后，终于成功地部署了，期间也遇到了很多问题，在这里做一下总结。

一、准备环境

部署项目需要的环境很简单：后端需要 jdk1.8 来运行 jar 包，前端需要 nginx 服务器来监听端口，仅此而已。

由于这两个服务都比较基础，具体的安装过程网络上有很多，这里就简单描述一下。

1、jdk1.8

（1）去官网下载对应的安装包，上传到服务器，并解压至自定义目录（一般是 /usr/local）

tar -xzvf jdk-8u291-linux-x64.tar.gz -C /usr/local/

（2）配置环境变量。在 profile 文件中添加四个变量。

vim /etc/profile

# 文件BEGIN
export JAVA_HOME=/usr/local/jdk1.8.0_291
export JRE_HOME=$JAVA_HOME/jre
export CLASSPATH=.:$JAVA_HOME/lib:$JRE_HOME/lib
export PATH=/bin:/usr/bin:$PATH:$JAVA_HOME/bin:$PATH
# 文件END

（3）刷新配置

source /etc/profile

（4）查看 java 版本验证是否安装成功

java -version

2、nginx

先放上个 nginx 官方文档（）

（1）首先，安装 nginx 的乱七八糟一堆依赖。

yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel

（2）获得 nginx 安装包，解压到自定义目录（一般为 /usr/local）

tar -xvf nginx-1.20.0.tar.gz

（3）进入到解压好的 nginx 目录下，依次执行三条指令。

cd nginx-1.20.0

./configure
make
make install

（4）进入到 nginx 的 sbin 中，运行启动脚本，运行成功。

cd /usr/local/nginx/sbin
./nginx

二、打包项目

由于项目采用前后端分离的模式进行开发，因此，要分别对前后端进行打包。

1、后端 SpringBoot

首先，检查一下是否在 pom.xml 中引入 maven 打包插件，即是否存在以下的依赖。spring-boot-maven-plugin 默认将项目打包成 jar 包，打包成功后可在项目目录下的 target 文件夹下查看。

<build>
    <plugins>
        <!-- maven打包插件 -->
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>
    </plugins>
</build>

然后，确认后端API的端口为 9000，这个端口号很重要如下图所示。

在 IDE 右侧 maven 菜单栏中选择 */Lifecycle/package 工具进行打包，如下图。

或者在终端中运行打包命令，-DskipTests跳过单元测试模块，在项目根目录下运行此命令，会在target目录下生成jar包，jar包命名为：项目名-版本号-SNAPSHOT.jar。

mvn clean package -DskipTests

打包成功后，将 jar 包上传至服务器指定目录下（例如 /opt/hong/blog/blog-backend）。

2、前端 Vue2

打开 Vue 项目，首先需要查看一下对接后端接口的反向代理，可以确认对接了后端 9000 端口，vue.config.js 文件如图所示。

在终端执行打包命令，此时将在根目录下获得 dist 目录，这便是 Vue 打包制品。

yarn build

打包成功后，将 dist 整个目录上传至服务器指定目录下（例如 /opt/hong/blog/blog-frontend）。至此，前后端均已打包完毕，当前服务器的目录如下（由于项目正在运行，目录树有所出入，仅做参考）。

三、配置相关服务

为了让其他人能够通过相应的端口号访问到前端服务，首先要配置 nginx 代理。

1、配置 nginx 代理

进入到 nginx 目录下的 conf/nginx.conf 文件（注：可以更改usr目录下的配置，也可以更改全局配置），找到 http 代码段，做如下的更改：

http {
          
   
    # 省去不必要的配置代码
    server {
          
   
        listen       8895; # 本服务监听的端口号
        server_name  localhost; # 主机名称
        
        location / {
          
   
            # root 规定了通过监听的端口号访问的文件目录
            root   /opt/hong/blog/blog-frontend/prod;
            # index 规定了该目录下指定哪个文件
            index  index.html index.htm;
            # 配置资源重新跳转，防止刷新后页面丢失
            try_files $uri $uri/ /index.html;
        }

        # 配置后端接口的跨域代理
        # 对于路径为 "dev-api 的接口，帮助他跳转到指定的地址
        location /dev-api/ {
          
   
            # 本机上运行的后端接口
            proxy_pass http://localhost:9000/api/v1/; 	
        }
      
        # 默认配置
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
          
   
            root   html;
        }
    }
}

接下来重新启动 nginx，进入 nginx 目录下的 sbin，重启 nginx。

./nginx -s reload

标签：系统,安装,命令,方式,配置
来源：

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9