The front end of the project uses VUE to draw pages and the back end uses Express to write interfaces. Before deploying a project, do your homework. Package the front-end VUE project NPM Run build to generate a dist folder, and also install nginx. Let’s move on to the following steps:

The first step

Conf file in the nginx installation directory. Use vscode to open this file and add a serve{} to configure the reverse proxy we need. The next step is to write the corresponding Nginx configuration code

The second step

We liked the number 5678, so we opened it up to users on our computer. That is, we use the nginx tool (sentry) to listen on port 5678 of the machine, and when a user accesses this port, we give corresponding feedback.

So the corresponding Nginx code is listen 5678

The third step

Let’s say our computer’s IP is 10.9.26.121, because we’re using our computer as the server to deploy the project.

The corresponding nginx code is server_name 10.9.26.121

The fourth step

When a user accesses our IP port, that is: 10.9.26.121:5678, because the Sentry tool nginx is constantly monitoring this IP port. So when nginx receives an IP port access request, it forwards the request to, or locates the location to, the dist packaged in our front-end VUE project. The dist folder stores the front-end page codes written by us. The code is parsed and executed, and users can see the front-end page. Since the program execution needs to find the corresponding file code location, root is the location where the corresponding front-end packaging code Dist is stored. The dist entry, of course, is index. HTML. The corresponding nginx code is as follows:

location / { 
    root D:/ nginx 1.18.0 /html/personManage/dist; 
    index index.html; 
}
Copy the code

Such as the root is above, I put the vue packaged dist files in this directory location of the computer disk D D: / nginx 1.18.0 / HTML/personManage/dist but note that there is a pit: If we copy the DIST file location directly in the file address bar, the copy result is not correct. Error operation as shown below:

We ended up copying to this address: D:\nginx-1.18.0\ HTML \personManage, if we put this address directly after root, nginx will display 500 Internal Server Error. In this case, nginx can recognize that the solution is:

Modified into: D: / nginx 1.18.0 / HTML/personManage/dist (like using backslash \ after all the Windows, but only use forward slashes/nginx)

Step 5

And because the front-end Vue project ajax interaction cross-domain solution uses the Proxy in the devServer in vue.config.js, so nginx also needs a location to deal with the front-end cross-domain request forwarding problem. Therefore, the cross-domain forwarding prefix in proxy must be consistent with the cross-domain forwarding prefix in Nginx, so that page interface interaction can be normal. The illustration is as follows:

Final Nginx code

# personManage project history Routing mode server {listen5678; # for users to use5678Port and listen on server_name10.926.121.; The IP address of the local server is10.926.121.client_max_body_size 100m; Try_files $uri $uri/ /index.html; try_files $uri $uri # Resolve the history routing pattern in VUE, refresh the page after deployment404Hash routing does not require root D:/ nginx 1.18.0 /html/personManage/dist; Dist: dist: dist: dist: dist: dist: dist {# handle front-end cross-domain forwarding requests # Our back-end Express service is enabled on the port9999So here it is forwarded to this address proxy_pass HTTP:/ / 10.9.26.121:9999 /;Proxy_set_header Host $Host; proxy_set_header Host $Host proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $remote_addr; }}Copy the code

Back-end Express enables port 9999, code:

App.listen (9999, (req,res) => {console.log(' localhost://9999')})

Step 6

Since we are using the Express framework in Node, not the Springboot framework in Java, we don’t need a JAV package, we just need to use the PM2 plug-in in Express to manage our back-end projects.

6.1 Installing the PM2 globally

npm install -g pm2

6.2 Starting the Express Project using the PM2

We started the Express project using the command Node app.js, but there were limitations, so we used the pm2 plug-in to manage the express project at the back end. Pm2 has powerful functions, including starting the project after startup, stopping the project, process management, load balancing, log viewing and other functions, while Node app.js can only start the project, so it is more convenient to use PM2.

After installing pm2 globally, we can execute pm2 -v command to check the version number, which indicates that we have installed successfully, and then execute pm2 start app.js to start the project. The following figure shows that our service is started and users can access it normally

conclusion

This is how nginx deploys a Vue + Express project. If you want to learn more about how to use the PM2 plug-in, you can go to the PM2 website. Attached is a portal: m2. Keymetrics. IO /