nginx前端配置(新)

最新推荐文章于 2025-04-17 00:34:57 发布

原创最新推荐文章于 2025-04-17 00:34:57 发布 · 533 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#nginx #前端 #运维

nginx 专栏收录该内容

14 篇文章

订阅专栏

基础配置

server {
    listen 80;
    server_name your-frontend-domain.com;

    # 根目录为前端网页文件所在目录
    root /path/to/your/frontend/files;

    # 默认文档（例如 index.html）
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;   #try_files 指令用于处理前端路由，以便将所有请求重定向到 index.html，这对于单页应用程序（SPA）非常有用
    }

    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 30d;    #配置静态文件的缓存时间
        add_header Cache-Control "public, max-age=2592000";在响应头中添加 Cache-Control 标头，告诉客户端浏览器可以缓存响应内容，最长时间为2592000秒
    }

    # 可以添加其他资源的处理规则，如字体文件等
}

关于add_header还可以添加其它标头

添加安全标头

add_header X-Content-Type-Options "nosniff";
add_header X-Frame-Options "SAMEORIGIN";
add_header X-XSS-Protection "1; mode=block";

如禁止浏览器嗅探内容类型（X-Content-Type-Options）以及点击劫持保护（X-Frame-Options）等

添加自定义标头

add_header X-My-Custom-Header "Hello, World!";

这会在响应头中添加一个自定义标头 X-My-Custom-Header 并将其值设置为 "Hello, World!"

不同客户端使用不同的项目文件

server {
    listen 80;
    server_name your-frontend-domain.com;

    location / {
        root /opt/static/pc;
        if ($http_user_agent ~* '(mobile|android|iphone|ipad|phone)') {   #判断变量中的客户端参数是否是移动端，是的话使用以下静态资源路径
           root /opt/static/mobile;
        }
        index index.html;
        try_files $uri $uri/ /index.html;   #try_files 指令用于处理前端路由，以便将所有请求重定向到 index.html，这对于单页应用程序（SPA）非常有用
    }

}

ssl配置与重定向配置

server {
    listen 80;
    server_name your-website.com;
    return 301 https://$server_name$request_uri;
}
server {
  listen                      443 ssl;
  server_name                 your-website.com;
  ssl_certificate             /etc/nginx/ssl/your-website.crt;
  ssl_certificate_key         /etc/nginx/ssl/your-website.key;
  ssl_session_timeout         10m;
  ssl_ciphers                 ECDHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384;
  ssl_protocols               TLSv1 TLSv1.1 TLSv1.2;
  ssl_prefer_server_ciphers   on;   #如果启用此选项，Nginx会优先使用服务器端支持的密码套件，而不是客户端提供的首选密码套件。这通常是安全的，因为它强制使用服务器配置中的密码套件，以最大程度地确保安全性。但是，这可能会导致某些老旧客户端无法连接，因为它们的密码套件不被服务器所支持
  ssl_session_timeout 1d;    #选配，此配置定义了SSL会话超时的时间。在示例中，它设置为1天，这意味着SSL会话将在1天后过期。过期的会话可能需要重新建立，以提高安全性
  ssl_session_cache shared:SSL:10m;   #选配，这个配置定义了用于存储SSL会话信息的缓存大小和存储位置。在示例中，它使用了共享内存缓存（shared memory cache）来存储SSL会话。这有助于加快SSL握手的速度，因为会话数据可以在客户端和服务器之间重用
  ssl_session_tickets off;   #选配，这个配置用于控制是否启用SSL会话票据（session tickets）。在示例中，它被设置为 off，表示禁用SSL会话票据。启用会话票据允许客户端和服务器之间的会话信息跨多个SSL连接重用，以提高性能
  add_header Strict-Transport-Security "max-age=31536000; includeSubdomains" always;  #选配，使用HTTP Strict Transport Security 头增加了安全性，强制客户端在一年内使用HTTPS与您的网站通信
    
  location / {
    root                    /project/xxx;
    index                   index.html index.htm index.md;
    try_files               $uri $uri/ /index.html;
  }
}

静态文件压缩


server {
    # 开启gzip 压缩
    gzip on;
    # 设置gzip所需的http协议最低版本 （HTTP/1.1, HTTP/1.0）
    gzip_http_version 1.1;
    # 设置压缩级别，压缩级别越高压缩时间越长  （1-9）
    gzip_comp_level 4;
    # 设置压缩的最小字节数， 页面Content-Length获取
    gzip_min_length 1000;
    # 设置压缩文件的类型  （text/html)
    gzip_types text/plain application/javascript text/css;
}