Docker deploys front-end and back-end separation projects

Table of contents

Tool preparation

Tool connection

Table of contents

 Tool preparation

Tool connection

Install Docker

Deploy MySQL database

Deploy backend services 

Deploy front-end services


 Tool preparation

        ​​​A cloud server, Alibaba Cloud, Baidu Cloud, or Tencent Cloud can be used.

        A remote connection tool, either Xshell or finalshell.

        Local database, Navicat, mysqlworkbench, or even idea can be used.

This article uses Baidu cloud server, finalshell and navicat.

Tool connection

        Open finalshell

Install Docker

1. Uninstall the old version (if it is a new server, you do not need to perform this step)

sudo yum remove docker \
                  docker-client \
                  docker-client-latest \
                  docker-common \
                  docker-latest \
                  docker-latest-logrotate \
                  docker-logrotate \
                  docker-engine

2. Installationyum-utils toolkit

sudo yum install -y yum-utils

3. Set up Alibaba Cloud warehouse

sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

4. Update dependencies (switch to the directory you want to install, or create a new directory)

sudo yum update

5. Install docker (latest version)

sudo yum install docker-ce docker-ce-cli containerd.io

6. Verify whether the installation is successful

docker version

7. Start docker

sudo systemctl start docker

Deploy MySQL database

1. Use docker to run the mysql image

 docker run --name test-mysql -p 3310:3306 -e MYSQL_ROOT_PASSWORD=root -d mysql

test-mysql:容器名
mysql:镜像名
-p 3310:3306:把服务器的3310端口映射到容器的3306端口,后面通过3310端口访问数据库
MYSQL_ROOT_PASSWORD=root:设置root账户的密码为root

View the image you just created

2. Enter the test-mysql container

docker exec -it test-mysql bash

3. Log in to the root account and enter the password

mysql -uroot -p

4. Grant the root account permission to connect to all databases from the outside.

GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' WITH GRANT OPTION;

//如果只想赋予某个数据库的外部访问权限,就把*.*改成sqlname.*

FLUSH PRIVILEGES;  //让该设置生效

输入exit退出镜像
输入exit退出容器

5. Open navicat to connect to the database

New connection

 Create a new database

Import sql file

Deploy backend services 

1. 1. Use maven package to package the project, find the jar package in the generated target folder, and upload the jar package to any directory on the cloud server.

2. Create a new directory in any directory and upload the jar package to the directory

3. Create a Dockerfile in the directory where the jar package is stored.

cd /home/crm-backend

touch Dockerfile

 The contents of the Dockerfile file are as follows:

FROM java:8
VOLUME /tmp
ADD *.jar /app.jar
EXPOSE 56000
 
RUN sh -c 'touch /app.jar'
ENV JAVA_OPTS=""
ENTRYPOINT [ "sh", "-c", "java $JAVA_OPTS -Djava.security.egd=file:/dev/./urandom -jar /app.jar" ]

4. Create the crm-backend image in the directory containing the jar package and Dockerfile file.

docker build -t crm-backend .

//把crm-backend改成你想要起的镜像名

5. Create the crm-backend container and run the crm-backend image (the image name can be the same as the container name). Specify that the port of the image running on the server and the container is 56000.

docker run -d -p 56000:56000 --name crm-backend crm-backend

Deploy front-end services

1. Modify the configuration in the front-end configuration file

2. In idea, click on the front-end project name, right-click, select open in terminal, execute npm run build in the terminal, and then the dist folder will be generated in the directory.

3. Create a new folder anywhere on the server and upload the dist folder to the folder.

4. Create the default.conf file in the same directory of this dist

The content of the file is as follows (remember to delete the # comment):

server {
    listen       8092;    #前端在容器里运行的端口号
    server_name  182.61.132.29;   #服务器的IP地址

    location /admin/ {
      proxy_pass http://182.61.132.29:56000;     #后端服务的地址
    }
    
#    location / {
#        root   /usr/share/nginx/html;
#        index  index.html index.htm;
#        try_files $uri $uri/ /index.html =404;
#    }

	location / {
	        root   /usr/share/nginx/html;
	        index  index.html;
	        try_files $uri $uri/ /index.html;
	}
 
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

5. Create a new Dockerfile file in the same directory with the following content:

# 基础镜像使用Nginx
FROM nginx
# 作者
MAINTAINER hxx
# 添加时区环境变量,亚洲,上海
ENV TimeZone=Asia/Shanghai
# 将前端dist文件中的内容复制到nginx目录
COPY dist  /usr/share/nginx/html/
# 用本地的nginx配置文件覆盖镜像的Nginx配置
COPY default.conf /etc/nginx/conf.d
# 声明容器内部要监听的端口
EXPOSE 8092

6. Then create the crm-front container

docker build -t crm-front .

7. Create and run the crm-front image

docker run -d -p 8092:8092 --name crm-front crm-front

8. Check the operation status

docker ps

9. Open the browser and enter the front-end address to access the front-end. Success. (If the front end cannot access the back end, it is possible that the nignx reverse proxy is invalid. Please refer to my other article. The nginx reverse proxy is invalid and the front end cannot obtain the data of the back end. The front and back ends Unable to connect

Guess you like

Origin blog.csdn.net/weixin_51451545/article/details/132915024