Docker+Nginx部署前后端分离项目(SpringBoot+Vue)的详细教程

教学讲解视频：视频地址

一.安装docker

yum install docker
1

检查是否安装成功

docker --version
1

启动Docker

systemctl start docker
1

二、安装docker-compose

sudo curl -L https://get.daocloud.io/docker/compose/releases/download/1.25.1/docker-compose-`uname -s`-`uname -m` -o /usr/local/bin/docker-compose
1

安装完后赋予可执行权限

sudo chmod +x /usr/local/bin/docker-compose
1

检查是否安装成功

docker-compose --version
1

三、编写Dockfile文件

#依赖jdk8环境
FROM openjdk:8

#对外暴露8085
EXPOSE 8085
#复制server-1.0-SNAPSHOT到docker容器中并命名为app.jar
ADD server-1.0-SNAPSHOT.jar app.jar
#执行命令
RUN bash -c 'touch /app.jar'
ENTRYPOINT ["java", "-jar", "/app.jar", "--spring.profiles.active=pro"]
1
2
3
4
5
6
7
8
9
10

四、编写docker-compose.yml文件

version: "3"
services:
  nginx: # 服务名称，用户自定义
    image: nginx:latest  # 镜像版本
    ports:
      - 80:80  # 暴露端口
    volumes: # 挂载
      - /root/nginx/html:/usr/share/nginx/html
      - /root/nginx/nginx.conf:/etc/nginx/nginx.conf
    privileged: true # 这个必须要，解决nginx的文件调用的权限问题
  mysql:
    image: mysql:5.7.27
    ports:
      - 3306:3306
    environment: # 指定用户root的密码
      - MYSQL_ROOT_PASSWORD=admin
  redis:
    image: redis:latest
  server:
    image: server:latest
    build: . # 表示以当前目录下的Dockerfile开始构建镜像
    ports:
      - 8085:8085
    depends_on: # 依赖与mysql、redis，其实可以不填，默认已经表示可以
      - mysql
      - redis
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

配置文件中MySQL和Redis的IP地址要改成docker-compose.yml文件中的服务名称。

五、编写Nginx的配置文件nginx.conf

现在宿主机创建html目录和nginx.conf文件

编写配置文件nginx.conf

#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;
      server_name  101.132.143.220;
      location / {
          root   /usr/share/nginx/html;
          try_files $uri $uri/ /index.html;
          index  index.html index.htm;
      }
	  location /api/ {
		  proxy_pass http://101.132.143.220:8085;
		  proxy_redirect default;
		  rewrite ^/api/(.*) /$1 break;
	  }
      error_page   500 502 503 504  /50x.html;
      location = /50x.html {
          root   html;
      }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

六、部署前端

前端Vue项目打包

npm run build
1

前端打完包会出现个dist目录文件

把dist目录下的所有文件放到我们刚才创建的html目录下

七、部署后端

先将后端打成jar包，然后上传到云服务器上，同时Dockfile文件和docker-compose.yml文件也要上传到云服务器上。

输入命令编排启动服务

docker-compose up -d
1

启动完后，我们可以使用Navicat远程连接云服务器的MySQL数据库，进行SQL文件的导入了。

至此，我们的Docker+Nginx的前后端部署就完成辣！

PS：云服务器上部署记得要把有用到的端口加入安全组。虚拟机上部署要把防火墙关闭哦！