记录一下 Windows nginx 前端代码部署；

在现代web开发中，前端与后端的分离已成为了一种趋势。我们常常将前端应用程序部署到一个服务器上，如Nginx，而后端应用程序则部署到另外的服务器。本文将详细介绍如何在Windows环境下使用Nginx部署前端代码。

1. 准备环境

首先，我们需要确保在Windows系统上安装了Nginx。可以从Nginx官网下载最新的Windows版本。下载后，解压缩至合适的位置，比如 C:\nginx。

2. 准备前端代码

假设你有一个Vue.js或React等框架构建的前端项目，经过构建之后会生成一个供生产环境使用的静态文件。一般来说，这些静态文件会放在 dist 或 build 目录中。

以Vue.js为例，构建命令通常为：

npm run build

构建完成后，产出的文件通常位于 dist 目录中。

3. 配置Nginx

接下来，需要配置Nginx以服务于前端代码。我们需要编辑Nginx的配置文件 nginx.conf，该文件位于 C:\nginx\conf\nginx.conf。打开该文件并根据以下示例进行修改：

http {
    server {
        listen       80;  # 监听80端口
        server_name  localhost;  # 服务器名称

        location / {
            root   C:/path/to/your/dist;  # 修改为你项目的静态文件路径
            index  index.html index.htm;  # 设置默认首页
            try_files $uri $uri/ /index.html;  # 处理SPA路由
        }

        error_page  404 /404.html;  # 自定义404页面
        location = /404.html {
            internal;
        }
    }
}

在上述配置中，root指令指定了静态文件的路径，try_files指令用于处理单页面应用（SPA）的路由，确保未定义的路由返回index.html。

4. 启动Nginx

完成配置后，我们可以启动Nginx。在命令行中执行以下命令：

cd C:\nginx
start nginx

如果Nginx已成功启动，你应该可以在浏览器中访问 http://localhost/，看到你的前端应用。

5. 进阶配置

有时我们需要配置HTTPS或者反向代理等。可以在同一个 server 块内添加SSL配置，或者创建新的server块。以下是一个简单的HTTPS配置示例：

server {
    listen 443 ssl;
    server_name localhost;

    ssl_certificate     C:/path/to/ssl/cert.pem;  # SSL证书路径
    ssl_certificate_key C:/path/to/ssl/key.pem;   # SSL私钥路径

    location / {
        root   C:/path/to/your/dist;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

6. 总结

通过以上步骤，我们已经在Windows平台上成功配置了Nginx来服务于我们的前端应用。在日常开发及部署过程中，Nginx不仅能提供高效的静态文件服务，还能够进行负载均衡、反向代理等多种操作，是一个非常强大的工具。当然，一旦项目需要增加更多的功能，Nginx配置也可以进一步扩展和优化。

希望这篇文章能够帮助你在Windows下成功部署前端代码。若遇到问题，请检查Nginx的错误日志，通常可以在 C:\nginx\logs\error.log中找到相关信息。