1. Background

Deploy vue to dev server

R2R_Web_Api adopts a separate front-end and back-end deployment, but the dev environment is deployed on the same machine

2. Process

login server

I won't go into details here

Install NGINX

Install the compiler and dependent library files

yum -y install make zlib zlib-devel gcc gcc-c++ libtool  openssl openssl-devel pcre pcre-devel

Download NGINX to local

cd /usr/local && wget http://nginx.org/download/nginx-1.21.4.tar.gz

Unzip the installation package

tar zxvf nginx-1.21.4.tar.gz

Enter the nginx directory to install

cd nginx-1.21.4

./configure --prefix=/usr/local/nginx --with-http_stub_status_module --with-pcre  --with-http_ssl_module

make && make install

Check if the installation is successful

/usr/local/nginx/sbin/nginx -v

Configure NGINX

Find and enter the configuration page

vim /usr/local/nginx/conf/nginx.conf

Change setting

Notice:

root refers to the path where the front-end project is compiled and stored, here our path is /home/r2r/web
index refers to which specific page to locate, just write as shown in the figure
server_name refers to the project access path, the default is localhost, just write the ip of the server here
listen refers to the listening port, here is 8888

open port firewall

Check if the port you want to open is open: firewall-cmd --query-port=8888/tcp
Add the specified port that needs to be opened: firewall-cmd --add-port=8888/tcp --permanent
Reload added ports: firewall-cmd --reload
Query whether the specified port is opened successfully: firewall-cmd --query-port=8888/tcp
Remove the specified port: firewall-cmd --permanent --remove-port=8888/tcp

Configure reverse proxy

Or modify it in nginx.conf

vue package

package vue

The outputDir set in this project is '../www/WebApiDemo', find this local path, and drop everything under WebApiDemo to the root address configured in nginx.conf, this project is /home/r2r/web

start/restart NGINX

Specify the configuration file to start

/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

stop-nginx

/usr/local/nginx/sbin/nginx -s stop

Restart NGINX

/usr/local/nginx/sbin/nginx -s reload

access

Just ip+port, here we are http://192.168.1.40:8888/

3. References

Install NGINX under Centos 7: Install NGINX under Centos 7 - Programmer Sought

Deploy the vue project to the server: Deploy the vue project to the server_Cwiyc's blog-CSDN blog_vue deploy to the server

Command to view the open port number of the firewall in linux: Command to view the open port number of the firewall in linux - Programmer Az's Blog - CSDN Blog

Use nginx reverse proxy to realize the packaging and deployment of vue project online: use nginx reverse proxy to realize the packaging and deployment of vue project online - Programmer Sought