使用 Nginx 和 GitHub Actions 自动化部署与持续集成静态页面

紫气从东来
217 阅读8分钟

前言

本文旨在实现静态页面的部署，并配置一个简单的CI/CD流水线，自动化完成代码更新和部署任务。我们将使用阿里云服务器和GitHub Actions作为工具，结合Nginx来托管静态网页。

环境准备

  • 安装Git：确保电脑安装并配置了Git。
  • GitHub账号准备：创建或确认已有的GitHub账号。
  • 服务器准备：本文使用阿里云服务器（1核2G，Ubuntu 24.04 64位）作为示例。

静态页面部署

创建静态页面

  • 创建文件夹，这里我命名为 deploy-and-cicd-learning
  • 在文件夹下 创建HTML文件 index.html
  • 编写页面代码
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页</title>
</head>
<body>
    <h1>我的个人主页</h1>
    <p>欢迎来到我的个人主页，我的名字叫紫气从东来！</p>
</body>
</html>

安装 Nginx（如果需要）

  • 查看服务器是否有安装 Nginx

    nginx -v

成功输出版本信息，表明已经安装。

如果服务器没有安装 Nginx，需要先进行安装。

  • 执行以下命令来安装 Nginx：

    sudo apt update

    sudo apt install nginx

上传项目到服务器

这边使用连接服务器的软件 FinalShell，通过服务器地址和密码进行连接。

  • 服务器创建放置项目的文件夹

    sudo mkdir -p /var/www/html/

  • 把本地项目文件夹 deploy-and-cicd-learning 拖到创建好的文件夹下

  • 层级结构为

    /var
├── www
│   └── html
│       └── deploy-and-cicd-learning
│           └── index.html

配置 Nginx

  • 在服务器上，你需要配置 Nginx 来托管你的网页。首先，创建一个新的配置文件：
sudo vim /etc/nginx/sites-available/your_project

这里我们项目名称为 deploy-and-cicd-learning，应用上述命令为：

sudo vim /etc/nginx/sites-available/deploy-and-cicd-learning

  • 添加以下内容到配置文件中：

    server {
    listen 80;
    server_name your_domain_or_ip;

    root /var/www/html/deploy-and-cicd-learning;  # 你的网页目录
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}

    your_domain_or_ip，填入你的服务器地址（公网 IP）

    /var/www/html/deploy-and-cicd-learning 为你的实际项目地址

  • 然后，创建一个符号链接，将这个配置文件链接到 sites-enabled 目录中：

    sudo ln -s /etc/nginx/sites-available/deploy-and-cicd-learning /etc/nginx/sites-enabled/

    同样地 deploy-and-cicd-learning，替换为实际项目名称。

测试配置并重新加载 Nginx

  • 测试 Nginx 配置是否正确：
sudo nginx -t
  • 如果没有错误，重新加载 Nginx：
sudo systemctl reload nginx

开放端口（如果需要）

如果你的服务器有防火墙设置，确保开放 80 端口：

sudo ufw allow 'Nginx HTTP'

访问网页

  • 在浏览器中输入你的服务器 IP 或域名（例如：http://your_domain_or_ip），你应该能够看到你部署的网页。

添加 CI/CD 功能

添加版本控制

  • 进行 git 初始化

    git init

  • 进行第一次提交

    git checkout -b develop

    创建 develop，作为主分支

    git add .

    git commit -m "init project"

创建并关联远程仓库

  • GitHub 创建空项目，命名为 deploy-and-cicd-learning

  • 按照创建空项目后，GitHub 的提示，按照已有项目的情况，进行绑定，执行类似下面的命令：

    git remote add origin git@github.com:用户名/deploy-and-cicd-learning.git
git branch -M develop
git push -u origin develop

生成 SSH 密钥对

  • 在你的服务器上，查看当前ssh情况：
ls ~/.ssh/

如果只显示 authorized_keys 文件，表明没有生成密钥对。

  • 通过下面的命令生成密钥对：
ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

your_email@example.com 为你的邮箱。

生成后，默认情况下私钥会存储在 ~/.ssh/id_rsa，公钥存储在 ~/.ssh/id_rsa.pub。

复制公钥

  • 复制你生成的公钥内容。你可以使用以下命令查看并复制公钥：
cat ~/.ssh/id_rsa.pub

​ 复制输出的内容（就是以 ssh-rsa 开头的一行文本）。

  • 添加公钥到 authorized_keys：

    没有就先创建一个。

    vim ~/.ssh/authorized_keys

    将你复制的公钥粘贴到文件的末尾。确保每个公钥占一行。

  • 检查 sshd_config 配置文件（如果需要）：

    确保 SSH 配置文件允许公钥认证。打开 /etc/ssh/sshd_config 文件，确保以下配置项没有被注释掉，并且是正确的：

    PubkeyAuthentication yes
AuthorizedKeysFile     .ssh/authorized_keys

  • 重启 SSH 服务（如果修改了 SSH 配置）：

    sudo systemctl restart ssh

  • 添加公钥到你的个人 GitHub 中，点击 Settings > SSH and GPG keys > New SSH key，创建一个 key

  • 添加公钥到阿里云服务器中，点击 网络安全 > 密钥对 > 创建密钥对> 导入已有密钥对，粘贴公钥内容。创建完成后，选择绑定密钥对，选择重启服务器。

    • 注意：密钥对的创建，需要在页面顶部选择对应的服务器后再进行创建，否则不匹配，无法绑定密钥对
    • 如你的服务器是华东2（上海），创建密钥对时，顶部的地区就要选择 华东2（上海）
    • 经测试，发现重启后，通过之前的密码连接不上服务器，需要重置一下密码。重置密码后，不影响之前的密钥对绑定，可通过重置后的密码进行登录。

在 GitHub Actions 中配置私钥

确保将生成的私钥（id_rsa）添加到 GitHub Actions 的 Secrets 中，如下所示：

  • 转到 GitHub 仓库，点击 Settings > Security > Secrets and variables> Actions> actions> Secrets> New repository secret。
  • 创建一个名为 SSH_PRIVATE_KEY 的 secret，内容为你的私钥内容。

GitHub Actions Workflow 配置文件

  • 在项目，如 deploy-and-cicd-learning 下创建文件夹 和 文件，最终层级如下

    deploy-and-cicd-learning
├── .github
│   └── workflows
│       └── deploy.yml
└── index.html

deploy.yml 为 workflow 配置文件。

下面为一个通用的 workflow，可基于此进行修改：

name: Deploy to Alibaba Cloud Server

on:
  push:
    branches:
      - main  # 当代码推送到main分支时触发

jobs:
  deploy:
    runs-on: ubuntu-latest  # 使用GitHub Actions的Ubuntu runner

    steps:
    - name: Checkout code
      uses: actions/checkout@v2  # 检出仓库代码

    - name: Set up SSH key
      uses: webfactory/ssh-agent@v0.5.3  # 设置SSH密钥以便能够连接到服务器
      with:
        ssh-private-key: ${{ secrets.SSH_PRIVATE_KEY }}  # 需要在GitHub仓库的Secrets中配置你的私钥

    - name: Deploy to server
      run: |
        ssh -o StrictHostKeyChecking=no your_user@your_server_ip << 'EOF'
          cd /path/to/your/project  # 进入项目所在目录
          git pull origin main  # 拉取最新代码
          # 如果你的项目需要构建，请在这里添加构建步骤
          # 比如：npm install 或者其他构建命令
          # 假设项目无需构建，则只需拷贝静态文件
          sudo systemctl restart your_service_name  # 如果是通过服务启动的项目，重启服务
        EOF

  1. on.push.branches.main：当代码推送到 main 分支时，自动触发这个工作流。你可以根据需要替换成其他分支名。

  2. jobs.deploy：定义一个名为 deploy 的任务，表示部署操作。

  3. runs-on: ubuntu-latest：这个任务将在 GitHub Actions 提供的 Ubuntu 环境中运行。

  4. steps：定义部署流程中的每一个步骤。

    • Checkout code：使用 actions/checkout@v2 获取仓库中的代码。
    • Set up SSH key：使用 webfactory/ssh-agent@v0.5.3 通过 SSH 密钥连接到阿里云服务器。你需要在 GitHub 仓库的 Secrets 中添加你的私钥（SSH_PRIVATE_KEY）。如果没有 SSH 密钥对，首先生成一对并将公钥添加到你的服务器的 ~/.ssh/authorized_keys 文件中。
    • Deploy to server：使用 SSH 连接到你的服务器并执行部署操作。以下是具体的部署步骤：
      • cd /path/to/your/project：进入服务器上你的项目所在目录。
      • git pull origin main：拉取最新的代码。如果你有构建步骤，可以在此时添加构建命令（例如：npm install）。
      • sudo systemctl restart your_service_name：重启服务（如果你是通过某个服务启动的项目，如 Nginx 或 Apache），确保新代码生效。

需要你提供的内容

  1. SSH 私钥：你需要将你的 SSH 私钥添加到 GitHub Secrets 中，命名为 SSH_PRIVATE_KEY。确保你的公钥已经添加到服务器的 ~/.ssh/authorized_keys 中。
  2. 服务器的 SSH 用户名和 IP 地址：你需要提供 SSH 用户名（如 root 或其他）和服务器的 IP 地址。
  3. 项目路径：在服务器上的项目目录路径。
  4. 服务名称：如果你使用系统服务（如 systemd）来管理项目，你需要提供服务的名称。

如果你完成了这些配置，当你向 main 分支推送代码时，GitHub Actions 会自动触发这个 workflow，将最新的代码部署到你的阿里云服务器。

示例修改

如根据我的示例项目来对应修改上面的 workflow，其中的分支 main，需修改为 develop，/path/to/your/project 需修改为，/var/www/html/deploy-and-cicd-learning，其他的根据你的实际情况进行修改。

结语

通过本文的介绍，我们已经完成了静态页面的部署并配置了CI/CD流程。希望这篇文章能为你提供一些实用的操作步骤和启发。如果你在实践中遇到任何问题，或者有更好的优化建议，欢迎随时与我交流。一起探讨和分享经验，帮助我们不断进步。

avatar
文章
阅读
粉丝