实战笔记：在 Ubuntu 离线部署 Vue + Nginx 踩坑与避雷指南

1. 场景描述

在 H3C R4900 G5 服务器（Ubuntu 系统）上，手动编译安装了 Nginx。需要部署一个 Vue 前端项目，并实现后端 API 的反向代理。

2. 核心部署步骤

第一步：准备 Web 目录

将打包好的 dist 文件夹上传，并放置在 /var/www/fuquan 目录下。 关键点：确保权限正确，否则会报 403 错误。

sudo mkdir -p /var/www/fuquan

sudo chmod -R 755 /var/www/fuquan

太棒了！这种在实战中踩坑、填坑并总结的习惯是技术进步最快的方式。

这次部署虽然看似简单，但涉及到了 Nginx 手动编译版路径差异 、配置作用域限制 、端口冲突 以及Linux 权限管理等多个核心考点。我为你整理了一份可以直接用于技术博客的总结：

实战笔记：在 Ubuntu 离线部署 Vue + Nginx 踩坑与避雷指南

1. 场景描述

在 H3C R4900 G5 服务器（Ubuntu 系统）上，手动编译安装了 Nginx。需要部署一个 Vue 前端项目，并实现后端 API 的反向代理。

2. 核心部署步骤

第一步：准备 Web 目录

将打包好的 dist 文件夹上传，并放置在 /var/www/fuquan 目录下。 关键点：确保权限正确，否则会报 403 错误。

Bash

复制代码

sudo mkdir -p /var/www/fuquan
sudo chmod -R 755 /var/www/fuquan

第二步：编写极简且稳健的 Nginx 配置

针对手动编译版（路径在 /usr/local/nginx），最稳妥的方法是直接修改主配置文件 nginx.conf，避免层级过深导致的读取失败。

最终生效配置：

复制代码

worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;

    server {
        listen       80;
        server_name  localhost;

        # 1. 前端静态资源
        location / {
            root   /var/www/fuquan;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html; # 解决 Vue 路由刷新 404 问题
        }

        # 2. 后端接口转发
        location /api/ {
            proxy_pass http://xxxxxx/; # 映射后端接口
            proxy_set_header Host $host;
        }
    }
}

第三步：启动与验证

复制代码

# 1. 检查语法是否正确（必须指定配置文件路径）
sudo /usr/local/nginx/sbin/nginx -t -c /usr/local/nginx/conf/nginx.conf

# 2. 强制停止旧进程并重启
sudo pkill -9 nginx
sudo /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

# 3. 确认 80 端口是否在监听
sudo ss -tlnp | grep :80

3. 避坑指南（重点回顾）

⚠️ 坑 1：配置文件"空无一物"或执行报错

现象：打开 nginx.conf 发现全是注释，或者执行时报 worker_processes: not found。
原因：直接运行了 .../nginx.conf。配置文件是文本，不能直接执行。
对策：必须通过 nginx 二进制程序去调用配置文件，即使用 -c 参数指定路径。

⚠️ 坑 2：端口冲突（Address already in use）

现象：启动报错，日志显示端口 58080 或 80 已被占用。
对策：使用 sudo pkill -9 nginx 彻底杀掉所有可能残留的 Nginx 进程，确保环境"清净"。

⚠️ 坑 3：权限不足（Permission denied）

现象：运行 nginx -t 提示权限不足。
对策：使用 chmod +x 给二进制程序增加执行权限，且由于要监听 80 端口（1024 以下），必须配合 sudo 使用。

⚠️ 坑 4：网络可达性（看得见却连不上）

现象：Nginx 启动正常，本地 curl 正常，但跳板机浏览器打不开。
对策：检查 Ubuntu 防火墙。使用 sudo ufw disable 关闭防火墙或通过 sudo ufw allow 80 放行端口。

4. 常用命令清单

看日志 ：sudo tail -f /usr/local/nginx/logs/error.log（排错神器）
查进程 ：ps -ef | grep nginx
热加载配置 ：sudo /usr/local/nginx/sbin/nginx -s reload