Docker Deployment Project - Demo vueblog

Foreword

Bilibili: https://www.bilibili.com/video/BV17A411E7aE
Github: https://github.com/MarkerHub/vueblog

Docker Documentation: https://docs.docker.com/

Deploy in Linux environment

Use docker-compose for orchestration, one-time deployment.

Compose is a tool for defining and running multi-container Docker applications. With Compose, you use a YAML file to configure your application’s services. Then, with a single command, you create and start all the services from your configuration. To learn more about all the features of Compose, see the list of features.

Compose works in all environments: production, staging, development, testing, as well as CI workflows. You can learn more about each case in Common Use Cases.

Using Compose is basically a three-step process:
1. Define your app’s environment with a Dockerfile so it can be reproduced anywhere.
2. Define the services that make up your app in docker-compose.yml so they can be run together in an isolated environment.
3. Run docker compose up and the Docker compose command starts and runs your entire app. You can alternatively run docker-compose up using the docker-compose binary.

A docker-compose.yml looks like this:

version: "3.9"  # optional since v1.27.0
services:
  web:
    build: .
    ports:
      - "5000:5000"
    volumes:
      - .:/code
      - logvolume01:/var/log
    links:
      - redis
  redis:
    image: redis
volumes:
  logvolume01: {}

1. Install docker

https://docs.docker.com/engine/install/

2. Install docker compose

Install Docker-compose

3. Write Dockerfile

FROM java:8

EXPOSE 8085

ADD vue-springboot-blog-0.0.1-SNAPSHOT.jar app.jar
RUN bash -c 'touch /app.jar'

ENTRYPOINT ["java","-jar","/app.jar","--spring.profiles.active=pro"]

4. Write the docker-compose.yml file

version: '3'

services:
  nginx:    # Service name  User defined
    image: nginx:latest   # Mirror version
    ports:
      - 80:80     # Exposed port
    volumes:      # Mount
      - /root/nginx/html:/usr/share/nginx/html
      - /root/nginx/nginx.conf:/etc/nginx/nginx.conf
    privileged: true  # This is necessary to solve the permission problem of nginx file calls
  mysql:
    image: mysql:latest
    ports:
      - 3306:3306
    environment:    # Specify the password of the root user
      - MYSQL_ROOT_PASSWORD=root
  redis:
    image: redis:latest
  vue-springboot-blog:
    image: vueblog:latest
    build: .    # Indicates to start building the image with the Dockerfile in the current directory
    ports:
      - 8085:8085
    depends_on:   # Depends on mysql, redis. in fact, you can leave it blank, the default has already indicated that you can
      - mysql
      - redis

6. Prepare the mount directory and configuration of nginx

Host mount directory: /root/nginx/html
Mount configuration: /root/nginx/nginx.conf

Write nginx.conf, the specific configuration is as follows:

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

7. Upload frontend

1. Modify the interface
   First modify the interface of the front-end to call the back-end, and then package:
   axios.js in /src folder:

   axios.defaults.baseURL='http://yourServerIp:8085'

2. Package
   Then npm run build packs the dist folder and uploads it to the root/nginx/html directory of linux.

8. Deploy backend

Update vue-springboot-blog-0.0.1-SNAPSHOT.jar, docker-compose.yml, Dockerfile to linux server.

docker-compose up -d

Where -d means start in the form of a background service.