Use nginx to deploy multiple front-end projects
Personally summarized 3 methods to achieve the deployment of multiple front-end projects using nginx on a server.
- Domain-based configuration
- Port-based configuration
- Based on location configuration
Before the official start, let's take a look at the default configuration file installed by nginx: /etc/nginx/nginx.conf file
As you can see in the picture:, include /usr/nginx/modules/*.confthe function of this sentence is to load all * .conf files in the / usr / nginx / modules / directory at nginx startup. Therefore, in order to facilitate management, we can define our own xx.conf file under this directory. But note that it must end with .conf.
After the introduction, let's first talk about the most commonly used and how many companies use it online.
Domain-based configuration
Based on the domain name configuration, the premise is that the domain name resolution is configured first. For example, if you bought a domain name yourself: www.fly.com. Then you configure 2 second-level domain names in the background: a.fly.com, b.fly.com.
The configuration file is as follows:
- Configure the configuration file of a.fly.com:
vim /usr/nginx/modules/a.conf
server {
listen 80;
server_name a.fly.com;
location / {
root /data/web-a/dist;
index index.html;
}
}
- Configure the configuration file of b.fly.com:
vim /usr/nginx/modules/b.conf
server {
listen 80;
server_name b.fly.com;
location / {
root /data/web-b/dist;
index index.html;
}
}
The advantage of this method is that the host only needs to open port 80. Then, if you visit, you can access the second-level domain name directly.
Port-based configuration
The configuration file is as follows:
- Configure the configuration file of a.fly.com:
vim /usr/nginx/modules/a.conf
server {
listen 8000;
location / {
root /data/web-a/dist;
index index.html;
}
}
# nginx 80端口配置 （监听a二级域名）
server {
listen 80;
server_name a.fly.com;
location / {
proxy_pass http://localhost:8000; #转发
}
}
- Configure the configuration file of b.fly.com:
vim /usr/nginx/modules/b.conf
server {
listen 8001;
location / {
root /data/web-b/dist;
index index.html;
}
}
# nginx 80端口配置 （监听b二级域名）
server {
listen 80;
server_name b.fly.com;
location / {
proxy_pass http://localhost:8001; #转发
}
}
It can be seen that a total of 4 servers are started in this way, and the configuration is far less simple than the first, so it is not recommended.
Based on location configuration
The configuration file is as follows:
- Configure the configuration file of a.fly.com:
vim /usr/nginx/modules/ab.conf
server {
listen 80;
location / {
root /data/web-a/dist;
index index.html;
}
location /web-b {
alias /data/web-b/dist;
index index.html;
}
}
Note: If configured in this way, the location / directory is root, and the other uses alias.
As you can see, the advantage of this method is that we only have one server, and we do not need to configure a second-level domain name. And to configure in the front-end project二级目录
For react configuration please refer to: https://blog.csdn.net/mollerlala/article/details/96427751?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2&utm_source=distribute.pc_relevant.none-task-blog -BlogCommendFromBaidu-2
Please refer to vue configuration: https://blog.csdn.net/weixin_33868027/article/details/92139392