技术指南：使用 GitHub Actions 将 Vuepress 项目部署到阿里云 ECS

前端

2023-12-17 12:48:23

自动部署 Vuepress 项目到阿里云 ECS 实例

概述

在这篇博客中，我们将逐步指导您如何使用 GitHub Actions 将 Vuepress 项目自动部署到阿里云 ECS 实例。通过设置自动化工作流，您可以轻松管理代码更改并确保您的网站始终保持最新。

先决条件

在开始之前，您需要以下先决条件：

具有 Vuepress 项目的 GitHub 存储库
阿里云 ECS 实例
SSH 密钥对（用于连接到 ECS 实例）
Nginx Web 服务器

设置 GitHub Actions 工作流

创建 GitHub Actions 工作流目录： 在您的 GitHub 存储库中，创建一个名为 .github/workflows 的目录。
创建工作流 YAML 文件： 在该目录中，创建一个 YAML 文件，例如 deploy.yml。
添加 YAML 代码： 在 YAML 文件中，添加以下代码：

name: Deploy Vuepress to Alibaba Cloud ECS
on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '16'
          cache: 'npm'
      - run: npm install
      - run: npm run build
      - name: Deploy to Alibaba Cloud ECS
        uses: azure/webapps-deploy@v2
        with:
          app-name: 'my-vuepress-app'
          publish-profile: ${{ secrets.ALIYUN_ECS_DEPLOYMENT_PROFILE }}
          package: 'dist'

替换占位符： 确保将 my-vuepress-app 替换为您的应用名称，并将 {{ secrets.ALIYUN_ECS_DEPLOYMENT_PROFILE }} 替换为您的阿里云 ECS 部署配置文件的密钥（请参阅阿里云文档了解如何创建部署配置文件）。

配置 Nginx

安装 Nginx： 在您的 ECS 实例上安装 Nginx。
创建虚拟主机配置文件： 创建一个虚拟主机配置文件，例如 /etc/nginx/sites-available/vuepress.conf。
添加 Nginx 配置： 添加以下配置：

server {
  listen 80;
  server_name example.com;
  root /var/www/html/dist;
  index index.html;
}

替换占位符： 确保将 example.com 替换为您的域名，并将 /var/www/html/dist 替换为 Vuepress 生成的静态文件的路径。

完成部署

保存并提交 YAML 文件： 保存并提交 .github/workflows/deploy.yml 文件。
触发 GitHub Actions 工作流： 当您将代码推送到 main 分支时，GitHub Actions 工作流将触发。
部署 Vuepress 项目： 工作流将编译您的 Vuepress 项目、生成静态文件并将其部署到您的阿里云 ECS 实例上的 Nginx Web 服务器。

附加信息