Basic use of Nginx and deployment of front-end projects

Preface

I have recently learned about Nginx and compiled a blog. The main reference is Kuangshenshuo’s video tutorial on site b. The link to the article is as follows:Crazy Godshuo Nginx Quick Start a>


1. Download and start Nginx

1. Download Nginx

Go toNginx official and choose the stable version suitable for your computer to download. I downloaded the Windows version.
Insert image description here
After downloading, there will be a compressed package. You need to create a folder to store the decompressed nginx content (note: it is best not to contain Chinese in the folder where Nginx is stored, otherwise an error will be reported). The decompressed content is as follows:
Insert image description here

What we often use in the future is the conf configuration file.

2. Start Nginx

Win+R, run cmd, switch to the directory where nginx is decompressed:
Insert image description here
You can view the nginx.conf file in the conf directory.
Insert image description here
Open it with Notepad, you can see that its default port is port 80, and the default access domain name is localhost. That is to say, as long as you access port 80 in the future, it will be intercepted by Nginx.
Insert image description here
Next, open the browser, enter http://localhost:80 and press Enter. If the following content appears, Nginx has started successfully!
Insert image description here
You can also see that nginx is running in the task manager.
Insert image description here

3. Commonly used commands

强制停止nginx:nginx -s stop
安全退出nginx:nginx -s quit
重新加载配置文件:nginx -s reload (如果修改了配置文件就执行这行命令,否则修改就是无效的。前提:nginx服务是启动的状态,否则reload是不成功的。)

2. Analysis of nginx.conf configuration file

The top one is the global configuration; events is the maximum number of connections; there are some small modules in http, such as static resource file configuration, in which multiple servers can be configured, and the server can configure different services, such as location, such as load balancing configuration upstream.
Insert image description here

1. Configure reverse proxy

For example: modify the nginx.conf configuration file and configure proxy_pass in location to point to the YSL official website.

// 这行代码就说明请求会代理到 https://www.yslbeautycn.com
proxy_pass  https://www.yslbeautycn.com 

Insert image description here

Note:
proxy_pass is followed by a space
After writing a configuration item, it needs to end with a semicolon;

After modifying the nginx.conf configuration file, runnginx -s reload
and enter http://localhost:80 in the browser and press Enter. You will find that the YSL official website appears.
Insert image description here

2. Load balancing upstream

In a bunch of servers, Nginx can "evenly" distribute client requests to these servers. This is load balancing.

Scenario: If there are many requests and one server is too busy, multiple servers need to work together. If we have a 100G server, a 64G server, and a 16G server, we hope to achieve more requests to the 100G server and fewer requests to the 16G server. This is the function of load balancing.

Commonly used methods:

  • Polling
    "Polling" will distribute the client's requests to different backend servers in a loop. Polling is prone to problems with unreasonable resource allocation.
    Insert image description here
    Assuming there are three servers, you can use the upstream block in the nginx.conf file to define these three servers; then configure the proxy_pass directive in the location to point to the upstream name. It is written as follows:
    Insert image description here

  • Weighted polling
    is used in clusters with different server performance to make resource allocation more reasonable.
    Insert image description here
    The better the server performance, the higher the weight; the worse the performance, the lower the weight. (权重weight)
    As shown in the figure above: If there are many requests, then a large number of requests will go to the third server with a weight of 4, only part of which The request will only go to the server with a weight of 1, which ensures that the server is not overloaded. The higher the weight, the more requests there are; in this way, the server performance can be maximized. Even a small server can be put online for use, which will save costs.
    You can set different weights of the server through weight. The writing method is as follows:
    Insert image description here
    优点:分布式处理,提升网络的灵活性、稳定性,使得服务器性能最大化。

3. Deploy front-end projects on Nginx

The Vue project needs to be packaged. Just run npm run build for the packaged project. After the packaging is completed, there will be an additional dist directory in the project. My project here is called demo.
We copy and paste the contents of the dist directory under the demo project into the html directory under the nginx directory, and delete the contents of the original html under nginx.
Insert image description here
The effect is like this:
Insert image description here
The configuration file is still the default port 80, and localhost is opened. Run: start nginx, you can see that the vue project runs successfully.
Insert image description here


Summarize

The above is the Nginx-related content I want to share.

Guess you like

Origin blog.csdn.net/m0_52043522/article/details/130701034