Small Hub guide:

How are front-end and back-end separated projects deployed? Look at this article, immediately understand ha, there is a supporting video to explain, hee hee, remember a key three!

Project review

I have recorded a video before, and now it has been viewed more than 80,000 times. Haha, thank you for your recognition. You can follow my B station, named MarkerHub, and the public account with the same name.

In fact, I think I have recorded a very detailed, maybe everyone’s level is not the same, some people think I have a lot of clear, and some people do experiments according to the video synchronization, but also all the way to the pit, I can not expect this haha. To be honest, the process of doing my own experiment went quite smoothly.

Some students raised a question about how to package and deploy a Vue front-end separation project. So today, let’s learn how to deploy our Vueblog project quickly and easily!

Here is the vueblog project video address:

Name: [actual] Based on SpringBoot+Vue development before and after the separation of blog project complete teaching (vueblog)

Video: www.bilibili.com/video/BV1PQ…

Documents: juejin. Im/post / 684490…

Online demos: www.markerhub.com:8084/blogs

Video deployment

www.bilibili.com/video/BV17A…

tool

  • Xshell 6 green crack version: pay attention to the public number: JavaCat, reply to xshell to obtain
  • Navicat 11 Simplified Chinese version: follow the public account: JavaCat, reply to Navicat to get

Preparations before going online

Here we synchronously demonstrate how to deploy to win environment and Linux (Centos7) system. The front-end server is deployed with Nginx, and docker is used to centrally manage the front-end and back-end servers.

So we use:

  • nginx
  • docker compose

Hope you see the video before a little basic ha, of course, this deployment is relatively simple, do not need to be very proficient, generally watching my video should be able to deploy successfully ha.

Don’t say much, get right into it! Don’t forget to give me a key triple ha, by the way, follow me B station, thank you!

1. Win environment

I will use the machine to demonstrate the WIN environment. We need to package the front and back end respectively. The front and back end packaging is only one command, but we need to configure the environment parameters on the line before packaging.

1.1, the front-end

In axios.js, we will configure the link. In axios.js, we will configure the link. In axios.js, we will configure the link.

  • src\axios.js
axios.defaults.baseURL = "http://localhost:8081"
Copy the code

The above configuration is the front-end access to the back-end interface services. Then there is the front end deployment: the project resource reference path after packaging, such as whether we need the project name with the link after packaging, etc. Following the official Vue deployment instructions, we added a vue.config.js file,

  • vueblog-vue/vue.config.js
module.exports = {
  publicPath: '/'
}
Copy the code

Of course, publicPath is empty by default, which is publicPath: “. The effect is the same, ha ha ha, I’m just reminding you of this. After that, we execute the package command:

# Pack command NPM run buildCopy the code

After the command is executed, we can find a dist directory in the project root directory, this is the folder after packaging, there is an index. HTML, but we click to open directly, we can not see any content, at this time, we need to deploy to nginx.

First let’s download nginx, nginx.org/en/download… Here we download nginx/Windows-1.18.0 and then unzip the zip. According to our familiarity with Nginx, we put static files under the HTML folder, so first delete the index.html and 50x.html in the HTML folder, and then copy all files in the packaged dist folder to the HTML of Nginx, as shown in the figure:

Double-click nginx.exe to start nginx, and then enter http://localhost in your browser. The familiar interface appears. Although there is no blog data, the link automatically jumps to http://localhost/blogs.

We click on any link or button or refresh the interface, and a 404 appears:

Nginx will not be able to find the route to the vue project. This is why nginx will not be able to find the route to the vue project. The entry to the vue project is the index. HTML file, and nginx will have to go through this file first. Read the index. HTML first, then route. So let’s configure the nginx.conf file. Try_files uriuri uriURI / /index.html last; As follows:

  • Nginx 1.18.0 / conf/nginx. Conf
location / {
    root   html;
    try_files $uri $uri/ /index.html last;
    index  index.html index.htm;
}
Copy the code

What does this one line of code mean? Syntax rules for try_files are as follows: Format 1: try_files file… Uri: searches for existing files in the specified file order and processes the request using the first file found. Last: matches the last file if no match is found.

After nginx restarts, the link will refresh normally. But there’s no data, so let’s go and deploy the back end. I usually open the task manager to kill the nginx process directly, and then double-click again ~~

1.2, the back end

The SQL files are already installed in vueblog-Java resources directory. The SQL files are also in vueblog-Java resources directory. The SQL files are also in vueblog-Java resources directory.

The spring-boot-maven-plugin plugin is commented out in the pom. XML file, so make sure you open it now. Otherwise executing the JAR will not find the main class.

  • pom.xml

Execute the package command:

MVN clean package - dmaven.test. skip=trueCopy the code

Get vueblog-0.0.1-snapshot. jar under target, and then execute the command

Java jar vueblog - 0.0.1 - the SNAPSHOT. Jar -- spring. Profiles. The active = defaultCopy the code

After the back end is online, we visit the front end again and find that we can browse the web normally! Spring.profiles. Active specifies the environment profile.

2. Linux environment

Linux deployment is a bit more complicated because we have to deploy Redis, mysql, etc. I have published a video before about the deployment of a traditional blog project, Eblog, which uses a Docker container, but we do not have Docker compose for orchestration. This time, we use Docker compose for orchestration of our services, so as to complete the deployment together.

For example, for example, docker compose, and docker compose are used for the installation of docker, for example, docker compose, and docker compose.

Install Docker

[root@localhost opt]# docker --version docker version 1.13.1, Build 7f2769b/1.13.1 # Start systemctl start dockerCopy the code

Install Docker Compose

You can refer to: docs.docker.com/compose/ins…

Sudo curl - L "https://github.com/docker/compose/releases/download/1.27.4/docker-compose-$(uname - s) - $(uname -m)" - o /usr/local/bin/docker-compose # sudo chmod +x /usr/local/bin/docker-compose #Copy the code

2.3. Write the Dockerfile file

Because our project needs to become the image of Docker, we must first write a Dockerfile file to build our project image and then orchestrate it. Dockerfile file can help us build.

  • Dockerfile
FROM Java :8 EXPOSE 8080 ADD vueblog-0.0.1 -snapshot.jar app. Jar RUN bash -c 'touch /app. Jar 'ENTRYPOINT [" Java ", "-jar", "/app.jar", "--spring.profiles.active=pro"]Copy the code

The following commands are simple: first of all, rely on jdk8 environment to exposed 8080, and then copy vueblog-0.0.1-snapshot. jar to docker container and name it app.jar. Finally, execute the command Java -jar /app.jar –spring.profiles.active=pro, using an additional online environment configuration that we wrote.

  • application-pro.yml
# DataSource Config spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/vueblog? useUnicode=true&useSSL=false&characterEncoding=utf8&serverTimezone=Asia/Shanghai username: root password: Admin shiro-redis: enabled: true redis-manager: host: 127.0.0.1:6379Copy the code

Later, we need to modify some configurations of information such as redis and mysql link in application-pro.yml, which need to be paid attention to.

Write docker-compose. Yml file

We need to use nginx, mysql, Redis, and our SpringBoot project, so write the following:

  • docker-compose.yml
Version: "3" services: nginx: # image: nginx:latest # mount - / root/nginx/HTML: / usr/share/nginx/HTML/root/nginx/nginx. Conf: / etc/nginx/nginx. Conf ring: Mysql: image: mysql:5.7.27 ports: -3306 :3306 environment: Redis: image: redis:latest vueblog: image: vueblog:latest build: . # said in the current directory Dockerfile began to build the mirror ports: - 8081:8081 depends_on: # in mysql, redis, actually could not fill in, the default may have said - mysql - redisCopy the code

Above meaning, I explained with annotation, hope can say clear! In nginx, we mount the nginx static resource folder and the configuration file nginx.conf, so we put the packaged files in the host directory **/root/nginx/ HTML **

2.5. Modify application-pro.yml

The link between mysql and redis is localhost. The link between mysql and redis is localhost. The link between mysql and redis is localhost. Docker Compose solves this problem for us. We can use the service name of the mirror container to represent the link. For example, in docker-compose. Yml, the mysql service is called mysql and redis is called redis.

So we end up with a configuration file like this:

2.6. Prepare the nginx mount directory and configuration

Docker-compose. Yml already mentioned,

  • The mount directory on the host is /root/nginx/ HTML
  • Mount configuration: /root/nginx-nginx.conf

So we create a new nginx directory in the root directory, and go to the nginx directory to create an HTML directory and a nginx.conf configuration file.

Then write the nginx.conf, the specific configuration is as follows:

  • 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; }}}Copy the code

2.7 upload front end

After the front-end packaging, first modify the interface of the front-end calling the back-end, because I am a virtual machine, so the configuration is as follows:

  • axios.js
Axios. Defaults. BaseURL = "http://192.168.0.117:8081"Copy the code

thennpm run buildPack to getdistFolder, and compress dist into dist. Zip. Upload it to Linux and decompress it to **/root/nginx/ HTML ** directory. The diagram below:

2.8. Deploy the backend

With everything in place, we’ll start arranging the deployment.

First, the vueblog project is locally packaged, vueblog-0.0.1-snapshot. jar, and upload to Linux. At the same time, docker-compose. As shown in the figure:

Then we execute the choreography command:

CD ~ docker-compose up -dCopy the code

-d indicates the background service

Then we’ll wait a little while, especially when starting Building vueblog, it may take a little longer, just be patient!

The final tip is as follows:

That means we’ve already choreographed it.

Nginx is port 80, so we enter the IP address directly.

This is easy because we haven’t created our database yet. Next, let’s manually create the database and import the SQL files.

  • vueblog-java/src/main/resources/vueblog.sql

Then refresh the browser link again, the data is out, done, easy!

3. Conclusion

Ok, the deployment is complete, don’t forget a key three, pay attention to my B station MarkerHub, public name, ha ha.