阿里云Ubuntu系统使用Nginx搭建静态网页实战

环境准备与服务器初始化
• 阿里云ECS购买与配置
• Ubuntu系统初始化
• Nginx安装与启动

静态资源部署与配置
• 静态网页文件上传与权限管理
• Nginx虚拟主机配置详解
• Vue项目构建与SPA路由适配

域名解析与SSL证书配置
• 阿里云域名绑定与解析
• Let’s Encrypt免费SSL证书申请
• HTTPS强制跳转与安全加固

性能优化与高级技巧
• Gzip压缩与缓存策略
• CDN加速配置（可选）
• 日志分析与监控

常见问题与解决方案
• 403 Forbidden错误排查
• SSL证书续期自动化
• Vue路由刷新404问题

背景

最近在调试鸿蒙方面的问题，有些线上问题无法复现，需要通过回捞日志分析尝试修复后给到用户继续观察，由于应用没有上架应用市场，所以走的是inhouse方式，但是公司对外只有一个平台发布正式包，内网包外部用户无法使用，看了下发布页面的下载地址是这种格式store://enterprise/manifest?url=https://file.xxxcdn.com/shaxxxxx_manifest.json5，指向一个CDN的json5配置文件，这个文件可以外网访问，只要提供一个简单网页，有个按钮配置href到这个地址就可以。想到正好有一台阿里云的服务器，把静态页面部署上去就可以完成调试包发布的需求了。下面记录下静态页面配置的过程。

第一章环境准备与服务器初始化

1.1 阿里云ECS购买与配置

步骤说明：

登录阿里云控制台，进入ECS实例购买页面。
选择配置：
• 地域：根据用户群体选择（如华北、华东）
• 镜像：Ubuntu 22.04 LTS（推荐）
• 实例规格：1核2GB（静态网站足够）
• 安全组：开放80（HTTP）、443（HTTPS）、22（SSH）端口

这里用的阿里搞活动的云服务器，并且安装了ubuntu_24_04_x64的镜像：

1.2 Ubuntu系统初始化

初始化完成后登录到服务器系统惊醒初始化配置和安装Nginx。
操作命令：

# 更新系统软件包
sudo apt update && sudo apt upgrade -y
# 安装常用工具
sudo apt install -y curl wget vim git
# 设置时区（选择Asia/Shanghai）
sudo timedatectl set-timezone Asia/Shanghai

1.3 Nginx安装与启动

安装流程：

# 安装Nginx
sudo apt install nginx -y

# 启动服务并设置开机自启
sudo systemctl start nginx
sudo systemctl enable nginx

# 验证状态
systemctl status nginx

执行结果：

第二章静态资源部署与配置

配置完Nginx接下来就是配置我们的静态页面了。

2.1 静态网页文件上传

这里推荐目录结构如下：

/var/www/
└── my_website/
    ├── index.html
    ├── css/
    ├── js/
    └── images/

权限设置：

# 创建目录并授权
sudo mkdir -p /var/www/my_website
sudo chown -R www-data:www-data /var/www/my_website
sudo chmod -R 755 /var/www/my_website

2.2 Nginx虚拟主机配置

配置文件路径：

sudo vim /etc/nginx/sites-available/my_website.conf

配置模板：

server {
    listen 80;
    server_name your_domain.com;  # 替换为你的域名
    root /var/www/my_website;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;  # 适配Vue路由
    }

    # 禁用隐藏文件访问
    location ~ /.(?!well-known).* {
        deny all;
    }
}

启用配置：

# 创建软链接并测试
sudo ln -s /etc/nginx/sites-available/my_website.conf /etc/nginx/sites-enabled/
sudo nginx -t && sudo systemctl reload nginx

2.3 Vue项目构建与部署

构建命令：

npm run build  # 生成dist目录

部署注意事项：

将dist目录内容上传至服务器
修改Nginx配置中的root路径为/var/www/my_website/dist
解决路由刷新404问题（需配置try_files）

SPA路由配置示例：

location / {
    try_files $uri $uri/ /index.html;
}

2.4 Nginx配置文件介绍

上面我们创建了一个my_website.conf 配置文件，然后nginx就可以自动识别到，下面我们看看配置的具体介绍和说明。
下面是一个完整的 my_website.conf 配置示例（支持Vue项目构建的SPA应用）：

server {
    listen 80;
    listen [::]:80;
    server_name your_domain.com www.your_domain.com;

    root /var/www/my_website/dist;  # Vue构建产物目录
    index index.html;

    # 静态资源缓存配置
    location ~* .(js|css|png|jpg|jpeg|gif|ico|svg|woff2)$ {
        expires 365d;
        add_header Cache-Control "public, no-transform";
    }

    # SPA路由适配
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 禁止访问隐藏文件
    location ~ /.(?!well-known) {
        deny all;
        access_log off;
        log_not_found off;
    }

    # 错误页面配置
    error_page 404 /404.html;
    location = /404.html {
        internal;
    }

    # 访问日志与错误日志路径
    access_log /var/log/nginx/my_website.access.log;
    error_log /var/log/nginx/my_website.error.log;
}

逐项配置解析

server 块
• 作用：定义一个虚拟主机，处理特定域名或IP的请求。
• 关键指令：
• listen 80; ：监听IPv4的80端口（HTTP）。
• listen [: :]:80; ：监听IPv6的80端口。
• server_name your_domain.com www.your_domain.com; ：指定该虚拟主机响应的域名（需与阿里云解析的域名一致）。
root 与 index
• root /var/www/my_website/dist; ：定义网站根目录，所有请求将基于此路径解析文件。示例：访问 your_domain.com/about 时，Nginx会尝试查找 /var/www/my_website/dist/about.html。
• index index.html; ：指定默认入口文件。当访问目录路径时（如 /），自动加载 index.html。
静态资源缓存配置

location ~* .(js|css|png|jpg|jpeg|gif|ico|svg|woff2)$ {
    expires 365d;
    add_header Cache-Control "public, no-transform";
}

• 原理：
  • `location ~*` 使用正则匹配所有静态资源文件（不区分大小写）。
  • `expires 365d` 设置浏览器缓存时间为1年，减少重复请求。
  • `add_header Cache-Control` 补充缓存策略：  
    ◦ `public`: 允许代理服务器缓存资源。  
    ◦ `no-transform`: 禁止代理压缩或修改资源（如某些CDN会优化图片）。

SPA路由适配（Vue/React核心配置）

location / {
    try_files $uri $uri/ /index.html;
}

• 作用：解决单页应用（SPA）路由刷新404问题。  
• 逻辑拆解：  当用户访问 `/about` 时，Nginx按以下顺序尝试查找文件（相当于将所有非静态资源请求转发给入口文件）：  
	  1. 检查是否存在 `/var/www/my_website/dist/about`（文件或目录）。  
	  2. 若未找到，则返回 `index.html`，由前端路由接管。

禁止访问隐藏文件

location ~ /.(?!well-known) {
    deny all;
    access_log off;
    log_not_found off;
}

• 安全防护：  
  • 使用正则 `~ /.(?!well-known)` 匹配所有以 `.` 开头的目录/文件（如 `.git`、`.env`）。  
  • `deny all` 禁止访问，防止敏感信息泄露。  
  • `!well-known` 例外：用于SSL证书验证等场景（如Let's Encrypt的ACME挑战）。

日志配置

access_log /var/log/nginx/my_website.access.log;
error_log /var/log/nginx/my_website.error.log;

• 对运维意义：  
	  • 独立日志文件便于问题排查，避免与其他站点日志混杂。  
	  • 可通过工具（如GoAccess）分析访问日志，统计流量和用户行为。

2.5 Nginx配置核心原理

下面简单介绍下Nginx的配置解析原理。

HTTP请求处理流程

虚拟主机（Virtual Host）
• 概念：一台服务器通过不同域名或端口托管多个网站。
• 匹配优先级：

精确匹配的 server_name（如 your_domain.com）
通配符匹配（如 *.your_domain.com）
默认主机（listen 端口后未匹配的请求）。

SPA路由适配原理
• 问题背景：Vue/React等框架使用前端路由（HTML5 History模式），直接访问子路由路径时，Nginx因找不到实际文件返回404。
• 解决方案：通过 try_files 回退到 index.html，由JavaScript解析路由。
• 对比Hash模式：若使用Hash路由（如 /#/about），无需Nginx特殊配置，但URL不美观。

可以通过下面步骤操作验证与调试：

配置语法检查

sudo nginx -t  # 输出应为"Syntax OK"

实时监控错误日志

tail -f /var/log/nginx/my_website.error.log

手动触发浏览器缓存清理
• Chrome DevTools： Network面板勾选 Disable cache，强制跳过本地缓存。

下面是Nginx完整配置流程图

通过以上配置和原理说明，我们可以深入理解Nginx如何高效托管静态网站，并灵活应对Vue等现代前端框架的部署需求。

第三章域名解析与SSL证书配置

3.1 阿里云域名解析

配置完服务后可以配置一个域名，这样便于用户记忆。正好之前持有的域名一直闲置，这里简单配置一下。
操作步骤：

进入阿里云DNS控制台
添加A记录：
• 主机记录：@ 或 www
• 记录值：ECS公网IP
等待生效（约10分钟）

3.2 Let’s Encrypt证书申请

http很多浏览器会提示不安全，我们加上ssl配置。这里使用Certbot工具：

# 安装Certbot
sudo apt install certbot python3-certbot-nginx -y

# 申请证书（需域名已解析）
sudo certbot --nginx -d your_domain.com -d www.your_domain.com

自动续期配置：

# 测试续期命令
sudo certbot renew --dry-run

# 添加定时任务（每月续期）
sudo crontab -e
0 3 * * * /usr/bin/certbot renew --quiet

3.3 HTTPS强制跳转配置

Nginx配置片段：

server {
    listen 80;
    server_name your_domain.com;
    return 301 https://$host$request_uri;  # 强制跳转HTTPS
}

server {
    listen 443 ssl;
    ssl_certificate /etc/letsencrypt/live/your_domain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/your_domain.com/privkey.pem;
    # 其他配置...
}

第四章性能优化与高级技巧

下面介绍一些性能方面的配置和技巧。

4.1 Gzip压缩与缓存

Nginx优化配置：

gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml;
gzip_min_length 1000;

location ~* .(jpg|jpeg|png|gif|ico|css|js)$ {
    expires 365d;
    add_header Cache-Control "public";
}

4.2 CDN加速（阿里云DCDN）

如果用户量比较多，可以通过CDN进行加速。
配置流程：

购买CDN流量包
添加加速域名并指向源站IP
修改DNS解析至CNAME地址

4.3 日志分析与监控

日志路径：

/var/log/nginx/access.log  # 访问日志
/var/log/nginx/error.log   # 错误日志

常用命令：

# 实时监控访问情况
tail -f /var/log/nginx/access.log | grep -v "127.0.0.1"

# 统计TOP 10 IP
awk '{print $1}' access.log | sort | uniq -c | sort -nr | head -n 10

第五章常见问题与解决方案

5.1 403 Forbidden错误

排查步骤：

检查目录权限：ls -l /var/www
确认SELinux/AppArmor状态：

sudo aa-status  # Ubuntu默认使用AppArmor

修改Nginx用户权限：

sudo usermod -a -G www-data your_username

5.2 SSL证书续期失败

常见原因：
• 防火墙阻止ACME验证请求
• 域名解析未生效
修复命令：

sudo certbot renew --force-renewal  # 强制重新申请

5.3 Vue路由刷新404

终极解决方案：

确认Nginx配置包含try_files规则
修改Vue Router为history模式：

const router = new VueRouter({
              
  mode: 'history',
  routes: [...]
})

附录

• Nginx官方文档

Certbot使用指南

阿里云服务器最新优惠活动：https://www.dunling.com/aliyun

文章版权归作者所有，未经允许请勿转载。如内容涉嫌侵权，请在本页底部进入<联系我们>进行举报投诉!

THE END

知识分享

阿里云Ubuntu系统使用Nginx搭建静态网页实战