小叶的前端笔记

Appearance

一、环境准备 ​

    1. 项目要求
    • 已完成开发的前端项目（React/Vue/Angular 等）
    • 使用 Webpack/Vite 等构建工具
    • 项目已托管到 Git 仓库（GitHub/GitLab/Gitee 等）
    1. 服务器准备
    • 购买云服务器（阿里云/腾讯云/AWS 等）
    • 开放 22(SSH)、80(HTTP)、443(HTTPS)端口
    • 安装 Node.js 环境（建议使用 nvm 管理版本）
    bash
    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
nvm install 18

二、配置服务器部署环境 ​

    1. 创建部署用户
    bash
    adduser deployer
usermod -aG sudo deployer
    1. 配置 SSH 免密登录
    • 本地生成密钥对：
    bash
    ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
    • 将公钥上传到服务器：
    bash
    ssh-copy-id -i ~/.ssh/id_rsa.pub deployer@your_server_ip
    1. 创建项目目录
    bash
    sudo mkdir -p /var/www/your-project
sudo chown -R deployer:deployer /var/www/your-project

三、配置 GitHub 仓库 ​

    1. 添加 SSH 私钥到仓库 Secrets
    • 进入仓库 Settings > Secrets > Actions
    • 添加新 Secret：
      • Name: SERVER_SSH_KEY
      • Value: 本地id_rsa文件的内容
    1. 添加环境变量到仓库 Secrets
    • 添加以下 Secrets：
      • SERVER_IP: 服务器 IP 地址
      • SERVER_USER: 部署用户名（deployer）
      • DEPLOY_PATH: 部署路径（/var/www/your-project）

四、创建 GitHub Actions 工作流 ​

    1. 创建配置文件 在项目根目录创建：.github/workflows/deploy.yml
    1. 编写工作流配置
    yaml
    name: Deploy to Production

on:
  push:
    branches: ["main"]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

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

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18

      - name: Install dependencies
        run: npm install

      - name: Build project
        run: npm run build

      - name: Archive build artifacts
        uses: actions/upload-artifact@v3
        with:
          name: build
          path: dist/

      - name: Deploy to Server
        uses: appleboy/ssh-action@v1.0.0
        with:
          host: ${{ secrets.SERVER_IP }}
          username: ${{ secrets.SERVER_USER }}
          key: ${{ secrets.SERVER_SSH_KEY }}
          script: |
            cd ${{ secrets.DEPLOY_PATH }}
            git pull origin main
            rm -rf ./dist
            mv /home/deployer/build/dist ./
            sudo systemctl restart nginx

五、配置 Nginx（服务器端） ​

    1. 安装 Nginx
    bash
    sudo apt update
sudo apt install nginx
    1. 创建站点配置文件
    bash
    sudo nano /etc/nginx/sites-available/your-project.conf

    添加以下内容：

    nginx
    server {
    listen 80;
    server_name your-domain.com;

    root /var/www/your-project/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}
    1. 启用配置
    bash
    sudo ln -s /etc/nginx/sites-available/your-project.conf /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl restart nginx

六、执行自动化部署 ​

    1. 推送代码到 main 分支：
    bash
    git add .
git commit -m "触发自动化部署"
git push origin main
    1. 查看部署状态：
    • 进入 GitHub 仓库 > Actions 标签页
    • 查看工作流执行情况
    1. 访问网站：
    http://your-server-ip
或
http://your-domain.com

七、高级配置（可选） ​

    1. 添加域名 SSL 证书
    bash
    sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d your-domain.com
    1. 配置 CDN 加速
    • 在云服务商配置 CDN
    • 修改 DNS 解析记录
    1. 添加部署通知
    • 在 GitHub Actions 中添加 Slack/钉钉/企业微信通知
    • 使用actions-cool/dingtalk-msg发送钉钉消息

八、常见问题排查 ​

    1. SSH 连接失败
    • 检查服务器安全组设置
    • 验证 SSH 密钥是否正确
    • 测试本地 SSH 连接：ssh -i id_rsa deployer@your-server-ip
    1. 文件权限问题
    bash
    sudo chown -R deployer:deployer /var/www/your-project
sudo chmod -R 755 /var/www
    1. Nginx 403 错误
    • 检查文件路径是否正确
    • 确认 index.html 文件存在
    • 查看 Nginx 错误日志：tail -f /var/log/nginx/error.log

按照以上步骤完成后，你的前端项目就实现了完整的自动化部署流程。每次向 main 分支推送代码时，GitHub Actions 会自动执行构建并部署到生产服务器。