使用 Docker 部署 SpringBoot、Vue 前后端分离项目
使用 Docker 与 Nginx 在 CentOS 7 上部署 SpringBoot、Vue 前后端分离项目
环境准备
- CentOS 7.x,ip 192.168.62.130
- 基于 SpringBoot 的后端服务一个,端口号 8081
- 基于 Vue 的前端工程
说明:这个后端服务是对 MySQL 一张单表 Metadata(实体类)的 CRUD 操作。前端即页面上点击实现增删改查。
第一步:Docker 环境搭建
参考博文:Docker 安装与配置
第二步:Docker 部署后端 jar 服务
(1)后端项目打包
将基于 Spring Boot 的后端服务使用 Maven 打包。有很多种方式:
- 可以在控制台直接:
mvn clean package [-Dmaven.test.skip=true|-DskipTests]
,可选的两种方式跳过打包时的测试(前提是你的操作系统了配置好 Maven 的环境变量) - 在 IDEA 的 Maven 可视化面板里点击即可,也可在上方勾选跳过测试的图标(绿色的闪电⚡)
- 在项目的 pom 文件的
<properties>
下配置<skipTests>true</skipTests>
。(这是因为spring-boot-maven-plugin
插件集成了maven-surefire-plugin
插件,会自动运行junit test
)
(2)准备 Dockerfile 文件
在项目的根路径下新建 deploy 文件夹,里面新建 Dockerfile 文件,这里准备了一个最简的:
# 基础镜像
FROM openjdk
# 作者信息
LABEL maintainer="2466267753@qq.com"
# 开放端口
EXPOSE 8081
# 将 ams-0.0.1-SNAPSHOT.jar 复制到 docker 中,并重命名为 ams.jar
ADD ams-0.0.1-SNAPSHOT.jar ams.jar
# 容器执行命令
ENTRYPOINT ["java", "-jar", "ams.jar"]
取出打包后的位于 /target
目录下的 jar 包,放到 Dockerfile
同一目录下。在 IDEA 里配置好 SSH 连接 CentOS,然后打开可视化的 Docker 工具,我们采用可视化的操作制作并启动镜像。具体步骤可参考:IDEA 发布 SpringBoot 项目到 Docker。项目启动后可在 IDEA 里 Docker 工具的端口绑定处绑定一个对外端口 8081 > 18081。
第四步:Docker 搭建 Nginx 环境
Docker 部署 Nginx 的步骤如下:
# 拉取镜像
docker pull nginx
# 创建 Nginx 容器,因为要拷贝一些文件以及设置挂载目录,需要先启动一个nginx容器
docker run -di --name nginx -p 80:80 nginx
# 创建宿主机目录,用于存放挂载文件
mkdir docker-nginx
# 将容器内的配置文件拷贝到宿主机新建的文件夹内,并重命名
docker cp nginx:/etc/nginx /opt/docker-v-data/docker-nginx
# 重命名为 conf
mv nginx/ conf
# 这时候就可以将当前的容器停掉、删除了
docker stop nginx
docker rm nginx
# 新建宿主机目录用于挂载前端文件
mkdir front
# 此时的文件结构为:
# [root@bogon:/opt/docker-v-data/docker-nginx]# tree
# .
# ├── conf
# │ ├── conf.d
# │ │ └── default.conf
# │ ├── fastcgi_params
# │ ├── mime.types
# │ ├── modules -> /usr/lib/nginx/modules
# │ ├── nginx.conf
# │ ├── scgi_params
# │ └── uwsgi_params
# └── front
#
# 3 directories, 7 files
# 启动我们要用的 nginx,命名为 mynginx,设置挂载目录(配置文件目录、前端文件挂载目录)
docker run -di --name mynginx -p 80:80 \\
-v /opt/docker-v-data/docker-nginx/conf:/etc/nginx \\
-v /opt/docker-v-data/docker-nginx/front:/usr/share/nginx/html \\
nginx
到此,一个设置好挂载目录的 Nginx 容器便启动成功了。这时候在宿主机的
/opt/docker-v-data/docker-nginx/conf
目录下:设置配置文件/opt/docker-v-data/docker-nginx/front
目录下:放前端 dist 文件夹
第五步:前端文件打包、部署
(1)前端配置
第一步:前端工程里添加一个文件:前端根目录 /config/prod.env.js
,里面添加如下代码:
'use strict'
module.exports = {
NODE_ENV: '"production"',
BASE_URL: '"/api"'
}
第二步:在前端 axios
调用后端接口时,需要在路径最前方带上 /api
,例如查询所有元数据的后端服务接口为
http://localhost:8081/metadata
,原来在前端项目里我们需要写成 /metadata
即可,现在需要写成 /api/metadata
。
(2)Nginx 部署前端、配置文件修改
npm run build
打包前端文件成一个 dist 文件夹,将这个文件传到 CentOS 的 /opt/docker-v-data/docker-nginx/front 目录下,即挂载目录。
修改宿主机 CentOS 的 /opt/docker-v-data/docker-nginx/conf/nginx.conf
user nginx;
worker_processes 1;
error_log /var/log/nginx/error.log notice;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
#tcp_nopush on;
keepalive_timeout 65;
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html/dist/;
index index.html;
try_files $uri $uri/ /index.html;
}
location /api/ {
# 注意这里不能写 localhost 或 127.0.0.1,因为 Nginx 也是部署在 Docker 上的,且都是采用
# 的默认的 Bridge 网络模式,每个启动的容器都有自己 ip,类似于 172.17.0.x。如果写 localhost 或 127.0.0.1 本地 # 回环地址,会报错 502 错误。
# 综上:此处需要写宿主机的 ip:宿主机暴露出的端口(docker ps 可看)
# 或者写容器内的 ip:后端服务在容器内的端口(docker network inspect bridge 或 docker inspect 容器ID|名称 均可看)
proxy_pass <http://192.168.62.130:18081/;>
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Product_Type 2;
}
}
#gzip on;
include /etc/nginx/conf.d/*.conf;
}
(3)前端打包发布
npm run build
将前端打成一个 dist 文件夹,将其上传至 /opt/docker-v-data/docker-nginx/front 目录下,即发布成功。
第六步:重启 Nginx 容器
docker restart mynginx
# 查看日志
docker logs -f munginx
更多推荐
所有评论(0)