Docker+nginx部署SpringBoot+vue前后端分离项目（保姆及入门指南）

项目回顾

书接上文，我们使用springboot+jwt+shiro+vue+elementUI+axios+redis+mysql完成一个前后端分离的博客项目
csdn链接：https://blog.csdn.net/weixin_45683778/article/details/139002415
github地址：https://github.com/huang-hanson/vueblog

项目展示地址：http://47.116.123.21:81/blogs

这部分介绍如何部署我们的项目

工具

• xshell 7 绿色破解版
• Navicat 11 简体中文

上线准备

这里我们同步演示怎么部署到win环境和linux(centos7)系统中，前端服务器采用nginx部署并使用docker统一管理前后端服务器。
所以我们会用到:

• nginx
• docker compose

1、win

win环境我就用本机来演示了，我们需要分别打包前后端，前后端打包都是一条命令即可，只不过我们打包之前注意需要配置好线上的环境参数等

1.1、前端

先来配置一下后端的调用路径，因为现在部署在本地localhost，所以在axios.js中，我们配置好链接，因为等下后端部要也是本机，所以我这里直接这样配置就好了，如下:

• srclaxios.js

axios.defaults.baseURL = "http://localhost:8082"

上面配置的就是前端访问后端接口的服务。

然后前端部署还需要考虑一个问题:打包之后项目资源引用路径，比如我们打包后链接是否需要带项目名称等。按照Vue官方的部罢说明，我们添加一个vue.config.js文件，

• vueblog-vue/vue.config.js

module.exports = {publicPath: '/'
}

当然了，pubicPath默认其实是空的，也就是publicPath:"，两个效果貌似其实是一样的，哈哈哈，我只是提醒一下有这回事而已，嘿嘿。

设置完毕之后，我们执行打包命令:

#打包命令
npm run build

命令执行之后，我们在项目根目录下就可以找到一个dist的目录，这个就是打包之后的文件夹里面有个index.html，但是我们点击直接打开是看不到任何内容的，这时候，我们需要部署到nginx中。

注：首次打包需要npm install一下

首先我们下载一个nginx，下载地址:http://nginx.org/en/download.html，这里我们下载nginx/Windows-1.26.0版本，下载之后解压zip。根据我们对nginx的熟悉，静态文件我们放在html文件夹下面，所以先把html文件夹中的index.html和50x.html删掉，然后把打包出来的dist文件夹内的所有文件都复制到nginx的html中，如图:

双击nginx.exe启动nginx，然后浏览器输入http://localhost，出现了我们熟悉的界面，虽然没有博客数据，链接也自动跳转到了http://localhost/blogs，

我们点击任意一个链接或者按钮或者剧新界面，这时候出现了404:

刷新之后nginx就找不到路由了，这是为啥，得和你们科普一下，vue项目的入口是index.html文件，nginx路由的时候都必领要先经过这个文件，所以我们得给nginx定义一下规则，让它匹配不到资源路径的时候，先去读取index.html，然后再路由。所以我们配置一下nginx.conf文件。具体操作就是找到location,添加上一行代码try_files $uri $uri/ /index.html last;如下:

• nginx-1.26.0/conf/nginx.conf

location / {root html;try_files $uri $uri/ /index.html last;index index.html index.htm;
} 

这一行代码是什么意思呢?
try_files的语法规则:格式1:try_files file…uri，表示按指定的们file顺序查找存在的文件，并使用第一个找到的文件进行请求处理，last表示匹配不到就内部直接匹配最后一个。

重启nginx之后，链接再刷新都正常啦。但是没有数据，所以我们去部署一下后端。windows环境nginx的重启我一般都是打开任务管理器直接干掉nginx进程，然后再重新双击的~~

重启之后，这样就能找到我们的资源路径了（例如：通过logs，跳转到登录页）

前端已经部署完毕，但是没有数据进来，现在部署后端。

1.2、后端

后端的打包就简单多了，应该大家都挺熟悉的，注意配置redis、mysql的链接密码啥的，然后执行命令，本机测试，redis和mysql我都已经提前安装好的了，sql文件也在vueblog-java的resources日录下

对了，pom.xml文件里面，spring-boot-maven-plugin之前注释掉了，现在一定要打开。不然执行jar会找不到主类。

• pom.xml

    <build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins></build>

执行打包命令:

#跳过测试打包
mvn clean package -Dmaven.test.skip=true

得到target下的vueblog-0.0.1-SNAPSHOT.jar，然后再执行命令

或者直接通过maven工具

在idea右侧直接运行clean–>test–>package，左边会出现target文件和jar包

java jar vueblog-0.0.1-SNAPSHOT.jar --spring.profiles.active=default

后端上线之后，我们再访问下前端，发现已经可以正常浏览网页啦!spring.profiles.active表示指定环境配置文件。

图中后端启动完成，端口为8082，刷新前端页面

到此，win部署完成。

2、linux环境

linux环境部署相对复杂一点，因为我们还要部署redis、mysql等。我们使用docker compose来编排我们的服务，一起性搞定部罢。
二话不说，我们先来安装一下docker和docker compose，对于docker知识还不是特别懂的同学，建议自行去补习补习哈。

2.1、安装docker

#安装
yum install docker#检验安装是否成功
[rootalocalhost opt]# docker--version
Docker version 26.0.0, build 2ae903e#启动
systemctl start docker

2.2、安装docker compose

可以参考:https://docs.docker.com/compose/install/

sudo curl -L "https://github.com/docker/compose/releases/download/1.27.4/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose或者sudo wget "https://github.com/docker/compose/releases/download/v2.16.0/docker-compose-linux-x86_64" -O /usr/local/bin/docker-composesudo chmod +x /usr/local/bin/docker-compose#检查是否安装成功
docker-compose --version

2.3、编写Dockerfile文件

因为我们的项目需要成为docker的镜像，所以我们必须先编写Dockerfile文件构建我们的项目镜像然后进行编排，Dockerfile文件可以帮我们进行构建。

• Dockerfile

FROM openjdk:8EXPOSE 8080ADD vueblog-0.0.1-SNAPSHOT.jar app.jar
RUN bash -c 'touch /app.jar'ENTRYPOINT ["java","-jar","/app.jar","--spring.profiles.active=pro"]

2.4、编写docker-compose.yml文件

我们需要用到的软件与服务分别有nginx、mysq、redis、还有我们的springboot项目，所以编写如下:

• docker-compose.yml

version: '3'services:nginx: # 服务名称image: nginx:latest # 最新版本的nginxports:#- 80:80 # 把docker容器的80端口映射到宿主机的80端口- 81:81volumes:- /root/nginx/html:/usr/share/nginx/html  # 将docker中额html文件夹映射到宿主机的/root/nginx/html目录下- /root/nginx/nginx.conf:/etc/nginx/nginx.conf  # 将docker中额nginx.conf配置文件映射到宿主机的/root/nginx/nginx.conf目录下privileged: true # 这个必须要加，解决nginx的文件调用权限问题mysql:image: mysql:5.7.27ports:#- 3306:3306- 8081:3306environment:- MYSQL_ROOT_PASSWORD=adminredis:image: redis:latestcommand: redis-server /etc/redis/redis.confvolumes:- ./redis/data:/data- /root/redis/redis.conf:/etc/redis/redis.conf  # 将docker中额nginx.conf配置文件映射到宿主机的/root/nginx/nginx.conf目录下ports:- 6379:6379vueblog:image: vueblog:latestbuild: .   # 这个不能从docker hub中去拉取，需要自己构建，会去寻找同级下的Dockerfile文件（文件中的jar包）进行构建ports:- 8082:8082depends_on:- mysql- redis

上面注释写的很明白

2.5、修改application-pro.yml

然后我们再回头看看applicaiion-pro.yml文件，mysql和redls的链接之前还是localhost，现在我们需要修改成容器之间的调用，如何知道mysql和redis的链接地址呢?docker compose就帮我们解决了这个问题，我们可以使用镜像容器的服务名称来表示链接。比如docker-compose.yml中mysql的服务名称就叫mysql、redis就叫redis。

# DataSource Config
spring:datasource:driver-class-name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://mysql:8081/vueblog?useUnicode=true&useSSL=false&characterEncoding=utf8&serverTimezone=Asia/Shanghaiusername: rootpassword: admin
shiro-redis:enabled: trueredis-manager:host: redis:6379

2.6、准备好nginx的挂载目录和配置

docker-compose.yml中已经提到

• 宿主机的挂载目录:/root/nginx/htmI
• 挂载配置:/root/nginx/nginx.conf

所以我们在root目录下新建nginx目录，并进入nginx目录下新建html目录和一个nginx.conf配置文件。

axios.js文件中url需要改成你的linux机器ip

重新前端代码打包，压缩后托到html文件夹下面

将dist文件下面的文件全部转移到html下

编写nginx.config配置文件，其中可以参考win下的配置文件

将location 的html地址改成挂载的目录

# user root;
worker_processes  1;events {worker_connections  1024;
}http {include       mime.types;default_type  application/octet-stream;sendfile        on;keepalive_timeout  65;server {# listen       80;listen       81;server_name  localhost;location / {root   /usr/share/nginx/html;try_files $uri $uri/ /index.html last;index  index.html index.htm;}error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}}
}

2.7、部署后端服务

一切准备就绪之后，我们就开始编排部署了哈。

首先本地打包vueblog项目，vueblog-0.0.1-SNAPSHOT.jar，并上传到linux中，同时docker-compose.yml、Dockerfile也上传到同一目录下。如图所示:

然后我们执行一下编排命令:

#开始编排
cd
docker-compose up -d

其中-d表示后台服务形式启动

然后我们稍等片刻，特别是开始Building vueblog的时候可能时间有点长，耐心等待即可!最后提示如下·

访问连接：http://47.116.123.21:81/blogs（你自己的ip+port）我这里为了避免冲突，我将80改成了81端口

发现没有数据，需要导入sql表

DROP TABLE IF EXISTS `m_blog`;
/*!40101 SET @saved_cs_client     = @@character_set_client */;
SET character_set_client = utf8mb4 ;
CREATE TABLE `m_blog` (`id` bigint(20) NOT NULL AUTO_INCREMENT,`user_id` bigint(20) NOT NULL,`title` varchar(255) NOT NULL,`description` varchar(255) NOT NULL,`content` longtext,`created` datetime NOT NULL ON UPDATE CURRENT_TIMESTAMP,`status` tinyint(4) DEFAULT NULL,PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=21 DEFAULT CHARSET=utf8mb4;
/*!40101 SET character_set_client = @saved_cs_client */;DROP TABLE IF EXISTS `m_user`;
/*!40101 SET @saved_cs_client     = @@character_set_client */;
SET character_set_client = utf8mb4 ;
CREATE TABLE `m_user` (`id` bigint(20) NOT NULL AUTO_INCREMENT,`username` varchar(64) DEFAULT NULL,`avatar` varchar(255) DEFAULT NULL,`email` varchar(64) DEFAULT NULL,`password` varchar(64) DEFAULT NULL,`status` int(5) NOT NULL,`created` datetime DEFAULT NULL,`last_login` datetime DEFAULT NULL,PRIMARY KEY (`id`),KEY `UK_USERNAME` (`username`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;
/*!40101 SET character_set_client = @saved_cs_client */;INSERT INTO `vueblog`.`m_user` (`id`, `username`, `avatar`, `email`, `password`, `status`, `created`, `last_login`) VALUES ('1', 'hanson', 'https://image-1300566513.cos.ap-guangzhou.myqcloud.com/upload/images/5a9f48118166308daba8b6da7e466aab.jpg', NULL, '96e79218965eb72c92a549dd5a330112', '0', '2020-04-20 10:44:01', NULL);

再次刷新项目就部署成功了；