Detailed process of Alibaba Cloud server deploying front-end and back-end separation projects through Docker

1 Linux installation Docker

1.1 Check the Linux kernel version (log in to CentOS with root privileges)

[root@iZgia1btkivmb2Z ~]# uname -r 
3.10.0-957.21.3.el7.x86_64         
[root@iZgia1btkivmb2Z ~]#

1.2 Make sure the yum package is updated to the latest version

[root@iZgia1btkivmb2Z ~]# yum -y update
已加载插件：fastestmirror
Loading mirror speeds from cached hostfile
正在解决依赖关系
--> 正在检查事务
---> 软件包 GeoIP.x86_64.0.1.5.0-13.el7 将被 升级
---> 软件包 GeoIP.x86_64.0.1.5.0-14.el7 将被 更新
......
完毕！
[root@iZgia1btkivmb2Z ~]#

1.3 Install required software packages

[root@iZgia1btkivmb2Z ~]# yum install -y yum-utils
已加载插件：fastestmirror
Loading mirror speeds from cached hostfile
正在解决依赖关系
--> 正在检查事务
......
完毕！
[root@iZgia1btkivmb2Z ~]#

1.4 Set up yum source and update yum’s package index

[root@iZgia1btkivmb2Z ~]# sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
已加载插件：fastestmirror
adding repo from: http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
grabbing file http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo to /etc/yum.repos.d/docker-ce.repo
repo saved to /etc/yum.repos.d/docker-ce.repo
[root@iZgia1btkivmb2Z ~]#

[root@iZgia1btkivmb2Z ~]# yum makecache fast
已加载插件：fastestmirror
Loading mirror speeds from cached hostfile
...... 
元数据缓存已建立
[root@iZgia1btkivmb2Z ~]#

1.5 View all Docker versions in the warehouse

[root@iZgia1btkivmb2Z ~]# yum list docker-ce --showduplicates | sort -r
已加载插件：fastestmirror
可安装的软件包
Loading mirror speeds from cached hostfile
docker-ce.x86_64            3:20.10.9-3.el7                     docker-ce-stable
docker-ce.x86_64            3:20.10.8-3.el7                     docker-ce-stable
docker-ce.x86_64            3:20.10.7-3.el7                     docker-ce-stable
docker-ce.x86_64            3:20.10.6-3.el7                     docker-ce-stable
[root@iZgia1btkivmb2Z ~]#

1.6 Select a specific version to install

[root@iZgia1btkivmb2Z ~]# yum install -y docker-ce-3:19.03.9-3.el7.x86_64
已加载插件：fastestmirror
Loading mirror speeds from cached hostfile
正在解决依赖关系
--> 正在检查事务
---> 软件包 docker-ce.x86_64.3.19.03.9-3.el7 将被安装
......
完毕！
[root@iZgia1btkivmb2Z ~]#

1.7 Start Docker

[root@iZgia1btkivmb2Z ~]# systemctl start docker

1.8 Set up auto-start at boot

[root@iZgia1btkivmb2Z ~]# systemctl enable docker

1.9 View version information

[root@iZgia1btkivmb2Z ~]# docker version
Client: Docker Engine - Community
 Version:           20.10.16
 API version:       1.40
 Go version:        go1.17.10
 Git commit:        aa7e414
 Built:             Thu May 12 09:19:45 2022
 OS/Arch:           linux/amd64
 Context:           default
 Experimental:      true
 
Server: Docker Engine - Community
 Engine:
  Version:          19.03.9
  API version:      1.40 (minimum version 1.12)
  Go version:       go1.13.10
  Git commit:       9d988398e7
  Built:            Fri May 15 00:24:05 2020
  OS/Arch:          linux/amd64
  Experimental:     false
 containerd:
  Version:          1.6.4
  GitCommit:        212e8b6fa2f44b9c21b2798135fc6fb7c53efc16
 runc:
  Version:          1.1.1
  GitCommit:        v1.1.1-0-g52de29d
 docker-init:
  Version:          0.18.0
  GitCommit:        fec3683
[root@iZgia1btkivmb2Z ~]#

2 Configure Docker image accelerator

2.1 Log in to Alibaba Cloud to obtain the image accelerator address

Open a browser and visit https://cr.console.aliyun.com/#/accelerator . After logging in, enable the container image acceleration service, and then obtain the image accelerator address.

Insert image description here

2.2 Edit/create new daemon.json file

[root@iZgia1btkivmb2Z ~]# cd /etc/docker
[root@iZgia1btkivmb2Z docker]# vim daemon.json

After adding the image accelerator address in the daemon.json file, click Escthe key and enter to :wqsave and exit.

{
    
    
	"registry-mirrors": ["https://xxxx.mirror.aliyuncs.com"]
}

2.3 Restart Docker

[root@iZgia1btkivmb2Z docker]# systemctl daemon-reload
[root@iZgia1btkivmb2Z docker]# systemctl restart docker

3 Install Docker-Compose

3.1 Run the following command to download Docker Compose (you need to replace v2.6.0 to install other versions)

[root@iZgia1btkivmb2Z docker]# sudo curl -L "https://github.com/docker/compose/releases/download/v2.6.0/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

3.2 Add executable permissions to the downloaded binary file

[root@iZgia1btkivmb2Z docker]# chmod +x /usr/local/bin/docker-compose

3.3 Create soft links

[root@iZgia1btkivmb2Z docker]# ln -s /usr/local/bin/docker-compose /usr/bin/docker-compose

3.4 Check whether the Docker Compose version test is installed successfully

[root@iZgia1btkivmb2Z docker]# docker-compose --version
Docker Compose version v2.6.0

4 Deploy the front end

4.1 Prepare Nginx mounting directory and configuration

Since the host mounting directory configured in docker-compose.yml is

/home/docker/zex-rpp/nginx/html
/home/docker/zex-rpp/nginx/nginx.conf

So first recursively create the /home/docker/zex-rpp/nginx directory, and then create the html directory and nginx.conf configuration file under the nginx directory.

[root@iZgia1btkivmb2Z ~]# mkdir -p /home/docker/zex-rpp/nginx
[root@iZgia1btkivmb2Z ~]# cd /home/docker/zex-rpp/nginx
[root@iZgia1btkivmb2Z nginx]# mkdir html
[root@iZgia1btkivmb2Z nginx]# touch nginx.conf

Then enter nginx.conf and write the following configuration

[root@iZgia1btkivmb2Z nginx]# vim 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  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;
      }
  }
}

4.2 Upload the front-end code to the html directory of Nginx

Before packaging, modify the interface of the front-end calling the back-end.
- axiosConfig.js
```
axios.defaults.baseURL = "http://服务器 IP 地址:8081"
```
Run npm run build to package and get the dist folder
```
D:\AA-zex\zex-rpp\rpp-vue> npm run build
```
Then transfer all files in the dist folder to the html directory through xftp
```
[root@iZgia1btkivmb2Z html]# ls
css  favicon.ico  img  index.html  js
```

5 Deploy the backend

5.1 Packaging backend code

Modify the url of the database configuration in application.yml and change the IP address to mysql.

Insert image description here

Then execute the maven packaging command.

mvn clean package -Dmaven.test.skip=true

Transfer the files targetgenerated in the directory rpp-java-0.0.1-SNAPSHOT.jarto the zex-rpp directory in Linux.

5.2 Writing Dockerfile

FROM java:8

EXPOSE 8081

ADD rpp-java-0.0.1-SNAPSHOT.jar zex-rpp.jar

ENTRYPOINT ["java", "-jar", "/zex-rpp.jar"]

Transfer the file to the zex-rpp directory in Linux.

5.3 Write docker-compose.yml

version: "3"
services:
  nginx:
    image: nginx:latest
    ports:
    - 80:80
    volumes:
    - /home/docker/zex-rpp/nginx/html:/usr/share/nginx/html
    - /home/docker/zex-rpp/nginx/nginx.conf:/etc/nginx/nginx.conf
    privileged: true

  mysql:
    image: mysql:latest
    ports:
    - 3306:3306
    volumes:
    - /home/docker/mysql/log:/var/log/mysql
    - /home/docker/mysql/data:/var/lib/mysql
    - /home/docker/mysql/conf:/etc/mysql/conf.d
    environment:
      - MYSQL_ROOT_PASSWORD=root

  zex-rpp:
    image: zex-rpp:latest
    build: .
    ports:
    - 8081:8081
    depends_on:
      - mysql

Transfer the file to the zex-rpp directory in Linux.

5.4 Orchestration and deployment

[root@iZgia1btkivmb2Z zex-rpp]# ll
total 50360
-rw-r--r-- 1 root root      458 Aug 22 09:50 docker-compose.yml
-rw-r--r-- 1 root root      160 Aug 19 16:10 Dockerfile
drwxr-xr-x 3 root root     4096 Aug 19 15:09 nginx
-rw-r--r-- 1 root root 51552412 Aug 19 16:10 rpp-java-0.0.1-SNAPSHOT.jar

Execute orchestration commands

[root@iZgia1btkivmb2Z zex-rpp] docker-compose up -d

Then use tools such as Navicat to establish a database connection and create databases and data tables.

Insert image description here

Finally, enter the server IP address in the browser to check whether the project is running normally.

Insert image description here