【前端部署】通过 Nginx 让局域网用户访问你的纯前端应用

在日常前端开发中，我们常常需要快速将本地的应用展示给局域网内的同事或测试人员，而传统的共享方式往往效率不高。本文将指导你轻松地将你的纯前端应用（无论是 Vue, React, Angular 或原生项目）部署到本地，并配置局域网访问。

本文仅展示最简单的部署

一、准备工作

1. 拥有一个纯前端应用：
   • 可以是 Vue, React, Angular 或原生 HTML/CSS/JS 项目。
   • 确保应用已经通过 npm run build (或类似命令) 打包生成了静态文件 (通常在 dist 或 build 目录下)。本文用的是生成的dist文件。
2. 安装 Nginx：
   • Windows: 从 Nginx 官网下载稳定版，解压即可。
   • (可选) Linux/Mac: 简述包管理器安装命令 (如 apt install nginx, brew install nginx)。
   • 验证 Nginx 是否安装成功 (启动 Nginx，访问 http://localhost)。
3. 了解你的本地 IP 地址：
   • Windows: ipconfig 命令。
   • Linux/Mac: ifconfig 或 ip addr 命令。

二、配置Nginx

2.1 新建项目文件夹

为方便管理，你可以在 Nginx 的安装目录下创建一个专门存放Web应用的文件夹。

例如，如果你的 Nginx 解压在 D:\nginx：

1. 在 D:\nginx 目录下新建 html 文件夹 (如果Nginx解压后自带了此目录，可直接使用)。
2. 在 D:\nginx\html 中再创建一个项目名文件夹，例如 lowcode。
3. 将你前端项目打包生成的 dist 文件夹整个放入 D:\nginx\html\lowcode\ 中。
   最终 dist 文件夹的路径示例：D:\nginx\html\lowcode\dist

2.2 修改nginx.conf

配置示例

# ...默认代码
http {#...默认代码server {listen       8012; # 监听端口，避免与常用的8080等端口冲突server_name  localhost;location /lowcode/ { # 配置低代码应用的访问路径alias   D:/nginx/html/lowCode/dist/; # 指定低代码应用的静态文件路径index  index.html index.htm; # 指定默认页面try_files $uri $uri/ /lowcode/index.html; # 对于单页面应用 (SPA)，此配置确保刷新或直接访问子路由时能正确加载}#...默认代码}
}

2.3 启动与测试nginx

1. 启动 Nginx (Windows 为例)：
   • 执行 start nginx 或 nginx.exe。
2. 常用 Nginx 命令：
   • nginx -s stop: 停止nginx
   • nginx -s reload: 重新加载配置文件 (修改配置后使用)
   • nginx -t: 测试配置文件是否有语法错误
3. 本地及局域网测试：
   • 本机测试： 在浏览器中访问 http://localhost:访问端口/访问路径/。
   • 局域网测试： 在同一局域网内的其他设备上，浏览器访问 http://你的本机IP地址:访问端口/访问路径/ (例如 http://192.168.1.105:8012/lowcode/)。
   • 确认应用能正常显示和操作。

三、总结

通过以上几个简单步骤，你的纯前端应用就能借助Nginx在本地成功部署，并实现局域网共享。Nginx的功能远不止于此，它还可以用于反向代理、负载均衡等多种场景。希望本文能为你的日常开发工作带来启发。