Requirements: When the project goes online, it is necessary to deploy the front-end foreground and back-end on the server for users to use, and deploy it on different servers and install nginx directly on the server. However, the installation on the intranet is still a bit troublesome because it needs to be connected to the Internet. If it is an intranet, you can refer to Linux to install Nginx and deploy front-end projects [Internal/External Network - Nanny Level Tutorial]_MXin5's blog-CSDN blog . For the same server, you need to write an article in the configuration file, so follow the following operations to deploy two front-end projects using Nginx in the Linux/Windows environment.
In the following, I use my own computer windows system to demonstrate. The main thing is the configuration file, which is not difficult. You can change the configuration file for Linux.
windows deployment
1. First package the front-end project you need to deploy into a dist package (the Linux environment needs to be packaged into a tar package for decompression, and there is a tutorial in the link above)
2. Place the dist package directly under html under the nginx installation directory in Windows.
3. Modify the configuration file nginx.conf in the conf directory
3.1 Configuration file nginx.conf (a server module represents the HTTP server configured with a virtual host (Vritual Host).), I wrote two server modules (two virtual hosts) below, one listening port is 3000. One port is 3001, representing the monitoring port numbers of the foreground and background respectively, pay attention to modify the storage path of the dist in the root inside, the monitoring port number and location .
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
#定义一个新的 server 块，表示该 HTTP 服务器配置了一个虚拟主机（Vritual Host）。
server {
#add
client_max_body_size 10m;
#监听端口 80，这是 HTTP 服务器的默认端口。
listen 3000;
#指定该虚拟主机的域名是 localhost。在实际生产环境中，您需要输入实际域名。
server_name frontend;
#输入localhost：3000直接访问前端的index首页
location / {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
if ($request_method = 'OPTIONS') {
# 禁止OPTIONS
return 204;
}
root ./html/frontend; #前端dist文件存储的位置D:/xxx/nginx-1.22.0/html/dist ./html/dist(必须是dist的相对路径)
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
#定义一个新的 server 块，表示该 HTTP 服务器配置了一个虚拟主机（Vritual Host）。
server {
client_max_body_size 10m;
listen 3001;
server_name backend;
location / {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
if ($request_method = 'OPTIONS') {
# 禁止OPTIONS
return 204;
}
root ./html/backend;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
include servers/*;
}
4. Start nginx for testing
5 Test localhost:3000 and localhost:3001.
Problems that may be encountered during deployment
Deploy the two front-end projects according to the above method, and after starting nginx, it is found that both projects have started successfully. However, when accessing, it always shows that the connection fails or the connection times out. At this time, use the curl ip address:port number (for example: localhost:3000) to access again. If you can access it, it means that there is no problem with the deployment, but the problem with the firewall . Then just turn off the firewall, the following is how to turn off the firewall process.
1windows check whether the startup is successful
2Linux to check whether it is successful
Enter the netstat -tpln command to view
3. Check whether the firewall is enabled
In the Linux operating system, you can use the following command to check whether the firewall is currently enabled:
sudo systemctl status firewalld
If it is displayed in the output active (running), it means that the firewall is enabled; if it is displayed inactive (dead), it means that the firewall is disabled.
If the firewall is not enabled, you can use the following command to enable the firewall:
sudo systemctl start firewalld
If the firewall is already enabled, you can use the following command to disable the firewall:
sudo systemctl stop firewalld
If you want to start the firewall automatically when the system starts, you can use the following command:
sudo systemctl enable firewalld
If you want to disable the firewall from starting automatically, you can use the following command:
sudo systemctl disable firewalld4. You can turn off the firewall through the above command to turn off the firewall, so that the items that you could not access before can now be accessed.