Detailed tutorial of Docker+Nginx deployment front-end separation project (SpringBoot+Vue)

Teaching explanation video: video address

1. Install docker

yum install docker

Check if the installation is successful

docker --version

start docker

systemctl start docker

2. Install 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

Grant executable permissions after installation

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

Check if the installation is successful

docker-compose --version

3. Write 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"]

insert image description here

4. Write the docker-compose.yml file

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

insert image description here
The IP addresses of MySQL and Redis in the configuration file should be changed to the service names in the docker-compose.yml file.

Five, write Nginx configuration file nginx.conf

Now the host creates the html directory and the nginx.conf file
insert image description here
and writes the configuration file 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;
      }
  }
}

6. Deploy the front end

Front-end Vue project packaging

npm run build

After the front end is packaged, a dist directory file will appear.
insert image description here
Put all the files in the dist directory into the html directory we just created

7. Deploy the backend

First package the backend into a jar package, and then upload it to the cloud server. At the same time, the Dockfile and docker-compose.yml files should also be uploaded to the cloud server.
insert image description here
Enter the command to orchestrate the start service

docker-compose up -d

After startup, we can use Navicat to remotely connect to the MySQL database of the cloud server to import SQL files.
insert image description here

So far, our Docker+Nginx front-end deployment is complete!

PS: Remember to add the useful ports to the security group when deploying on the cloud server. When deploying on a virtual machine, the firewall must be turned off!