一个 SpringBoot + Vue 项目的部署


手动部署

去年的这个时候心血来潮搭建了个人博客,是基于 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

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/292893.html

(0)
上一篇 2022年11月10日
下一篇 2022年11月10日

相关推荐

发表回复

登录后才能评论