Nginx部署前端静态文件指南分享(基于虚拟机环境)

掌握 用Nginx部署任意前端静态文件 是后端/运维入门的核心技能之一。无论是下载的模板（如AdminLTE）、前端框架打包后的文件（Vue/React的dist目录），还是简单的HTML页面，都能通过这套流程快速在网页上展示。

本笔记以虚拟机 为环境，从文件传输到Nginx配置，全程实操落地，让你 拿到前端文件就能部署！

1 准备工作

1.1 环境要求

• 虚拟机：已安装Nginx（若未安装，执行sudo apt install nginx -y）
• 物理机：存有前端文件（如AdminLTE-3.2.0，或任意包含index.html的文件夹）
• 工具：VS Code + SSH Remote扩展（用于远程连接虚拟机并传输文件）

1.2 目标

将物理机的前端文件传到虚拟机，通过Nginx配置，让浏览器访问http://虚拟机IP:端口时能正常显示前端内容。

2 在虚拟机中创建工程目录

在 VS Code 的远程终端（左下角显示 SSH: vm-via-nat 时，按 Ctrl + ~ 打开终端）执行：

#在家目录新建文件夹，名字my-project
mkdir ~/my-project  

为了避免权限问题且便于管理，在用户的目录下创建专用文件夹，按配置文件和前端文件分类存放：

# 登录虚拟机后，在终端执行（如用户为kr，路径默认在/home/kr）
mkdir -p ~/my-project/config  # 存放Nginx自定义配置文件（按端口/功能分类）
mkdir -p ~/my-project//www    # 存放前端静态文件（如AdminLTE、dist等）

在 Linux 中，~ 是一个特殊符号，代表当前用户的主目录，即 /home/用户名。

• ~/my-project//config：后续所有项目的Nginx配置文件都放这里。
• ~/my-project//www：前端文件的根目录，每个项目单独建子文件夹（如~/my-project//www/adminlte放AdminLTE文件）。

3 将物理机前端文件传到虚拟机

用VS Code + SSH远程连接虚拟机，通过拖放传输文件，这是最直观的方式：

1. 在VS Code左侧资源管理器中，导航到虚拟机的/home/kerui/my-project//www目录；
2. 打开物理机的文件管理器，找到前端文件；
3. 直接将物理机的前端文件夹拖到VS Code的/home/kerui/my-project//www目录中；
4. 等待传输完成，此时虚拟机中会出现/home/kerui/my-project//www/AdminLTE-3.2.0。

当然，你也可以选择从主机终端输出以下命令进行传输：

scp -p [d端口号] -r [物理机文件路径] [虚拟机文件路径] 

具体可见下面图片页面所示。

传输后在该页面可以看到你新过来的文件，你也可以在这里任意新建文件夹跟其他文件，因为是你的家目录，不会报权限错误。

4 编写Nginx配置文件

为前端文件创建专属配置，指定访问端口和文件路径：

4.1 新建配置文件

在虚拟机终端执行，创建并编辑配置文件（以部署AdminLTE到8080端口为例）：

# 进入配置文件目录
cd ~/my-project/config  
# 新建配置文件（文件名建议包含端口或项目名，如adminlte-8080.conf）
vim adminlte-8080.conf  

这是一种方法，但是我更推荐以下方法，在VsCode左侧新建文件，作用一样。

4.2 配置文件内容

程序如下：

server {
    listen 8080;  # 访问端口（可自定义，如8081、8090）
    server_name _;  # 本地测试用“_”表示任意域名

    # 前端文件在虚拟机中的路径（必须是绝对路径）
    root /home/kerui/my-project/www/AdminLTE-3.2.0;  
    # 默认首页（前端文件夹中必须有index.html）
    index index.html index.htm;

    # 解决单页应用路由问题
    location / {
        try_files $uri $uri/ /index.html;
    }
}

但到这里还没有结束，因为Nginx默认只加载系统目录的配置，所以在你配置之前，系统并不会去读你创建的文件目录，具体见下一节。

5 让Nginx加载自定义配置

Nginx默认只加载系统目录的配置，需手动让它识别我们在~/my-project/config中的文件：

5.1 编辑Nginx主配置

执行以下命令打开Nginx主配置文件（需要sudo权限，仅需配置一次）：

sudo vim /etc/nginx/nginx.conf  

5.2 添加自定义配置目录

在http块末尾添加一行，让Nginx加载~/my-project/config下的所有.conf文件：

http {
    ...  # 原有的其他配置（保留不动）

    # 保留默认的系统配置目录（不影响原有服务）
    include /etc/nginx/conf.d/*.conf;
    # 新增：加载kerui用户的自定义配置目录（关键！）
    include /home/kerui/nginx/config/*.conf;
}

按Esc，输入:wq保存退出。

这里最后的*.conf则是系统会自动找寻该文件夹下的所有conf文件，所以后续你只要在该路径下创建conf文件都不需要再跑到系统目录下更改，就会更加简单便捷。

6 验证配置并启动服务

6.1 检查配置语法

执行以下命令，确保配置文件无错误（若报错，按提示修改路径或语法）：

sudo nginx -t  

成功提示：

nginx: configuration file /etc/nginx/nginx.conf test is successful

6.2 重启Nginx生效

sudo systemctl restart nginx  

也可以选择使用：

sudo nginx -s reload

这一个主要区别是可以不断网就重新生效，对于你一些正在挂着的网页有效果。

6.3 浏览器访问测试

1. 查看虚拟机IP（终端执行ip addr，如192.168.56.10）。
2. 物理机浏览器输入：http://192.168.56.10:8080（IP替换为你的虚拟机IP，端口对应配置文件的8080）。
3. 若显示前端页面（如AdminLTE的首页），则部署成功。

7 查看Nginx日志（通用查错方法）

当遇到问题或其他未知错误时，优先查看Nginx的日志文件，里面会记录详细的错误原因（如权限拒绝、路径不存在、配置语法错误等）。

7.1 日志文件的默认路径

Nginx的日志通常存放在 /var/log/nginx/ 目录下，核心有两个文件：

• 错误日志：/var/log/nginx/error.log（记录启动失败、访问错误等关键信息，最常用）。
• 访问日志：/var/log/nginx/access.log（记录所有浏览器的访问记录，用于分析访问情况）。

7.2 查看错误日志的命令

在虚拟机终端执行以下命令，实时查看错误日志（方便调试时追踪问题）：

# 实时输出最新的错误日志（按Ctrl+C退出）
sudo tail -f /var/log/nginx/error.log  

如果需要查看历史错误，可直接打开日志文件：

# 用VS Code打开日志文件（可视化查看，支持搜索）
code /var/log/nginx/error.log  # 需要先通过SSH连接虚拟机，且VS Code已远程连接

7.3 常见日志信息及对应解决方法

8 小结

本笔记的核心是“用自定义目录管理Nginx配置和前端文件”，流程可概括为：

1. 建目录：~/nginx/config（配置）+ ~/nginx/www（前端文件）→ 避免权限问题，分类清晰。
2. 传文件：VS Code拖放 → 简单直观，适合新手。
3. 写配置：指定端口和文件路径 → 核心是listen和root参数。
4. 加载配置：主配置文件中include自定义目录 → 一次配置，永久生效。
5. 验证访问：浏览器测试 → 快速确认结果。

掌握这套流程后，无论拿到什么前端静态文件，都能按传文件→写配置→启动服务的步骤快速部署，后续需要学习Nginx高级功能，如反向代理、负载均衡等这些，也算是打下基础。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

最新评论