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

一、配置环境

1、Docker安装

从Ubuntu的仓库直接下载安装。安装比较简单，但是这种安装的Docker不是最新版本。

1
2
3
4
5
6
# 安装
sudo apt-get update
sudo apt install docker.io
# 启动服务
sudo systemctl start docker
sudo systemctl enable docker

查看是否成功，输出

1
2
3
> docker -v

Docker version 20.10.7, build 20.10.7-0ubuntu5~18.04.3

2、安装Docker-compose

Install Docker Compose | Docker Documentation

进入https://github.com/docker/compose/releases 查看最新版本

1
sudo curl -L https://github.com/docker/compose/releases/download/1.23.1/docker-compose-`uname -s`-`uname -m` -o /usr/local/bin/docker-compose

设置权限

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

查看是否安装成功

1
2
3
> docker-compose --version

docker-compose version 1.23.1, build b02f1306

二、编排容器，打包部署

1、打包JAVA应用容器镜像

先将java项目打包成jar包，这里不过多说明。如我们的jar包名为：myapp.jar

编写Dockerfile，负责打包java应用

1
2
3
4
5
6
7
8
FROM java:8			# 基于java8

EXPOSE 8081			# 暴露端口

ADD myapp-0.0.1-SNAPSHOT.jar app.jar	# 重命名
RUN bash -c 'touch /app.jar'			# 
# 这里的命令和我们运行jar包的命令是一样的
ENTRYPOINT ["java", "-jar", "/app.jar", "--spring.profiles.active=docker"]

注意：这里暂时这么写就行，打包的工作交给docker-compose自动完成

2、编写docker-compose.yml文件，编排容器

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
version: '3'

services:
  nginx:                  # 服务名称
    image: nginx:latest   # 镜像最新的nginx
    ports:                # 暴露端口
      - 80:80             # 宿主机端口：容器端口
    volumes:              # 挂载      格式：宿主文件夹:容器内部文件夹
      - /root/nginx/html:/usr/share/nginx/html        # vue前端页面
      - /root/nginx/nginx.conf:/etc/nginx/nginx.conf  # nginx 配置文件
    privileged: true      # nginx内部文件调用权限问题，不然可以无法使用上述文件

  mysql:
    image: mysql:5.7.27
    ports:
      - 3306:3306		  # mysql可以选择不暴露的，也更安全
    environment:		  # 配置mysql root用户密码
      - MYSQL_ROOT_PASSWORD=root
  redis:
    image: redis:latest
  # 这个就是自己打包的java应用，需要自己构建
  myapp:
    image: myapp:latest
    build: .    # 指定这个需要构建的Dockerfile文件所在目录，如果dockerfile和conpose放在一起就 .
    ports:
      - 8081:8081
    depends_on: # 依赖其他容器，但是默认已经是相互依赖的，写不写无所谓
      - mysql
      - redis

当我们按照这个配置编排好容器，运行起来时，即可以理解为，我们已经安装好了需要的服务，如mysql，redis等

3、更改java项目中的配置文件

具体来说就是我们之前单独写java项目时，用的可能是本地或者远程的数据库等服务，现在部署的时候需要将这些服务替换成我们编排好的docker服务

小提示：这里可以新建一个application-docker.yml文件，我们在运行程序时，指定配置文件即可

如：JAVA -jar /app.jar --spring.profiles.active=docker

这一步执行起来也较为简单，用第二步中的服务名称，如mysql，redis等，替换java项目配置文件中的localhost，服务器ip等即可。

1
2
3
4
5
6
7
8
9
10
11
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://mysql:3306/...

...

shiro-redis:
  enabled: true
  redis-manager:
    host: redis:6379

这样配置之后，当应用访问mysql等服务时，会自动找到相应容器

4、部署前端Vue项目

4.1 打包vue项目

1
npm run build

之后在项目根目录会多出一个dist文件夹，里面的内容就是我们要的，直接将里面的所有内容打包发送至服务器指定的nginx设置的位置/root/nginx/html即可。例如：

image-20220112185020221

4.2 编写nginx.conf文件

有两点需要注意：

1、删除了注释，加上一句话try_files，针对vue打包的项目的

2、指定根目录为/usr/share/nginx/html，这里和compose中的配置是对应的，指的是nginx容器中映射的位置。

详细nginx.conf配置文件

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
30
#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 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;
        }
    }
}

最后呢，我们需要把打包的文件放入宿主机的/root/nginx/html中，容器就可以在/usr/share/nginx/html中找到文件啦(这里的两个文件夹在前文中docker-compose.yaml设置过了)

将nginx.conf文件放入/root/nginx/nginx.conf（这个位置也是前文设置的）

5、一切就绪，部署

将jar包，Dockerfile，docker-compose.yml一起上传至服务器，准备打包，这里最好是同一位置（其他位置也行，compose文件里面配置了自己要打包的镜像的位置，只要能找到就行）

image-20220112192820674

详细文件目录为：

1
2
3
4
5
6
7
8
9
10
11
12
13
.
├── docker-compose.yml			# 编排配置文件
├── Dockerfile					# 构建镜像
├── myapp-0.0.1-SNAPSHOT.jar	# 后端应用
└── nginx						# 前端目录
    ├── html						 # VUE打包项目
    │   ├── css
    │   ├── favicon.ico
    │   ├── fonts
    │   ├── img
    │   ├── index.html
    │   └── js
    └── nginx.conf					# nginx 配置文件

拉取、构建镜像，以服务形式运行

1
docker-compose up -d  # -d 以服务形式运行

运行结果：

先是拉取nginx，mysql，redis镜像

image-20220112200255925

构建我们的app：

image-20220112200350070

image-20220112200432153

运行完成

注意：期间如果遇到构建镜像错误，可能需要删除错误的镜像，停止相应容器等。否则可能一直运行的都是旧的镜像

再次注意：这里的mysql仍然没有配置好数据库，需要进入容器，导入数据库

三、参考

教你Docker+nginx部署SpringBoot+vue前后端分离项目_哔哩哔哩_bilibili

Ubuntu18.04安装docker、docker－compose、 - 软刺sec - 博客园 (cnblogs.com)

Docker 删除镜像_点滴记录，积流成河！-CSDN博客_docker 删除镜像