前端开发使用nginx做web服务

1. Nginx简介

Nginx 是一个高性能的 HTTP 和反向代理服务器，以其稳定性、丰富的功能集、简单的配置文件和低资源消耗而闻名。在前端开发中，Nginx 常被用来作为静态文件服务器、负载均衡器以及反向代理服务器。

2. 使用场景

2.1 静态文件服务器

Nginx 可以高效地提供静态文件，如 HTML、CSS、JavaScript 等。

2.2 反向代理

Nginx 可以作为反向代理服务器，将客户端请求转发到后端服务器，并将响应返回给客户端。

2.3 负载均衡

Nginx 可以通过 upstream 指令实现负载均衡，将请求分发到多个后端服务器。

2.4 SSL/TLS 终端

Nginx 可以处理 HTTPS 请求，提供 SSL/TLS 加密，保护数据传输安全。

2.5 缓存

Nginx 可以缓存静态文件和动态内容，减少后端服务器的负载，提高响应速度。

3. 常用命令

3.1 启动Nginx

nginx

3.2 停止Nginx

arduino 复制代码

nginx stop

3.3 重启Nginx

nginx restart

3.4 重新加载配置

nginx -s reload

3.5 查看状态

lua 复制代码

nginx status

3.6 查看错误日志

lua 复制代码

tail -f /var/log/nginx/error.log

3.7 查看访问日志

bash 复制代码

tail -f /var/log/nginx/access.log

4. 基本配置

4.1 端口

80：HTTP 默认端口。
443：HTTPS 默认端口。
其他自定义端口：可以根据需要配置其他端口。

4.2 服务名称

example.com：域名或子域名。
localhost：本地主机。

4.3 路径匹配规则

Nginx 使用 location 指令来定义路径匹配规则。location 指令支持精确匹配、前缀匹配、正则表达式匹配等多种方式。

4.3.1 精确匹配

精确匹配是指完全匹配指定的路径。

示例

ini 复制代码

server {
    listen 80;
    server_name example.com;

    location = /exact {
        root /var/www/exact;
        index index.html;
    }
}

location = /exact { ... }：精确匹配 /exact 路径。

4.3.2 前缀匹配

前缀匹配是指匹配以指定前缀开头的路径。

示例

ini 复制代码

server {
    listen 80;
    server_name example.com;

    location /prefix {
        root /var/www/prefix;
        index index.html;
    }
}

location /prefix { ... }：匹配以 /prefix 开头的所有路径。

4.3.3 正则表达式匹配

Nginx 支持使用正则表达式进行路径匹配。正则表达式匹配有两种形式：~（区分大小写）和 ~*（不区分大小写）。

示例

ini 复制代码

server {
    listen 80;
    server_name example.com;

    location ~ ^/regex/([a-z]+)$ {
        root /var/www/$1;
        index index.html;
    }

    location ~* .(jpg|jpeg|png|gif|ico)$ {
        root /var/www/images;
        expires max;
    }
}

location ~ ^/regex/([a-z]+)$ { ... }：匹配 /regex/some_lowercase_string 路径，并将 some_lowercase_string 作为变量 $1 使用。
location ~* .(jpg|jpeg|png|gif|ico)$ { ... }：匹配所有以 .jpg, .jpeg, .png, .gif, .ico 结尾的文件，不区分大小写。

4.3.4 内部重定向

内部重定向是指在 Nginx 内部将一个请求重定向到另一个路径，而不改变客户端的 URL。

示例

csharp 复制代码

server {
    listen 80;
    server_name example.com;

    location /old-path {
        internal;
        alias /var/www/new-path;
    }

    location /new-path {
        root /var/www;
        index index.html;
    }
}

location /old-path { ... }：内部重定向到 /var/www/new-path。

4.3.5 URL 重写

URL 重写是指根据规则修改客户端请求的 URL，并继续处理新的 URL。

示例

bash 复制代码

server {
    listen 80;
    server_name example.com;

    location /old-url {
        rewrite ^/old-url/(.*)$ /new-url/$1 break;
    }

    location /new-url {
        root /var/www;
        index index.html;
    }
}

rewrite ^/old-url/(.*)$ /new-url/$1 break;：将 /old-url/something 重写为 /new-url/something，并停止进一步的重写处理。

4.3.6 返回特定状态码

可以使用 return 指令返回特定的状态码和消息。

示例

arduino 复制代码

server {
    listen 80;
    server_name example.com;

    location /maintenance {
        return 503 "Service Temporarily Unavailable";
    }
}

return 503 "Service Temporarily Unavailable";：返回 503 状态码和自定义消息。

4.4 Gzip 压缩

Gzip 压缩可以减少传输的数据量，提高页面加载速度。

示例

bash 复制代码

http {
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
    gzip_vary on;
}

gzip on;：启用 gzip 压缩。
gzip_types ...;：指定需要压缩的 MIME 类型。
gzip_vary on;：添加 Vary: Accept-Encoding 头，帮助缓存服务器区分不同编码的版本。

跨域

4.5 配置跨域请求

在Nginx中配置跨域资源共享（CORS）是为了允许Web应用从一个域访问另一个域的资源。你提供的代码片段已经包含了基本的CORS配置，下面是对这段配置的详细介绍：

bash 复制代码

server {
    listen 80;
    server_name example.com;

    location /api/ {
        # 允许所有来源的请求
        add_header 'Access-Control-Allow-Origin' '*';

        # 允许的HTTP方法
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

        # 允许的请求头
        add_header 'Access-Control-Allow-Headers' 'Origin, Content-Type, Accept, Authorization';

        # 处理预检请求（OPTIONS方法）
        if ($request_method = 'OPTIONS') {
            # 允许所有来源的请求
            add_header 'Access-Control-Allow-Origin' '*';

            # 允许的HTTP方法
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

            # 允许的请求头
            add_header 'Access-Control-Allow-Headers' 'Origin, Content-Type, Accept, Authorization';

            # 预检请求的有效期
            add_header 'Access-Control-Max-Age' 1728000;

            # 设置响应内容类型为纯文本
            add_header 'Content-Type' 'text/plain charset=UTF-8';

            # 设置响应长度为0
            add_header 'Content-Length' 0;

            # 返回204 No Content状态码
            return 204;
        }
    }
}

详细说明

add_header 'Access-Control-Allow-Origin' '*';

- 这个指令设置了允许访问资源的源（域名）。*表示允许所有来源的请求。如果你只想允许特定的域名，可以将其替换为具体的域名，例如 https://example.com。

add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

- 这个指令指定了允许的HTTP方法。在这个例子中，允许GET、POST和OPTIONS方法。OPTIONS方法用于预检请求，以确定实际请求是否可以安全地发送。

add_header 'Access-Control-Allow-Headers' 'Origin, Content-Type, Accept, Authorization';

- 这个指令定义了服务器允许的请求头。客户端在实际请求中可以使用的自定义请求头必须在此列出。

if ($request_method = 'OPTIONS') { ... }

- 这个条件块用于处理预检请求。当浏览器检测到一个跨域请求需要特殊的头信息或方法时，它会先发送一个OPTIONS请求来检查服务器是否允许这个请求。
- 在这个块中，我们再次设置了允许的源、方法和头信息，并添加了一个Access-Control-Max-Age头，指定预检请求的结果可以被缓存的时间（这里是2天，即1728000秒）。
- 最后，返回一个204 No Content状态码，表示服务器成功处理了预检请求，但没有返回任何内容。

注意事项

安全性 ：使用'*'作为Access-Control-Allow-Origin的值可能会带来安全风险，因为它允许所有来源的请求。建议根据实际情况限制允许的来源。
复杂请求 ：对于复杂的跨域请求（例如带有自定义头或使用PUT、DELETE等方法的请求），浏览器会先发送一个OPTIONS预检请求。确保正确配置预检请求的处理逻辑。
缓存：Access-Control-Max-Age头可以减少预检请求的数量，从而提高性能。合理设置这个值可以平衡性能和安全性。

通过以上配置，你可以有效地处理跨域请求，确保前端应用能够安全地与后端API进行交互。

4.6 配置缓存

Nginx可以作为反向代理服务器，利用缓存机制提高响应速度。

ini 复制代码

http {
    proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=my_cache:10m max_size=1g inactive=60m use_temp_path=off;

    server {
        listen 80;
        server_name example.com;

        location /static/ {
            alias /data/static/;
            expires 1d;
            add_header Cache-Control "public";
        }

        location / {
            proxy_pass http://backend;
            proxy_set_header Host $host;
            proxy_cache my_cache;
            proxy_cache_valid 200 301 302 10m;
            proxy_cache_valid 404 1m;
        }
    }
}

`Cache-Control` 指令详解

add_header Cache-Control "public";

- 这个指令设置了 Cache-Control 头为 public。
- public: 表示响应可以被任何缓存存储，包括共享缓存（如CDN）。这是最常用的设置之一，适用于静态资源。

expires 1d;

- 这个指令设置了资源的过期时间，即资源在缓存中有效的时间长度。
- 1d: 表示资源将在1天后过期。过期后，缓存将不再使用该资源，而是重新请求服务器获取最新的版本。
- expires 指令通常与 Cache-Control 结合使用，以确保一致的缓存行为。

`Cache-Control` 常见指令

除了 public，Cache-Control 还有许多其他指令，可以组合使用以实现更复杂的缓存策略。以下是一些常见的 Cache-Control 指令及其含义：

private

- 表示响应只能被单个用户缓存，不能被共享缓存存储。
- 示例: Cache-Control: private

no-cache

- 表示每次使用缓存前必须先验证资源的新鲜度。
- 示例: Cache-Control: no-cache

no-store

- 表示不允许缓存响应的任何部分。
- 示例: Cache-Control: no-store

max-age=<seconds>

- 表示资源在缓存中的最大有效时间（以秒为单位）。
- 示例: Cache-Control: max-age=3600（1小时）

s-maxage=<seconds>

- 类似于 max-age，但仅适用于共享缓存。
- 示例: Cache-Control: s-maxage=3600

must-revalidate

- 表示缓存必须在使用前验证资源的新鲜度。
- 示例: Cache-Control: must-revalidate

proxy-revalidate

- 类似于 must-revalidate，但主要用于代理缓存。
- 示例: Cache-Control: proxy-revalidate

结合 `proxy_cache_valid` 使用

在你的配置中，proxy_cache_valid 指令用于指定不同状态码的缓存有效期：

ini 复制代码

proxy_cache_valid 200 301 302 10m;
proxy_cache_valid 404 1m;

proxy_cache_valid 200 301 302 10m;

- 对于状态码为 200、301 和 302 的响应，缓存有效期为10分钟。

proxy_cache_valid 404 1m;

- 对于状态码为 404 的响应，缓存有效期为1分钟。

示例：更详细的 `Cache-Control` 配置

以下是一个更详细的 Cache-Control 配置示例，结合了多个指令：

bash 复制代码

location /static/ {
    alias /data/static/;
    expires 1d;
    add_header Cache-Control "public, max-age=86400, immutable";
}

location / {
    proxy_pass http://backend;
    proxy_set_header Host $host;
    proxy_cache my_cache;
    proxy_cache_valid 200 301 302 10m;
    proxy_cache_valid 404 1m;
    add_header Cache-Control "public, max-age=600, must-revalidate";
}

immutable

- 表示资源在其生命周期内不会改变，可以永久缓存。
- 示例: Cache-Control: public, max-age=86400, immutable

must-revalidate

- 表示缓存必须在使用前验证资源的新鲜度。
- 示例: Cache-Control: public, max-age=600, must-revalidate

总结

通过合理配置 Cache-Control 头，可以有效地控制资源的缓存行为，提高网站的性能和响应速度。根据不同的资源类型和需求，可以灵活组合使用各种 Cache-Control 指令。

5. Include 文件

include 指令用于引入其他配置文件，这有助于将复杂的配置拆分成更小、更易于管理的部分。

5.1 引入站点配置

假设 /etc/nginx/sites-available/ 目录下有多个站点配置文件，如 example1.com 和 example2.com，可以在主配置文件中使用 include 指令引入这些站点配置文件。

示例

bash 复制代码

http {
    ...
    include /etc/nginx/sites-enabled/*;
    ...
}

5.2 引入自定义配置片段

有时，为了提高配置的可重用性和可维护性，可以将一些通用的配置片段（如日志格式、缓存设置等）提取到单独的文件中，然后在主配置文件或其他配置文件中使用 include 指令引入这些片段。

示例

假设有一个自定义的日志格式配置文件 /etc/nginx/conf.d/log_format.conf，内容如下：

dart 复制代码

log_format custom '$remote_addr - $remote_user [$time_local] '
                  '"$request" $status $body_bytes_sent '
                  '"$http_referer" "$http_user_agent"';

可以在主配置文件中使用 include 指令引入这个日志格式配置文件：

bash 复制代码

http {
    include /etc/nginx/conf.d/log_format.conf;

    access_log /var/log/nginx/access.log custom;
    ...
}

5.3 引入SSL配置

对于SSL/TLS配置，也可以将其提取到单独的文件中，以便于管理和更新。

示例

假设有一个SSL配置文件 /etc/nginx/conf.d/ssl.conf，内容如下：

ini 复制代码

ssl_protocols TLSv1.2 TLSv1.3;
ssl_ciphers 'ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256';
ssl_prefer_server_ciphers on;

可以在站点配置文件中使用 include 指令引入这个SSL配置文件：

ini 复制代码

server {
    listen 443 ssl;
    server_name example.com;

    include /etc/nginx/conf.d/ssl.conf;

    ssl_certificate /etc/ssl/certs/example.com.crt;
    ssl_certificate_key /etc/ssl/private/example.com.key;

    root /var/www/example.com;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}

6. 代理和 Upstream

6.1 反向代理配置

以下是一个反向代理的配置示例：

ini 复制代码

server {
    listen 80;
    server_name example.com;

    location /api/ {
        proxy_pass http://backend_server;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    location / {
        root /var/www/example.com;
        index index.html;
    }
}

proxy_pass http://backend_server;：将请求转发到后端服务器。
proxy_set_header Host $host;：设置请求头中的 Host 字段。
proxy_set_header X-Real-IP $remote_addr;：设置请求头中的客户端真实 IP 地址。

6.2 Upstream 配置

以下是一个负载均衡的配置示例：

ini 复制代码

upstream backend_servers {
    server backend1.example.com;
    server backend2.example.com;
}

server {
    listen 80;
    server_name example.com;

    location /api/ {
        proxy_pass http://backend_servers;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    location / {
        root /var/www/example.com;
        index index.html;
    }
}

upstream backend_servers { ... }：定义后端服务器池。
proxy_pass http://backend_servers;：将请求转发到后端服务器池。

7. 示例配置

以下是一个综合示例，展示了如何使用 Nginx 进行静态文件服务、反向代理、负载均衡和 gzip 压缩。

7.1 主配置文件 (`/etc/nginx/nginx.conf`)

ini 复制代码

user nginx;
worker_processes auto;
pid /run/nginx.pid;

events {
    worker_connections 1024;
}

http {
    include /etc/nginx/mime.types;
    default_type application/octet-stream;

    log_format main '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';

    access_log /var/log/nginx/access.log main;
    error_log /var/log/nginx/error.log warn;

    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;
    keepalive_timeout 65;
    types_hash_max_size 2048;

    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
    gzip_vary on;

    include /etc/nginx/conf.d/*.conf;
    include /etc/nginx/sites-enabled/*;
}

7.2 自定义日志格式 (`/etc/nginx/conf.d/log_format.conf`)

dart 复制代码

log_format custom '$remote_addr - $remote_user [$time_local] '
                  '"$request" $status $body_bytes_sent '
                  '"$http_referer" "$http_user_agent"';

7.3 SSL配置 (`/etc/nginx/conf.d/ssl.conf`)

ini 复制代码

ssl_protocols TLSv1.2 TLSv1.3;
ssl_ciphers 'ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256';
ssl_prefer_server_ciphers on;

7.4 站点配置 (`/etc/nginx/sites-available/example.com`)

ini 复制代码

server {
    listen 80;
    server_name example.com;

    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl;
    server_name example.com;

    include /etc/nginx/conf.d/ssl.conf;

    ssl_certificate /etc/ssl/certs/example.com.crt;
    ssl_certificate_key /etc/ssl/private/example.com.key;

    root /var/www/example.com;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }

    location /api/ {
        proxy_pass http://backend_servers;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

upstream backend_servers {
    server backend1.example.com;
    server backend2.example.com;
}

7.5 符号链接

创建符号链接以启用站点配置：

bash 复制代码

sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/

8. 总结

Nginx 是一个强大且灵活的工具，适用于多种前端开发场景。通过合理的配置，可以有效地提高网站的性能和可用性。希望本文档能帮助你在前端开发中更好地使用 Nginx。

前端开发使用nginx做web服务

1. Nginx简介

2. 使用场景

2.1 静态文件服务器

2.2 反向代理

2.3 负载均衡

2.4 SSL/TLS 终端

2.5 缓存

3. 常用命令

3.1 启动Nginx

3.2 停止Nginx

3.3 重启Nginx

3.4 重新加载配置

3.5 查看状态

3.6 查看错误日志

3.7 查看访问日志

4. 基本配置

4.1 端口

4.2 服务名称

4.3 路径匹配规则

4.3.1 精确匹配

示例

4.3.2 前缀匹配

示例

4.3.3 正则表达式匹配

示例

4.3.4 内部重定向

示例

4.3.5 URL 重写

示例

4.3.6 返回特定状态码

示例

4.4 Gzip 压缩

示例

4.5 配置跨域请求

详细说明

注意事项

4.6 配置缓存

Cache-Control 指令详解

Cache-Control 常见指令

结合 proxy_cache_valid 使用

示例：更详细的 Cache-Control 配置

总结

5. Include 文件

5.1 引入站点配置

示例

5.2 引入自定义配置片段

示例

5.3 引入SSL配置

示例

6. 代理和 Upstream

6.1 反向代理配置

6.2 Upstream 配置

7. 示例配置

7.1 主配置文件 (/etc/nginx/nginx.conf)

7.2 自定义日志格式 (/etc/nginx/conf.d/log_format.conf)

7.3 SSL配置 (/etc/nginx/conf.d/ssl.conf)

7.4 站点配置 (/etc/nginx/sites-available/example.com)

7.5 符号链接

8. 总结

`Cache-Control` 指令详解

`Cache-Control` 常见指令

结合 `proxy_cache_valid` 使用

示例：更详细的 `Cache-Control` 配置

7.1 主配置文件 (`/etc/nginx/nginx.conf`)

7.2 自定义日志格式 (`/etc/nginx/conf.d/log_format.conf`)

7.3 SSL配置 (`/etc/nginx/conf.d/ssl.conf`)

7.4 站点配置 (`/etc/nginx/sites-available/example.com`)