返回

随心随欲轻松掌握，Github Actions自动部署Vue项目到Nginx服务器下

前端

使用 GitHub Actions 自动部署 Vue 项目到 Nginx 服务器

在当今快节奏的开发环境中，自动化部署是节省时间和精力、专注于更重要任务的关键。GitHub Actions 提供了一种无缝的方式来实现此目标，尤其适用于像 Vue 这样的现代 JavaScript 框架。本文将引导您完成使用 GitHub Actions 自动将 Vue 项目部署到 Nginx 服务器的完整过程。

准备工作

在开始之前，确保您已经满足以下前提条件：

  • GitHub 账户和包含 Vue 项目的仓库
  • 配置好 Nginx 的服务器
  • 可以访问 GitHub 仓库的 SSH 密钥

配置 GitHub Actions

  1. 创建新的 GitHub Actions 工作流程。
  2. 添加一个名为 "deploy-to-nginx" 的工作，负责部署项目。
  3. 在工作中配置以下步骤：
    • 签出代码
    • 安装依赖项
    • 构建项目
    • 使用 SSH 部署到 Nginx
name: deploy-to-nginx

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2
      - name: Install dependencies
        run: npm install
      - name: Build project
        run: npm run build
      - name: Deploy to Nginx
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.HOST }}
          username: ${{ secrets.USERNAME }}
          key: ${{ secrets.KEY }}
          port: 22
          script: |
            cd /var/www/html
            rm -rf *
            cp -r ~/project/* .

触发工作流程

配置完成后，将代码推送到 GitHub 仓库以触发工作流程。GitHub Actions 将自动运行 "deploy-to-nginx" 工作，将项目部署到 Nginx 服务器。

优点

  • 节省时间： 自动化部署消除了手动部署的繁琐过程，节省了大量时间。
  • 提高可靠性： GitHub Actions 提供了一个可控和一致的环境，降低部署失败的风险。
  • 专注于更重要的事情： 您可以将更多时间投入到开发、测试和改进应用程序，而不是处理部署任务。

结论

通过利用 GitHub Actions，您可以轻松实现 Vue 项目的自动部署。这将释放您宝贵的时间和资源，让您专注于更重要的任务。拥抱持续集成实践，简化您的开发流程，加速您的应用程序交付。

常见问题解答

  1. 我可以在哪个操作系统上运行 GitHub Actions 工作流程？

    • GitHub Actions 支持各种操作系统，包括 Ubuntu、macOS 和 Windows。

  2. 我可以使用哪些 SSH 密钥来部署到我的服务器？

    • 您可以使用任何可以访问 GitHub 仓库的 SSH 密钥，例如 OpenSSH 或 PuTTY 生成的密钥。

  3. 我如何自定义部署脚本？

    • 您可以根据您的需要修改 "deploy-to-nginx" 工作中的 "script" 部分以定制部署过程。

  4. 如果工作流程失败了怎么办？

    • 检查 GitHub Actions 日志以确定失败的原因，并进行必要的更改和故障排除。

  5. 如何提高部署的安全性？

    • 使用安全凭据存储解决方案（如 HashiCorp Vault）来安全地存储和管理您的 SSH 密钥。