Several methods of deploying multiple front-end projects with nginx

I have summarized 3 methods to deploy multiple front-end projects on one server using nginx.

• Domain name based configuration
• Port-based configuration
• Based on location configuration

Before we start, let's take a look at the default configuration file for nginx installation: /etc/nginx/nginx.conf file

You can see in the figure: include /usr/nginx/modules/*.conf , the purpose of this sentence is to load all *.conf files in the /usr/nginx/modules/ directory when nginx starts. Therefore, for the convenience of management, we can define our own xx.conf file under this directory. But note that it must end with .conf.

Now that the introduction is over, let’s talk about the most commonly used method that many companies use online.

Domain name based configuration

Based on domain name configuration, the premise is that domain name resolution has been configured first. For example, you bought a domain name: www.fly.com. Then you configured two of its second-level domain names in the background: a.fly.com and b.fly.com.

The configuration files are 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 you can access it by directly accessing the second-level domain name.

Port-based configuration

The configuration files are 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 port 80 configuration (listening to the secondary domain name a)
server {
        listen 80;
        server_name a.fly.com;
        
        location / {
                proxy_pass http://localhost:8000; #Forward}
}

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 port 80 configuration (listening to the b secondary domain name)
server {
        listen 80;
        server_name b.fly.com;
        
        location / {
                proxy_pass http://localhost:8001; #Forward}
}

As you can see, this method starts a total of 4 servers, and the configuration is far less simple than the first one, so it is not recommended.

Based on location configuration

The configuration files are 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: When configured in this way, the location / directory is the root, and the others must use aliases.

As you can see, the advantage of this method is that we only have one server, and we do not need to configure a secondary domain name. And二級目錄should be configured in the front-end project

For react configuration, please refer to: https://blog.csdn.net/mollerlala/article/details/96427751

For vue configuration, please refer to: https://blog.csdn.net/weixin_33868027/article/details/92139392

This concludes this article about several methods of deploying multiple front-end projects with nginx. For more information about deploying multiple front-end projects with nginx, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!