Seamless integration: One-click deployment of front-end and back-end separation projects to quickly build powerful containerized applications

One-click deployment of front-end and back-end separation projects to quickly build powerful containerized applications

Article directory

  • One-click deployment of front-end and back-end separation projects to quickly build powerful containerized applications
    • About the author
      • 1. Search for nginx mirror
      • 2. Pull the nginx image
      • 3. Run the image
      • 4. Create a new directory `nginx` under the `/home/` directory
      • 5. Copy the nginx configuration file to the host directory to prepare for file mapping (direct mapping will cause errors)
      • 6. Stop running containers and delete containers
      • 7. Restart the container (map the corresponding directory file)
      • 8. Publish the Vue project
        • vue pathRewrite does not take effect after buil packaging
      • 9. Configure nginx
    • firewall commands
  • doker installation database
      • 1. Pull the Mysql image version
      • 2. Start the Mysql mirror
      • 3. Configure Mysql remote link
  • The backend generates DockerFile packaging image

About the author

  • about the author

Blog homepage: Author homepage

Introduction: A high-quality creator in the field of JAVA, a newcomer to the workplace, who participated in various provincial and national competitions during school and won a series of honors

Follow me: Follow me. All learning materials and document downloads are available. Articles are updated regularly every day to inspire you to become a senior JAVA programmer?

In today’s software development world, front-end and back-end separation projects are extremely popular. They are favored by developers for their flexibility, maintainability, and scalability. At the same time, the rise of containerization technology also provides new possibilities for project deployment and management. In this article, we will explore how to use Docker containerization technology to quickly and efficiently deploy front-end and back-end separation projects. By packaging the front-end and back-end into independent containers, we can achieve rapid deployment, flexible expansion, and better resource isolation. No need to worry about dependency conflicts or environment configuration issues, we will complete the entire deployment process with one click. Next, let’s learn more about how to use Docker to build a powerful containerized application for front-end and back-end separation projects!

1. Search nginx mirror

docker search nginx

image-20221108195229659

2. Pull nginx image

docker pull nginx:latest

Check out the pulled image

docker images

image-20221108195254243

3. Run the image

docker run -d --name zsrnginx -p 80:80 -p 443:443 nginx:latest

Check the running status:

docker ps

image-20221108195333779

4. Create a new directory nginx

under the /home/ directory

mkdir /home/nginx
cd /home/nginx

5. Copy the nginx configuration file to the host directory to prepare for file mapping (direct mapping will cause errors)

nginx configuration file, html file, logs log file

docker cp 42928253c136:/etc/nginx/nginx.conf /home/nginx/
docker cp 42928253c136:/etc/nginx/conf.d /home/nginx/conf/
docker cp 42928253c136:/usr/share/nginx/html /home/nginx/html
docker cp 42928253c136:/var/log/nginx/ /home/nginx/logs/

6. Stop running the container and delete the container

docker stop 42928253c136

image-20221108195611820

docker rm 42928253c136

7. Restart the container (map the corresponding directory file)

docker run -d --name zsrnginx -p 8088:8088 -p 443:443 -v /home/nginx/nginx.conf:/etc/nginx/nginx.conf -v /home/nginx/logs:/ var/log/nginx -v /home/nginx/html:/usr/share/nginx/html -v /home/nginx/conf:/etc/nginx/conf.d --privileged=true -e TZ=Asia/ Shanghai nginx:latest

Check the running status:

docker ps

image-20221108195741356

8. Publish Vue project

npm install
npm run build

#Generate a dist file in the project directory after the operation is completed

image-20221109150719763

image-20221109150826068

vue pathRewrite does not take effect after build packaging

vue.js – Does the Vue proxy setting no longer take effect after packaging?

9. Configure nginx

image-20221109151323410

After the configuration is completed, access through ip + port number.

image-20221109151503777

Firewall commands

#1. Check whether the firewall is enabled
firewall-cmd --state

#2. Check whether port 8080 is started:
firewall-cmd --permanent --zone=public --list-ports

#3. Open port 8080:
firewall-cmd --zone=public --add-port=8080/tcp --permanent

#4. Restart the protection wall
firewall-cmd --reload

#5. Verify whether port 8080 is valid
firewall-cmd --zone=public --query-port=8080/tcp

#The default Linux system default firewall in #Centos 7 is not iptables, but firewall. At this time, you should use the following method to turn off the firewall.

#Open, restart, and close the firewalld.service service
service firewalld start #Open

service firewalld restart #restart

service firewalld stop #Close

systemctl disable firewalld.service #Disable firewall startup

doker installation database

1. Pull the Mysql image version

docker pull mysql:8.0

docker images

2. Start Mysql mirror

docker run -itd --name mysql-8 -p 3306:3306 -e MYSQL_ROOT_PASSWORD=MySQL password that needs to be set mysql:8.0

Parameter Description:

  • -name mysql-8: The name of the created container
  • -p 3306:3306: Maps the 3306 port of the container service to the 3306 port of the host. The external host can directly access the MySQL service through host ip:3306.
  • MYSQL_ROOT_PASSWORD=The mysql password that needs to be set: Set the password of the MySQL service root user
  • mysql:8.0: The image used, that is, image name: tag (version)

After startup: Use the command docker ps to view

3. Configure Mysql remote link

# Enter the mirror
docker exec -it mysql-8 /bin/bash

# Log in to Mysql
mysql -u root -p

#Switch database
use mysql

# Set up remote access
select host,user,plugin from user;
 + ----------- + ------------------ + ------------------ ----- +
| host | user | plugin |
 + ----------- + ------------------ + ------------------ ----- +
| % | root | caching_sha2_password |
| localhost | mysql.infoschema | caching_sha2_password |
| localhost | mysql.session | caching_sha2_password |
| localhost | mysql.sys | caching_sha2_password |
| localhost | root | mysql_native_password |
 + ----------- + ------------------ + ------------------ ----- +
# You need to modify the configuration here to allow remote login
delete from user where user ='root' and host='%';

# Set all hosts to be accessible
update user set host='%' where user ='root';

# Modify encryption method
ALTER USER 'root'@'%' IDENTIFIED WITH mysql_native_password BY 'Password to be modified';

# Refresh takes effect
FLUSH PRIVILEGES;

The backend generates DockerFile packaging image

Disable maven’s test (select test, click lightning), and the mysql connection configuration needs to be modified to the server’s ip port and password.

image-20221109155546910

# Packaging completed
[INFO] --- spring-boot-maven-plugin:2.1.2.RELEASE:repackage (repackage) @exam ---
[INFO] Replacing main artifact with repackaged archive
[INFO] -------------------------------------------------- --------------------------
[INFO] BUILD SUCCESS
[INFO] -------------------------------------------------- --------------------------
[INFO] Total time: 15.112 s
[INFO] Finished at: 2022-11-09T10:46:57 + 08:00
[INFO] -------------------------------------------------- --------------------------

# Put the target-generated jar package into the linux folder
#Go to root directory
mkdir /home/zsr
#Enter the folder
cd zsr #Put the jar package into the folder

# Create a new file Dockerfile file
touch Dockerfile

# Edit Dockerfile
vimDockerfile

# Dockerfile file content
FROM java
VOLUME /tmp
ADD exam-0.0.1-SNAPSHOT.jar exam.jar
EXPOSE 8080 #Port exposed to the outside world? The names of these two places must be consistent
ENTRYPOINT ["java","-jar","/exam.jar"]

# Mirror build build
docker build -f DockerFile -t exam .

# Run container
docker run -itd --name exam -p 8080:8080 exam:latest

Through the study of this article, we learned how to use Docker containerization technology to deploy front-end and back-end separation projects. We learned to package the front end and back end into independent containers, achieving rapid deployment, flexible expansion and better resource isolation. Using Docker, we can easily solve dependency conflicts and environment configuration problems, greatly improving the efficiency of development and deployment. Whether in a local development environment or a production environment, Docker provides us with an elegant and efficient solution. I hope this article will help you understand and apply the value of Docker in front-end and back-end separation project deployment. Build more powerful, reliable applications in a containerized world.

references:

Docker deploys front-end and back-end separation projects

Docker install Mysql 8.0

Docker deploys Vue project