Logo

菜单

发布于 2026-01-06 0 阅读
0

[GitHub Actions] 完整的 CI-CD Javascript 工作流 DEV 的全球展示挑战赛，由 Mux 呈现：展示你的项目！

[GitHub Actions] 完整的 CI/CD Javascript 工作流程

由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！

特征

此工作流程包含常见的持续集成/部署任务，您可以轻松地将其重用于任何 Web JavaScript 项目。

其中包括：

  • 合作评论
  • 质量测试
  • 在Netlify上部署
  • 使用Lighthouse进行审计

它适用于推送和拉取请求的情况。

为了展示这一工作流程，我选择了Dojo RealWorld实现。

RealWorld Dojo 横幅

我的工作流程

存储库工作流程

工作流程

合作第一！

单丝不成线，独木不成林。——
海伦·凯勒

通信工作流程

开源贡献不仅仅是代码。
它更关乎人们为了推动项目发展而进行的协作。

如果贡献者是第一次向项目提交 pull request，请给予他们应有的欢迎。第一次为开源项目做贡献可能会让人不知所措，因为需要考虑的因素很多：行为准则、许可证、指南……

即使 GitHub 通过在新贡献者加入项目时提供便捷的入门指导来简化他们的操作，也不要犹豫提供额外的背景信息：

first_interaction:
    if: github.event_name == 'pull_request'
    name: 'first interaction'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/first-interaction@v1
        with:
          repo-token: ${{ secrets.GITHUB_TOKEN }}
          pr-message: |
            Thanks for your first pull request on this project!
            This is a kindly reminder to read the following resources:
            - [code of conduct]()
            - [contribution guidelines]()
            It'll help us to review your contribution and to ensure it's aligned with our standards.
Enter fullscreen mode Exit fullscreen mode

我不是新投稿人！谁在乎呢？

即使你不是新贡献者，也不意味着你应该被忽略。由于审核可能需要一些时间，请立即留言欢迎新的贡献。即使是自动回复也能体现你的关心：

greetings:
    if: github.event_name == 'pull_request'
    runs-on: ubuntu-latest
    steps:
      - uses: kerhub/saved-replies@v1.0.0
        with:
          token: "${{ secrets.GITHUB_TOKEN }}"
          reply: |
            Hi @${{ github.event.pull_request.user.login }}, thanks for being part of the community :heart:
            We'll review your contribution as soon as possible!
Enter fullscreen mode Exit fullscreen mode

可重用的工作流程

我刚开始使用这个工作流程时，会actions/cache缓存依赖项以加快工作流程。

- name: Cache node modules
        uses: actions/cache@v2
        env:
          cache-name: cache-node-modules
        with:
          path: ~/.npm
          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-build-${{ env.cache-name }}-
            ${{ runner.os }}-build-
            ${{ runner.os }}-
Enter fullscreen mode Exit fullscreen mode

与此同时，我发现七月份发生了一些变化actions/setup-node，不再需要之前的样板代码了。

GitHub Actions：Setup-node 现在支持依赖缓存

需要重构吗？还没到！

这样的改变并没有影响我的工作流程，因为利用 GitHub 的新功能“可重用工作流” ，这些实现细节已经被隐藏在一个专门的、可重用的作业中。

这种可重用的工作流程被隔离在一个专门的存储库中。

on:
  workflow_call:
    inputs:
      command:
        required: true
        type: string

jobs:
  node_job:
    name: 'node job'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2.4.1
        with:
          node-version: '14'
          cache: 'npm'
      - run: npm ci
      - run: ${{inputs.command}}
Enter fullscreen mode Exit fullscreen mode

自动质量检查

质量检查

注：质量检查使用之前可重用的工作流程。

让你的代码更美观

Prettier是一款著名的代码格式化工具。
它会移除所有原始样式*，并确保所有输出的代码都符合一致的样式。

prettier:
    uses: kerhub/reusable-workflows/.github/workflows/node-job.yml@main
    with:
      command: npm run prettier --check \"**\"
Enter fullscreen mode Exit fullscreen mode

使用代码检查器确保可维护性

ESLint是一款用于识别和报告 ECMAScript/JavaScript 代码中发现的模式的工具，其目的是使代码更加一致并避免错误。

linter:
    uses: kerhub/reusable-workflows/.github/workflows/node-job.yml@main
    with:
      command: npx eslint --fix src/**/*.ts
Enter fullscreen mode Exit fullscreen mode

质量意味着即使无人监督，也要把事情做好。——
亨利·福特

未来的你会感谢你，因为你通过测试能够自信地提交代码。

unit_tests:
    name: 'unit tests'
    uses: kerhub/reusable-workflows/.github/workflows/node-job.yml@main
    with:
      command: npm run test
Enter fullscreen mode Exit fullscreen mode

部署

部署工作流程

您不想再手动部署了。

更改生效前请先审核！

您想预览因拉取请求而产生的更改。Netlify
提供了预览功能来满足这种需求！
通过在拉取请求上运行此作业，系统将生成一个预览 URL。

deploy_preview:
    name: 'deploy preview'
    if: github.event_name == 'pull_request'
    needs: [prettier, linter, unit_tests]
    uses: kerhub/workflows/.github/workflows/netlify-preview-deploy.yml@main
    with:
      build_directory: './output/dist'
    secrets:
      netlifyAuthToken: "${{ secrets.NETLIFY_AUTH_TOKEN }}"
      netlifySiteId: "${{ secrets.NETLIFY_SITE_ID }}"
      repoToken: "${{ secrets.GITHUB_TOKEN }}"
Enter fullscreen mode Exit fullscreen mode

它再次采用了可重用的工作流程：

on:
  workflow_call:
    inputs:
      build_directory:
        required: true
        type: string
      build_command:
        required: false
        type: string
        default: 'npm run build'
    secrets:
      repoToken:
        required: true
      netlifyAuthToken:
        required: true
      netlifySiteId:
        required: true

jobs:
  netlify:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2.4.1
        with:
          node-version: '14'
          cache: 'npm'
      - run: npm ci
      - run: ${{inputs.build_command}}
      - name: Deploy to Netlify
        uses: nwtgck/actions-netlify@v1.2
        with:
          publish-dir: './output/dist'
          github-token: ${{ secrets.repoToken }}
          deploy-message: "Deploy from GitHub Actions"
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.netlifyAuthToken }}
          NETLIFY_SITE_ID: ${{ secrets.netlifySiteId }}
Enter fullscreen mode Exit fullscreen mode

推向生产环境！

通过直接推送代码或合并拉取请求，此作业将部署您的 Web 应用程序的新版本。

deploy_live:
    name: 'deploy live'
    if: github.event_name == 'push'
    needs: [prettier, linter, unit_tests]
    uses: kerhub/workflows/.github/workflows/netlify-live-deploy.yml@main
    with:
      build_directory: './output/dist'
    secrets:
      netlifyAuthToken: "${{ secrets.NETLIFY_AUTH_TOKEN }}"
      netlifySiteId: "${{ secrets.NETLIFY_SITE_ID }}"
Enter fullscreen mode Exit fullscreen mode

它再次采用了可重用的工作流程：

on:
  workflow_call:
    inputs:
      build_directory:
        required: true
        type: string
      build_command:
        required: false
        type: string
        default: 'npm run build'
    secrets:
      netlifyAuthToken:
        required: true
      netlifySiteId:
        required: true

jobs:
  netlify:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2.4.1
        with:
          node-version: '14'
          cache: 'npm'
      - run: npm ci
      - run: ${{inputs.build_command}}
      - name: Deploy to Netlify
        uses: nwtgck/actions-netlify@v1.2
        with:
          publish-dir: './output/dist'
          production-deploy: true
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.netlifyAuthToken }}
          NETLIFY_SITE_ID: ${{ secrets.netlifySiteId }}
Enter fullscreen mode Exit fullscreen mode

审计

审计工作流程

Lighthouse分析 Web 应用程序和网页，收集现代性能指标和有关开发人员最佳实践的见解。

通过向代码库推送更改，不应影响性能和常见的最佳实践。

针对这种需求，工作流程包括 2 个任务：

lighthouse_preview:
    name: 'lighthouse preview'
    needs: deploy_preview
    uses: kerhub/reusable-workflows/.github/workflows/lighthouse-preview.yml@main
    with:
      siteName: 'dojo-realworld'
    secrets:
      netlifyAuthToken: "${{ secrets.NETLIFY_AUTH_TOKEN }}"
  lighthouse_live:
    name: 'lighthouse live'
    needs: deploy_live
    uses: kerhub/reusable-workflows/.github/workflows/lighthouse-live.yml@main
    with:
      siteUrl: 'https://dojo-realworld.netlify.app/'
Enter fullscreen mode Exit fullscreen mode

我们真的结束了吗？

参与开源项目需要投入大量时间，因为你需要：

  • 了解其目标，以确保您的捐款能够匹配
  • 请阅读所有指南
  • 请等待审核后再提交您的作品

对这样一个项目如此投入，值得我们向贡献者致谢，而不仅仅是合并他们的工作。

但是……没有 pull_request 合并事件。
要识别已合并的内容，您需要两个信息：

  • 事件（推送）
  • 拉取请求的合并状态

以下是我在专用工作流程中使用的解决方案：

on:
  pull_request:
    types: closed

jobs:
  contribution-greetings:
    if: github.event.pull_request.merged
    runs-on: ubuntu-latest
    steps:
      - name: greet the contributor
        uses: kerhub/saved-replies@v1.0.0
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          reply: |
            Thanks @${{ github.event.pull_request.user.login }}!
            Your contribution is now fully part of this project :rocket:
Enter fullscreen mode Exit fullscreen mode

提交类别：

维护人员必备技能

YAML 文件或代码链接

工作流 YAML 文件：

更多资源/信息

使用的 GitHub Actions：

GitHub 可重用工作流已创建：

文章来源：https://dev.to/geromegrignon/github-actions-full-ci-cd-javascript-workflow-39om
如何在 React 中实现懒加载 ...
我尝试破解我的智能振动器时学到了什么