Several methods of deploying multiple front-end projects with nginx

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!

You may also be interested in:
  • Detailed explanation of Nginx configuration required for front-end
  • How to use Nginx to solve front-end cross-domain problems
  • Nginx configuration for front-end development (scenario)
  • Detailed explanation of nginx front-end distribution method based on $remote_addr
  • Detailed explanation of how Nginx solves the problem of cross-domain access to front-end resources
  • Detailed explanation of what nginx can do on the front end

<<:  MySQL optimization: how to write high-quality SQL statements

>>:  A must-read career plan for web design practitioners

Recommend

Web design reference firefox default style

Although W3C has established some standards for HT...

MySQL 5.7 and above version download and installation graphic tutorial

1. Download 1. MySQL official website download ad...

Linux common text processing commands and vim text editor

Today, let's introduce several common text pr...

Solve the problem of PhPStudy MySQL startup failure under Windows system

Report an error The Apache\Nginx service started ...

Detailed explanation of how to monitor MySQL statements

Quick Reading Why do we need to monitor SQL state...

Nginx improves access speed based on gzip compression

1. Why does nginx use gzip? 1. The role of compre...

Detailed Tutorial on Using xargs Command on Linux

Hello everyone, I am Liang Xu. When using Linux, ...

Analysis of the project process in idea packaging and uploading to cloud service

one. First of all, you have to package it in idea...

Nginx configuration based on multiple domain names, ports, IP virtual hosts

1. Type introduction 1.1 Domain-based virtual hos...

mysql indexof function usage instructions

As shown below: LOCATE(substr,str) Returns the fi...

Detailed explanation of DOM style setting in four react components

1. Inline styles To add inline styles to the virt...

Summary of MySQL lock related knowledge

Locks in MySQL Locks are a means to resolve resou...

How to use webSocket to update real-time weather in Vue

Table of contents Preface About webSocket operati...

How to get the real path of the current script in Linux

1. Get the real path of the current script: #!/bi...