Docker部署前后端分离项目详细步骤

服务器系统：centos7

后端技术：springboot2

前端技术：vue3

数据库：mysql

缓存数据库：redis

1、centos系统安装Docker

卸载旧版

首先如果系统中已经存在旧的Docker，则先卸载：

yum remove docker \
    docker-client \
    docker-client-latest \
    docker-common \
    docker-latest \
    docker-latest-logrotate \
    docker-logrotate \
    docker-engine \
    docker-selinux 

配置Docker的yum库

首先要安装一个yum工具

sudo yum install -y yum-utils device-mapper-persistent-data lvm2

安装成功后，执行命令，配置Docker的yum源（已更新为阿里云源）：

sudo yum-config-manager --add-repo https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

sudo sed -i 's+download.docker.com+mirrors.aliyun.com/docker-ce+' /etc/yum.repos.d/docker-ce.repo

更新yum，建立缓存

sudo yum makecache fast

安装Docker

yum install -y docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin

启动和校验

# 启动Docker
systemctl start docker

# 停止Docker
systemctl stop docker

# 重启
systemctl restart docker

# 设置开机自启
systemctl enable docker

# 执行docker ps命令，如果不报错，说明安装启动成功
docker ps

配置镜像加速

在首页的产品中，找到阿里云的容器镜像服务：

2、部署mysql

docker run -d \
  --name mysql \
  -p 3306:3306 \
  -e TZ=Asia/Shanghai \
  -e MYSQL_ROOT_PASSWORD=123 \
  mysql:5.7.19

系统自动下载mysql的镜像并启动

导入数据到远程服务器

连接服务器上的mysql执行sql文件，我这里使用的是datagrip连接

4、部署redis

项目中若要使用redis，则需要创建redis容器，设置密码要注意密码一致

docker run --restart=always -p 6379:6379 --name redis -d redis:6.2.1

默认无密码

--restart=always：开机自启

5、部署后端java程序

将项目打成jar包

创建构建成镜像的Dockfile文件，无后缀

将ruoyi-admin.jar换成自己的jar包名

# 基础镜像
FROM openjdk:11.0-jre-buster
# 设定时区
ENV TZ=Asia/Shanghai
RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone
# 拷贝jar包
COPY ruoyi-admin.jar /app.jar
# 入口
ENTRYPOINT ["java", "-jar", "/app.jar"]

上传到服务器

将jar包和Dockfile文件上传到服务器中文件夹中

构建镜像

在目录下执行

docker build -t bso-name .

bso-name是构建的镜像名，.不能少

启动容器

docker run -d --name bso -p 8080:8080 bso-name

bso：容器名

8080:8080：映射端口，宿主机与容器的映射端口

bso-name：镜像名

查看运行输出日志

docker logs -f bso

bso：容器名

5、部署前端vue程序

vue项目打包

在项目下执行

npm run build

得到生成的dist文件

创建构建文件Dockfile

FROM nginx
 
MAINTAINER yangao
 
RUN rm /etc/nginx/conf.d/default.conf
 
ADD default.conf /etc/nginx/conf.d/
 
COPY dist/ /usr/share/nginx/html/

FROM nginx：依赖nginx镜像，会自动下载

MAINTAINER：备注

ADD default.conf /etc/nginx/conf.d/  替换nginx的默认配置文件

创建nginx配置文件

server {
    listen       80;
    server_name  39.105.104.80;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.hmt;

        proxy_set_header host $host;
        proxy_set_header X-forwarded-for $proxy_add_x_forwarded_for;
        proxy_set_header X-real-ip $remote_addr;
    }
	
	location ^~/prod-api/ {
		proxy_set_header X-Real-IP $remote_addr;
		proxy_set_header REMOTE-HOST $remote_addr;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		proxy_set_header X-NginX-Proxy true;
		proxy_pass http://39.105.104.80:8081/;
	}
	
	
	# guigu-auth配置
	location /guigu {
		alias /opt/guigu-auth/guigu-front/;
		index index.html index.htm;
	}
	
	
 }

最重要的几处：

listen       80;    监听端口
server_name  39.105.104.80;  服务器ip

proxy_pass http://39.105.104.80:8081/;  反向代理

上传到服务器

在当前目录下执行构建

docker build -t bso-vue .

bso-vue：镜像名称

启动

docker run -d --name bso-vue -p 80:80 bso-vue

第一个bso-vue：容器名

第一个bso-vue：镜像名

重点：访问宿主机（服务器）端口80，会自动映射到bso-vue容器的80端口，又被nginx监听到完成反向代理。

查看日志

docker logs -f bso-vue

完成部署，浏览器访问http://ip+端口

-------------------------------------------------------------------------------------------------------------------------------

补充：

①查看已安装的镜像docker images

②查看在运行的容器docker ps

③查看容器的日志docker logs -f 容器名

④以上创建容器的命令都没有指定网络，使用默认网络bridge，若容器之间相互通信，需要在同一网络中。需指定  --network netname           // netname网络名