Article directory
Nginx is a high-performance HTTP and reverse proxy server, which can be used to deploy front-end projects, provide static file services, load balancing, caching and other functions. This article will introduce how to use Nginx to deploy front-end projects.
1. Install Nginx
First, you need to install Nginx, which can be compiled and installed through source code, or installed through a package manager. For example, you can use the following command to install under Ubuntu:
sudo apt-get update
sudo apt-get install nginx
Once installed, Nginx can be started with the following command:
sudo systemctl start nginx
2. Configure Nginx
The configuration file of Nginx is located at /etc/nginx/nginx.conf, which can be opened and edited with a text editor. Configuration items that need to be modified include:
- server: Define a virtual host to handle client requests.
- location: Define the URL path of the request and the corresponding processing method.
- root: Specify the root directory of the website, which is the package output directory of the front-end project.
For example, the following is a simple Nginx configuration file:
http {
server {
listen 80;
server_name example.com;
location / {
root /var/www/example/dist;
index index.html;
}
}
}
In the above configuration, port 80 is monitored. When requesting example.com, the request will be forwarded to the /var/www/example/dist directory and the index.html file will be returned.
3. Package the front-end project
Before deploying the front-end project, it needs to be packaged first. Typically, front-end projects are packaged using tools such as Webpack to convert source code into static files. The packaged files are generally stored in the dist directory.
4. Deploy the front-end project
Copy the packaged front-end project file to the root directory of the website specified by Nginx (such as the /var/www/example/dist directory in the above configuration file). Visit example.com in your browser to see the page of the front-end project.
5. HTTPS configuration
If you need to use the HTTPS protocol to provide secure access, you need to configure HTTPS. The following is a simple HTTPS configuration example:
http {
server {
listen 80;
server_name example.com;
location / {
root /var/www/example/dist;
index index.html;
}
return 301 https://$server_name$request_uri;
}
server {
listen 443 ssl;
server_name example.com;
ssl_certificate /path/to/cert.pem;
ssl_certificate_key /path/to/key.pem;
location / {
root /var/www/example/dist;
index index.html;
}
}
}
In the above configuration, port 80 is listened to first, and HTTP requests are redirected to the HTTPS protocol. Then listen on port 443 and use the SSL certificate to provide HTTPS services.
It should be noted that the SSL certificate needs to be purchased from a CA or generated by yourself, and you can use tools such as Certbot to automatically obtain a free certificate. In addition, port 443 of the firewall needs to be opened to allow external access to HTTPS services.
6. Load balancing
If the front-end project needs to handle a large number of concurrent requests, a single Nginx instance may not be able to meet the demand. At this time, you can use the load balancing function of Nginx to distribute requests to multiple Nginx instances to improve system performance and availability.
The following is an example of a simple load balancing configuration:
http {
upstream backend {
server 127.0.0.1:8080;
server 127.0.0.1:8081;
server 127.0.0.1:8082;
}
server {
listen 80;
server_name example.com;
location / {
proxy_pass http://backend;
}
}
}
In the above configuration, upstream is used to define a load balancing server group named backend, which contains three Nginx instances. Then use proxy_pass in the server to forward the request to any Nginx instance in the backend group.
It should be noted that the configuration of load balancing needs to take into account the session retention and request forwarding strategies between multiple Nginx instances to ensure that requests can be correctly distributed to each instance and session information can be correctly shared between instances.
7. Caching
Nginx can also act as a cache server, improving application performance. When an application processes static resources or dynamic pages, Nginx can cache these resources to avoid repeated calculations and network transmissions.
Here is an example of a simple cache configuration:
http {
proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=my_cache:10m inactive=60m;
server {
listen 80;
server_name example.com;
location / {
proxy_pass http://backend;
proxy_cache my_cache;
proxy_cache_valid 200 60m;
}
}
}
In the above configuration, proxy_cache_path is used to define a cache path named my_cache, and the cache expiration time is set to 60 minutes. Then use proxy_cache in the location of the server to specify the use of the my_cache cache group, and use proxy_cache_valid to set the validity period of the cache.
It should be noted that the cache configuration needs to take into account the cache cleanup and update strategy to prevent cache data from being expired or misused.
Summarize
This article introduces seven common uses of Nginx, including reverse proxy, static file serving, dynamic content acceleration, HTTP caching, HTTPS secure access, load balancing, and caching. These uses are based on Nginx's efficient network I/O model and flexible configuration language, which can help developers better optimize the performance and availability of web applications.