Implementation example of Docker deployment of front-end and back-end separation projects

1. Environmental Preparation

server

Alibaba Cloud Server 1 core + 2GB

software

This deployment uses Docker, so the software environment is on Docker.

We need MySQL 8.0.x, Redis, Nginx, just download the image in advance

2. Run the image

MySQL Installation

I used version 8.0.x of MySQL. Some problems occurred during the deployment process. I would like to share them with you here.

docker run \
-p 3306:3306 \
--name mysql \
--privileged=true \
--restart unless-stopped \
-v /home/mysql8.0.20/mysql:/etc/mysql \
-v /home/mysql8.0.20/logs:/logs \
-v /home/mysql8.0.20/data:/var/lib/mysql \
-v /home/mysql8.0.20/mysql-files:/var/lib/mysql-files \
-v /etc/localtime:/etc/localtime \
-e MYSQL_ROOT_PASSWORD=123456 \
-d mysql:8.0.20 \
--lower_case_table_names=1

Command Explanation:

 -p port mapping --privileged=true Mount file permission setting --restart unless-stopped Set automatic restart of container after startup -v /home/mysql8.0.20/mysql:/etc/mysql Mount configuration file -v /home/mysql8.0.20/logs:/logs \ Mount log -v /home/mysql8.0.20/data:/var/lib/mysql \ Mount data file persistently to the host -v /home/mysql8.0.20/mysql-files:/var/lib/mysql-files MySQL8 needs to synchronize this folder later -v /etc/localtime:/etc/localtime Container time is synchronized with the host -e MYSQL_ROOT_PASSWORD=123456 Set password -d mysql:8.0.20 Background start,mysql
--lower_case_table_names=1 Make MySQL case insensitive (0: case sensitive; 1: case insensitive)

Table XX.QRTZ_LOCKS doesn't exist 的問題occurs before --lower_case_table_names=1 is configured

After searching on Baidu, I found that the configuration of MySQL 5.x and 8.x is slightly different.

PS: MySQL 8.0.2 startup reports Different lower_case_table_names settings for server ('1') and data dictionary ('0').

After installing MySQL 8.0.20, lower_case_table_names=1 was set in my.cnf during initialization, and an error was reported when starting:

as follows

Check the MySQL official documentation, there are records:

lower_case_table_names can only be configured when initializing the
server. Changing the lower_case_table_names setting after the server
is initialized is prohibited.

This is only effective if lower_case_table_names=1 is set during initialization, for example:

--initialize --lower-case-table-names=1

See

https://bugs.mysql.com/bug.php?id=90695

Solving the problem

Make a backup, delete the original MySQL container, re-run MySQL, and add --lower_case_table_names=1 at the end of the command.

Since MySQL 8, this step needs to be set during initialization

Redis Installation

docker run -p 6379:6379 --name redis -v /home/redis/data/:/data -d redis:3.2 redis-server --appendonly yes

Command Explanation

-v /home/redis/data/:/data mount data directory --appendonly yes enable redis persistence

Nginx Installation

Since I needed to mount the directory, I ran the following command

docker run \
-d \
-p 80:80 \
--name nginx \
-v /home/nginx/conf:/etc/nginx \
-v /home/nginx/html:/usr/share/nginx/html \
-v /home/nginx/logs:/var/log/nginx \
nginx

After running, I found that it always exits automatically. After checking the log information and searching on Baidu, I found that the directory to be mounted needs to be created first when nginx is started, otherwise it will exit automatically.

Therefore, we need to create the mount directory first and then run the command

3. Package Project

front end

Modify devServer node mapping port in vue.config.js to be consistent with the backend port

Run the following command:

npm run build:prod

A dist directory will be generated locally

rear end

• Modify application.yml port and file upload path
• Modify logback.xml log generation path log.path
• Modify MySQL and Redis addresses

Run the following command:

mvn clean
mvn package

A jar package is generated under target of ruoyi-admin , which is what we need

IV. Deployment

front end

Configure nginx. I started configuring it under /nginx/conf/conf.d/default.conf , but found that the configuration did not take effect. Later, it was configured under /nginx/conf/conf.d/nginx.conf . The specific configuration is as follows:

 server {
        listen 80;
        server_name localhost; # You can use the server ip instead of location / {
            root /usr/share/nginx/html/dist/;
            index index.html index.htm index login;
            try_files $uri $uri/ /index.html last;
        }
        location /prod-api/ {
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://localhost:7777/; # can be replaced by server ip}
     }

After I deployed it, I found that if I refreshed it in a directory other than the root directory, 404 Not Found error would appear. I found the following solution:

When configuring location, add try_files $uri $uri/ /index.html last;

rear end

I use Dockerfile + jar packaged into a mirror deployment method

Dockerfile

FROM java:8

VOLUME /jiang

ADD ruoyi-admin.jar app.jar

EXPOSE 7777

ENTRYPOINT ["java","-jar","app.jar"]

Create a folder in the server, put Dockerfile 和jar包in it, and run the following command to generate the image

docker build -t ruoyi-vue .

Note: There is one more at the end .

At this point, we just need to run the generated image

docker run -d -p 7777:7777 --name nflj-vue ruoyi-vue

This is the end of this article about the implementation example of Docker deployment of front-end and back-end separation projects. For more related Docker deployment of front-end and back-end separation projects, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!