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