🚀 在Ubuntu服务器上部署Astro并实现GitHub Actions CI/CD

好的，非常棒！将 Astro 项目部署到自己的服务器并实现 CI/CD 是一个非常专业且能带来巨大便利的操作。这个过程能让你在本地写完代码后，只需一个 git push，网站就会自动在服务器上更新。

我将为你提供一个详尽的、分步的指南，来完成这个任务。我们将使用 Nginx 作为反向代理，PM2 来管理 Astro 的 Node.js 进程，以及 GitHub Actions 来实现 CI/CD。

这是我们的目标流程图：

你 (本地)          GitHub Repo         GitHub Actions          你的 Ubuntu 服务器
┌───────────┐      ┌───────────┐      ┌────────────────┐      ┌─────────────────────────┐
│ git push  ├─────>│  接收更新  ├─────>│  触发 Workflow  ├─────>│                         │
└───────────┘      └───────────┘      └────────────────┘      │    通过 SSH 连接服务器    │
                                                              │                         │
                                                              │ 1. cd /var/www/astro-site │
                                                              │ 2. git pull             │
                                                              │ 3. npm install          │
                                                              │ 4. npm run build        │
                                                              │ 5. pm2 restart astro-app│
                                                              │                         │
                                                              └─────────────────────────┘

Phase 1: 服务器端准备 (一次性设置)

首先，我们需要让你的 Ubuntu 22.04 服务器准备好接收和运行你的 Astro 网站。

1. 安装 Node.js, npm 和 PM2

Astro 需要 Node.js 环境来运行。我们使用 nvm (Node Version Manager) 来安装，这是管理 Node.js 版本的最佳实践。

# 更新系统
sudo apt update && sudo apt upgrade -y

# 安装 nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# 让 nvm 生效 (或者重新登录终端)
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"

# 安装一个稳定的 Node.js 版本 (例如 LTS/Iron)
nvm install --lts

# 安装 PM2 (一个强大的 Node.js 进程管理器)
npm install -g pm2

2. 安装并配置 Nginx

Nginx 将作为反向代理，将外部访问（如 yourdomain.com）转发到在本地运行的 Astro 应用（如 localhost:4321）。

# 安装 Nginx
sudo apt install nginx -y

# 创建一个新的 Nginx 配置文件
sudo nano /etc/nginx/sites-available/astro-site.conf

将以下配置粘贴到文件中。请务必将 yourdomain.com 替换成你的域名，如果没有域名，可以暂时用服务器的公网 IP 地址。

server {
    listen 80;
    listen [::]:80;

    server_name yourdomain.com; # 替换成你的域名或 IP

    location / {
        # 将请求转发到 Astro 应用运行的端口 (Astro 预览默认是 4321)
        proxy_pass http://localhost:4321;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

保存并关闭文件 (Ctrl+X, Y, Enter)。然后启用这个配置：

# 创建软链接以启用配置
sudo ln -s /etc/nginx/sites-available/astro-site.conf /etc/nginx/sites-enabled/

# 测试 Nginx 配置是否有语法错误
sudo nginx -t

# 如果没有错误，重启 Nginx
sudo systemctl restart nginx

注意: 如果你的服务器开启了防火墙 (UFW)，请确保允许 HTTP 和 HTTPS 流量： sudo ufw allow 'Nginx Full'

3. 克隆你的项目并进行初始设置

我们需要在服务器上创建一个地方来存放你的网站代码。

# 在 /var/www 目录下创建项目文件夹
sudo mkdir -p /var/www/astro-site
sudo chown $USER:$USER /var/www/astro-site # 将所有权赋予当前用户，方便操作

# 克隆你的项目
git clone https://github.com/huangying-just/astro.git /var/www/astro-site

# 进入项目目录
cd /var/www/astro-site

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

# 首次使用 PM2 启动你的应用
# 'npm run preview' 是 Astro 官方推荐的运行生产构建的方式
pm2 start npm --name "astro-app" -- run preview

现在，访问你的域名或服务器 IP，应该就能看到你的 Astro 网站了！如果不行，使用 pm2 logs astro-app 检查日志。

Phase 2: 设置 GitHub Actions 与服务器的连接

为了让 GitHub Actions 能够登录你的服务器并执行命令，我们需要设置 SSH 免密登录。

1. 在服务器上生成 SSH 部署密钥

这个密钥专用于 GitHub Actions 部署。

# 在服务器上执行
ssh-keygen -t rsa -b 4096 -C "github_actions_deploy" -f ~/.ssh/github_deploy -N ""

这会生成两个文件：~/.ssh/github_deploy (私钥) 和 ~/.ssh/github_deploy.pub (公钥)。

2. 将公钥添加到 GitHub Deploy Keys

Deploy Key 是一种只授予单个仓库访问权限的 SSH 密钥。

1. 在服务器上，显示公钥内容并复制它：

   cat ~/.ssh/github_deploy.pub

2. 打开你的 GitHub 仓库 huangying-just/astro。
3. 进入 Settings > Security > Deploy keys。
4. 点击 Add deploy key。
5. Title 随便写，比如 Ubuntu Server Deploy。
6. 将刚刚复制的公钥粘贴到 Key 字段中。
7. 不要勾选 Allow write access，因为我们只需要 git pull（只读）。
8. 点击 Add key。

3. 将服务器信息和私钥添加到 GitHub Secrets

Secrets 是存储敏感信息（如密码、API 密钥）的安全方式。

1. 在你的 GitHub 仓库页面，进入 Settings > Security > Secrets and variables > Actions。
2. 点击 New repository secret，添加以下几个 secrets：
   • SSH_HOST: 你的服务器的公网 IP 地址。
   • SSH_USER: 你登录服务器的用户名（例如 ubuntu 或你创建的其他用户）。
   • SSH_KEY: 你的私钥。在服务器上执行 cat ~/.ssh/github_deploy，将输出的全部内容（包括 -----BEGIN RSA PRIVATE KEY----- 和 -----END RSA PRIVATE KEY-----）复制并粘贴到这里。
   • PROJECT_PATH: 你在服务器上存放项目的绝对路径，即 /var/www/astro-site。

Phase 3: 创建 GitHub Actions Workflow

这是实现自动化的核心。在你的本地项目中，创建 CI/CD 配置文件。

1. 在你的项目根目录下，创建 .github/workflows 文件夹。
2. 在该文件夹下，创建一个 deploy.yml 文件。

将以下内容粘贴到 deploy.yml 文件中：

name: Deploy to Ubuntu Server

on:
  push:
    branches:
      - main # 当 main 分支有 push 时触发

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Deploy to Server
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.SSH_HOST }}
          username: ${{ secrets.SSH_USER }}
          key: ${{ secrets.SSH_KEY }}
          port: 22
          script: |
            # 进入项目目录
            cd ${{ secrets.PROJECT_PATH }}

            # 从 GitHub 拉取最新的代码
            git pull origin main

            # 安装/更新依赖
            npm install

            # 重新构建 Astro 网站
            npm run build

            # 重启 PM2 管理的应用
            pm2 restart astro-app

3. 将这个新文件 add, commit, 并 push 到你的 GitHub 仓库。

git add .github/workflows/deploy.yml
git commit -m "feat: Add CI/CD workflow for deployment"
git push origin main

Phase 4: 验证 CI/CD

现在，你的 CI/CD 流程已经完全设置好了！

1. 触发: 在你的本地项目中，对网站做一些小的修改（比如改一行文字）。
2. 推送: git add ., git commit -m "test: update content for deploy", git push origin main。
3. 观察: 去你的 GitHub 仓库页面，点击 Actions 选项卡。你会看到一个新的 workflow 正在运行。点击进去，你可以实时看到每一步的执行日志。
4. 确认: 等待 action 成功完成后（显示绿色对勾），刷新你的网站。你应该能立刻看到你刚刚做的修改！

恭喜！你已经成功地在自己的 Ubuntu 服务器上部署了 Astro 网站，并搭建了一套完整的、自动化的 CI/CD 流程。