Docker部署SpringBoot+Vue前后端分离项目

全部代码

#停止所有容器
docker stop $(docker ps -a -q)

#删除所有容器
docker rm $(docker ps -aq)

#删除所有镜像
docker rmi -f $(docker images -qa)

#删除旧Docker
sudo yum remove docker \
						   docker-client \
						   docker-client-latest \
						   docker-common \
						   docker-latest \
						   docker-latest-logrotate \
						   docker-logrotate \
						   docker-engine
						 
						 
#安装Docker
yum install docker -y

#启动Docker
service docker start

#停止Docker
service docker stop

#重启Docker
service docker restart

#配置Docker镜像加速器
sudo tee /etc/docker/daemon.json <<-'EOF'
{
    "registry-mirrors": ["https://mirror.ccs.tencentyun.com"]
}
EOF

#查看Docker运行状态
systemctl status docker

配置Nginx

# 创建挂载目录
mkdir -p /home/nginx/conf

mkdir -p /home/nginx/log

mkdir -p /home/nginx/html

# 生成容器
docker run --name nginx -p 8080:8080 -d nginx

# 将容器文件复制到宿主机
docker cp nginx:/etc/nginx/nginx.conf /home/nginx/conf/nginx.conf

docker cp nginx:/etc/nginx/conf.d /home/nginx/conf/conf.d

docker cp nginx:/usr/share/nginx/html /home/nginx/

# 删除nginx
docker ps -a

docker stop nginx

docker rm nginx

docker ps -a

# 创建新nginx，挂载文件
docker run \
-p 8080:8080 \
--name nginx \
-v /home/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \
-v /home/nginx/conf/conf.d:/etc/nginx/conf.d \
-v /home/nginx/log:/var/log/nginx \
-v /home/nginx/html:/usr/share/nginx/html \
-d nginx:latest

docker ps

curl 81.68.232.188:8080

配置MySQL

docker run -d --restart=always \
--privileged=true \
-v /home/mysql/data:/var/lib/mysql \
-v /home/mysql/conf:/etc/mysql/conf.d \
-v /home/mysql/my.cnf:/etc/mysql/my.cnf \
-p 3306:3306 \
--name mysql \
-e MYSQL_ROOT_PASSWORD=root mysql:8.0

docker images

打包后台

#压缩项目编写Dockerfile，上传

Dockerfile

FROM openjdk:8

COPY *.jar /app.jar

EXPOSE 8001 # 后端端口，和yml文件里的项目端口一致

ENTRYPOINT ["java","-jar","app.jar"]

cd /home/api

docker build -t api .

docker images

# 宿主机端口:容器端口
docker run -d -p 8001:8001 --name api api

docker ps

打包前台

npm run build

编写default.conf和Dockerfile，上传

#default.conf

server {
    listen  8080;
    server_name  81.68.232.188; # 修改为docker服务宿主机的ip

    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }
	
    location /api {
      proxy_pass http://81.68.232.188:8001/; # Nginx代理的后台IP端口
    }
	
    # 静态资源映射
    location /image/userAvatar/ {
      root /home/image/userAvatar/; # 映射地址
      autoindex on;
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root html;
    }
}

#Dockerfile

FROM nginx

MAINTAINER ZJ

ENV TimeZone=Asia/Shanghai

COPY dist  /usr/share/nginx/html/

COPY default.conf /etc/nginx/conf.d

EXPOSE 8080

cd /home/vue

docker build -t vue .

# 前端容器端口:Nginx端口
docker run -d -p 80:8080 --name vue vue

docker ps

删除Docker

#停止所有容器
docker stop $(docker ps -a -q)

#删除所有容器
docker rm $(docker ps -aq)

#删除所有镜像
docker rmi -f $(docker images -qa)

#删除旧Docker
sudo yum remove docker \
						   docker-client \
						   docker-client-latest \
						   docker-common \
						   docker-latest \
						   docker-latest-logrotate \
						   docker-logrotate \
						   docker-engine
						   

安装Docker

#安装Docker
yum install docker -y

#启动Docker
service docker start

#停止Docker
service docker stop

#重启Docker
service docker restart

#配置Docker镜像加速器
sudo tee /etc/docker/daemon.json <<-'EOF'
{
    "registry-mirrors": ["https://mirror.ccs.tencentyun.com"]
}
EOF

#查看Docker运行状态
systemctl status docker

配置Nginx

# 创建挂载目录
mkdir -p /home/nginx/conf

mkdir -p /home/nginx/log

mkdir -p /home/nginx/html

# 生成容器
docker run --name nginx -p 8080:8080 -d nginx

# 将容器文件复制到宿主机
docker cp nginx:/etc/nginx/nginx.conf /home/nginx/conf/nginx.conf

docker cp nginx:/etc/nginx/conf.d /home/nginx/conf/conf.d

docker cp nginx:/usr/share/nginx/html /home/nginx/

# 删除nginx
docker ps -a

docker stop nginx

docker rm nginx

# 创建新nginx，挂载文件
docker run \
-p 8080:8080 \
--name nginx \
-v /home/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \
-v /home/nginx/conf/conf.d:/etc/nginx/conf.d \
-v /home/nginx/log:/var/log/nginx \
-v /home/nginx/html:/usr/share/nginx/html \
-d nginx:latest

docker ps

配置MySQL

docker run -d --restart=always \
--privileged=true \
-v /home/mysql/data:/var/lib/mysql \
-v /home/mysql/conf:/etc/mysql/conf.d \
-v /home/mysql/my.cnf:/etc/mysql/my.cnf \
-p 3306:3306 \
--name mysql \
-e MYSQL_ROOT_PASSWORD=root mysql:8.0

docker images

Navicat链接MySQL数据库

打包后台

压缩项目，编写Dockerfile，上传服务器

#Dockerfile

FROM openjdk:8

COPY *.jar /app.jar

EXPOSE 8001 # 后台端口，和yml文件里的项目端口一致

ENTRYPOINT ["java","-jar","app.jar"]

上传到服务器

创建镜像和容器

cd /home/api

docker build -t api .

docker images

# 宿主机端口:后台容器端口
docker run -d -p 8001:8001 --name api api

docker ps

打包前台

配置好后端请求地址IP和端口，打包项目

npm run build

编写default.conf和Dockerfile文件

#default.conf

server {
    listen  8080; # Nginx端口
    server_name  81.68.232.188; # 修改为docker服务宿主机的ip

    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }
	
    location /api {
      proxy_pass http://81.68.232.188:8001/; # Nginx代理的后台IP端口
    }
	
    # 静态资源映射
    location /image/userAvatar/ {
      root /home/image/userAvatar/; # 映射地址
      autoindex on;
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root html;
    }
}

#Dockerfile

FROM nginx

MAINTAINER ZJ

ENV TimeZone=Asia/Shanghai

COPY dist  /usr/share/nginx/html/

COPY default.conf /etc/nginx/conf.d

EXPOSE 8080 # Nginx端口

构建前端镜像和容器

cd /home/vue

docker build -t vue .

# 前端容器端口:Nginx端口
docker run -d -p 80:8080 --name vue vue

docker ps

测试

输入IP:前端容器的端口