从零部署 Astro 静态网站到云服务器（含 HTTPS 一键配置）

📖 目录

一、前置环境准备

环境要求：

服务器系统：Ubuntu
Node.js：LTS 版本
Web 服务器：Nginx
域名：example.com

1️⃣ 安装 Node.js 与 Nginx

复制代码

# 安装 Node.js LTS
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo bash -
sudo apt-get install -y nodejs

# 安装 Nginx
sudo apt-get update
sudo apt-get install -y nginx

安装完成后，可执行：

复制代码

node -v
nginx -v

确认 Node.js 和 Nginx 均安装成功。

二、构建 Astro 项目

在服务器或本地执行以下步骤：

复制代码

# 上传项目到服务器
cd /var/www/example
#将写好的astro项目复制到当前目录

# 安装依赖并构建
npm install
npm run build

构建成功后会生成静态文件目录：

复制代码

/var/www/example/dist/
├── index.html
├── _astro/
├── assets/
└── ...

💡 这个 dist 文件夹就是 Nginx 将要托管的网页目录。

三、配置 Nginx

1️⃣ 创建站点配置文件

复制代码

sudo nano /etc/nginx/sites-available/example.conf

写入以下内容（将路径和域名替换为你的实际值）：

复制代码

# HTTP -> HTTPS 自动跳转
server {
    listen 80;
    listen [::]:80;
    server_name example.com www.example.com;
    return 301 https://$host$request_uri;
}

# HTTPS 主配置
server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name example.com www.example.com;

    # 指向 Astro 构建产物
    root /var/www/example/dist;
    index index.html;

    add_header X-Site "example.com" always;

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

    # 静态资源缓存
    location ~* \.(js|css|png|jpg|jpeg|gif|svg|webp|ico|woff2?)$ {
        expires 7d;
        add_header Cache-Control "public, max-age=604800, immutable";
        try_files $uri =404;
    }

    location ~ /\. { deny all; }

    # HTTPS 证书（由 Certbot 自动生成）
    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
}

启用并重载配置：

复制代码

sudo ln -s /etc/nginx/sites-available/example.conf /etc/nginx/sites-enabled/example.conf
sudo rm -f /etc/nginx/sites-enabled/default
sudo nginx -t
sudo systemctl reload nginx

四、申请 HTTPS 证书

使用 Let's Encrypt 免费 SSL 证书：

复制代码

sudo apt-get install -y certbot python3-certbot-nginx
sudo certbot --nginx -d example.com -d www.example.com

安装完成后：

自动配置 HTTPS
自动续期证书（默认每 90 天续期一次）

查看续期计划：

复制代码

sudo systemctl list-timers | grep certbot

五、测试与验证

1️⃣ 测试 HTTP → HTTPS 跳转

复制代码

curl -I -H "Host: example.com" http://127.0.0.1

应返回：

复制代码

HTTP/1.1 301 Moved Permanently
Location: https://example.com/...

2️⃣ 测试 HTTPS 响应

复制代码

curl -I -k -H "Host: example.com" https://127.0.0.1

应看到：

复制代码

HTTP/2 200
X-Site: example.com

说明网站已成功运行。

六、常见问题与排查

🔹 1. 显示 403 Forbidden

检查 root 是否指向 /var/www/example/dist
确认配置中有 index index.html;

修复权限：

复制代码

sudo chown -R www-data:www-data /var/www/example/dist
sudo find /var/www/example -type d -exec chmod 755 {} \;
sudo find /var/www/example -type f -exec chmod 644 {} \;

🔹 2. 样式丢失或资源 404

如果网站部署在子路径（如 /asia/）：

修改 astro.config.mjs：

复制代码

export default defineConfig({
  base: '/asia/',
  output: 'static'
})

然后重新构建：

复制代码

npm run build

🔹 3. HTTPS 不生效

执行：

复制代码

sudo nginx -t
sudo systemctl reload nginx
sudo certbot renew --dry-run

若返回成功，即可。

七、总结

阶段	命令或文件	说明
构建静态网站	`npm run build`	Astro 导出 dist
部署目录	`/var/www/example/dist`	静态资源路径
HTTPS 证书	Certbot 自动生成	免费安全证书
测试配置	`nginx -t`	检查语法错误
启动服务	`systemctl reload nginx`	应用最新配置

🌐 完整流程回顾

1️⃣ 安装 Node.js 与 Nginx

2️⃣ 构建 Astro 项目生成静态资源

3️⃣ 配置 Nginx 指向 dist

4️⃣ 使用 Certbot 自动签发 HTTPS

5️⃣ 验证运行状态、开启自动续期

💬 总结：

Astro 的静态导出特性让部署非常轻量，只需几条命令即可在任意云服务器上运行。配合 Nginx 与 Certbot，就能获得安全、自动化、可扩展的现代网站部署方案。

✳️ 推荐阅读：