静态资源

在本节中，我们将以一个纯前端站点使用 Vue 框架为例，介绍如何在 Nginx 中处理静态文件和配置静态资源的location。

1. 创建 Vue 项目

首先，假设您已经创建了一个使用 Vue 框架构建的前端项目。我们的目标是通过 Nginx 服务器来提供这个前端站点的静态资源。

2. 配置 Nginx

首先，我们需要将前端站点的静态资源部署到 Nginx 的文件目录下。通常，Nginx 默认的静态资源目录是 /usr/share/nginx/html。我们可以将 Vue 项目的构建产物（通常在 dist 目录下）复制到这个目录：

sudo cp -r /path/to/vue/project/dist/* /usr/share/nginx/html/

3. 配置 Nginx 的 Server 块

接下来，我们需要在 Nginx 的配置文件中，针对我们的前端站点创建一个 server 块，并配置相应的 location 指令。

server {
    listen 80;
    server_name your_domain.com;

    # 静态资源位置
    location / {
        root /usr/share/nginx/html;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
}

• listen: 监听的端口号，通常为 80。

• server_name: 指定您的前端站点的域名。

在上面的示例中，我们使用了 location / 来匹配所有请求，并将其映射到 /usr/share/nginx/html 目录下，也就是我们之前部署 Vue 项目的位置。try_files 指令用于尝试匹配请求的文件，如果文件不存在，则将请求导向到 /index.html，这对于前端单页应用（SPA）来说非常重要，因为它们通常依赖于一个主页面。

大部分场景中，会进行部分静态资源缓存

server {
    listen 80;
    server_name your_domain.com;

    # 配置缓存
    location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
        root /usr/share/nginx/html;
        expires 7d;
    }

    # 静态资源
    location / {
        root /usr/share/nginx/html;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
}

在上面的示例中，我们使用了 location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ 来匹配图片、CSS 和 JavaScript 文件，并配置了缓存过期时间为 7 天 (expires 7d;)。这样，这些静态资源将被缓存在客户端，提高网站性能。而其他请求会匹配到 location / 块，根据需要处理其他静态资源和动态请求。

4. 重启 Nginx

完成配置后，我们需要重启 Nginx 服务器以使配置生效：

sudo nginx -s reload

5. 测试

现在，您可以通过在浏览器中访问您的域名来测试您的前端站点是否可以正常工作。Nginx 将会处理静态资源并将其提供给用户。

在本节中，我们学习了如何在 Nginx 中处理前端静态资源。我们配置了 Nginx 的 location 指令，使其映射到 Vue 项目的构建产物，并成功将前端站点提供给用户。接下来，在下一节中，我们将探讨如何在 Nginx 中处理动态请求，以及使用反向代理和负载均衡来提升应用性能。