当前位置：首页 > news >正文

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

news 2025/10/14 8:45:35

📖 目录

一、前置环境准备
二、构建 Astro 项目
三、配置 Nginx
四、申请 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`	应用最新配置