GITHUBアクションであなたのフロントエンドにCIを加える方法

アルバシルヴェンテ💃🏼

今週、私は、私がどのようにISを自動化し始めたかについて、あなたに話すことについて考えました!Mybugプロジェクトこの投稿では、簡単なワークフローでCIを作成するためにGithubアクションを使用する方法を教えてください🤗閉じるこの動画はお気に入りから削除されています💜 dawntraoz.com/blog/how-to-ad…
午後18時15分- 2020年8月26日
このポストでは、どのように簡単にGitHubアクションの助けを借りて継続的な統合を開始することを示したい.

導入

我々が始める前に、我々がポストについて話すつもりである概念を批評することはうれしいです.

連続積分とは

連続的な統合(CI)は開発者が頻繁に共有リポジトリにコードを統合開発者です.理想的なケースは、各統合(マージ)は、自動ビルドとテストによって検証することができます.

GithubアクションとGithubワークフローとは

Githubアクションを使用すると、コードを格納するのと同じ場所にソフトウェア開発ワークフローを自動化できます.https://github.com/ . また、プルの要求や問題に協力します.それらを使用すると、エンドツーエンドのCIと継続的な配置(CD)機能を直接リポジトリに構築できます.
コミュニティによって共有されたアクションを自分自身のアクション、または使用してカスタマイズできますmarketplace .
ワークフローは、カスタム自動化されたプロセス、個々のタスク(動作)の組み合わせであり、あなたの倉庫でビルド、テスト、パッケージ、リリース、または展開することができます.
独自のワークフローを構成するには、リポジトリ内のYAMLファイルを作成する必要があります.
私は今オープンソースプロジェクトをつくっているので、一緒に仕事を始める頃には、仕事のCIを持つことが重要です.なぜ?そのような方法で、我々はすべて同じコードとガイドラインで働きます.
しかし、私は、それがどのようにそれをセットアップすることができるかについて見た後に、私はこれから私がすべての私のプロジェクトでそれを使うつもりであると言いさえしなければなりません.閉じるこの動画はお気に入りから削除されています💜

プロジェクトの準備

ワークフローを設定するには、継続的な統合プロセスを自動化することができます.
私の場合、ESPINTで構成された規則とJESTでの単体テストが各統合で合格することを確認したいです.これを行うには、次のスクリプトをパッケージに作成しました.JSON :

"lint": "eslint --ext .js, .vue --ignore-path .gitignore ."
"test:unit": "jest"

また、私のプロジェクトが別のオペレーティングシステムで動作することを確認したいので、追加する必要がありました.GITAttributeファイルを使用して、OS間の改行形式を使用しないようにします.

# Enforce Unix newlines
* text=auto eol=lf

独自のワークフローの設定

この記事のために、私はisを説明するつもりです!MyBugの設定はnuxtjsで作られていますが、同じ環境(ノード)で構築されているのでJavascriptプロジェクトにも適用できます.
YAMLファイルを作成するには、次の2つのオプションがあります.

1 -私たちのGitHubリポジトリに移動し、アクションタブをクリックすると、あなたが開始するのを助けることができるワークフローの提案が表示されます.あなたは最高のプロジェクトに合わせて、このワークフローボタンを設定するをクリックして1つを選択することができます.

2 -フォルダを作成します.Githubとその中にワークフローフォルダーを追加します.YLファイルを作成します.

Both options will end with a YAML file in the path .github/workflows/CI.yml.

ciの設定から始めましょう.YMLファイル.
まず、名前を付けて、ワークフローを実行するイベントを選択します.

# Name your workflow
name: CI

# Set on which events you want run the actions.
# In this case the workflow will run on push for master and on pull request for master and develop branches
on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master, develop ]

PRをマスターまたは開発するたびに実行するワークフローは、シーケンシャルまたは並列に実行できる1つ以上のジョブで構成されます.
エーworkflow job 同じランナーで実行するステップのセットですrunner GitHubがジョブを実行するために提供するホスト仮想環境.

Although it also gives us the possibility of doing so in our own self-hosted environment.

私のプロジェクトを別のオペレーティングシステム(Windows、Linux、MacOS)で同じノードバージョンで実行したかったのでstrategy これはジョブのビルド行列を作成します.

jobs:
  # This workflow contains a job called "integration"
  integration:
        # A strategy that defines different variations of an environment to run each job in.
    strategy:
      matrix:
        os: [ubuntu-latest, macos-latest, windows-latest]
        node: [12]
    # The runners that the job will run on
    runs-on: ${{ matrix.os }}

ランナーを設定すると、統合ジョブでフォローしたい手順を定義できます.
エーstep コマンドを実行し、セットアップタスクを実行するか、リポジトリ内でアクションを実行できます.各ステップでは以下のようなプロパティーを定義します:

Githubに表示する名前

を使用して、動作によって定義されたキー/値のペアを渡すために実行するアクションを指定します

条件が満たされない限り、ステップが動くのを防ぐ

実行し、OSシェルでコマンドを実行するには

前に言ったように、私のeslintの設定が期待通りに満たされているかどうかチェックしたいと思います.それを達成するために必要な手順を見ましょう.

最初にノードを設定する必要があります.js

ノードを追加するには私の環境に対するJSsetup-node , githubによって検証され、ノードをノードに渡し、パラメータノードを定義しました.

So when we have to change the node version we have to do it only in one place.

ノードが設定されると、ワークフローにはリポジトリへのアクセスが必要ですcheckout .

  jobs:
    integration:
      # ...
      # Steps represent a sequence of tasks that will be executed as part of the job
      steps:
        - name: Setup Node.js environment
          uses: actions/[email protected]
          with:
            node-version: ${{ matrix.node }}

        - name: Checkout master branch
          uses: actions/checkout@v2

NPM依存関係をインストールしましょう

依存関係をインストールするには、NPMのインストールコマンドを実行する手順を追加するのと同じくらい簡単です.
しかし、我々は効果的な方法でそれをしたいので、いくつかのキャッシュを我々のnodeoundモジュールに加えましょう.そのためにcache キャッシュされるフォルダパスを指定する動作( nodeound module )と、キャッシュを復元して保存するための明示的なキー(パッケージロック. JSON ).
手順で利用可能なif条件を使用すると、このキャッシュアクションの出力(キャッシュHit -一致キーを示すBoolean)がtrueかfalseであるかどうかを確認できます.

  jobs:
    integration:
      # ...
      # Steps represent a sequence of tasks that will be executed as part of the job
      steps:

        # ... Before steps ...

        - name: Cache node_modules
          uses: actions/[email protected]
          with:
            # A list of files, directories, and wildcard patterns to cache and restore
            path: node_modules
            # An explicit key for restoring and saving the cache
            key: ${{ matrix.os }}-node-v${{ matrix.node }}-deps-${{ hashFiles(format('{0}{1}', github.workspace, '/package-lock.json')) }}

        - name: Install dependencies
          if: steps.cache.outputs.cache-hit != 'true'
          run: npm install

        # ... After steps ...

チェックとユニットテスト

今回は、コマンドだけでeslintとテストが正しく合格することを確認することができます.
コマンドを実行する手順を作成します.NPM Run LintとNPM Run Test : Unit :各ステップは、エラーを与えたりコマンドを実行したりしない場合、それぞれのステップが負または正の応答を行います.
さらに、我々がテストをしたので、我々は我々が成し遂げたコード報道を示すために特に興奮しています.そういうわけで、我々は行動を使います:codecov/codecov-action . を使ってhttps://www.codecov.io/ ウェブサイトは、増加または減少の範囲で我々のプル要求の歴史を持ちます.また、私たちは私たちのカバレッジの割合を表示することができますreadme.md , 追加

  <img src="[https://codecov.io/gh/](https://codecov.io/gh/)<GitHub_name>/<GitHub_repo>/branch/master/graph/badge.svg?token=<your_token>" />

次のようになります.

  jobs:
    integration:
      # ...
      # Steps represent a sequence of tasks that will be executed as part of the job
      steps:

        # ... Before steps ...

        - name: Run ESLint
          run: npm run lint

        - name: Run unit tests
          run: npm run test:unit

        - name: Code coverage
          uses: codecov/[email protected]

ワークフローの各セクションを別々に見たら、ここで完全なCIを残します.YMLファイルので、すべてのプロジェクトで使用することができます!

# Name your workflow
name: CI

# Set on which events you want run the actions.
# In this case the workflow will run on push for master and on pull request for master and develop branches
on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master, develop ]

jobs:
  # This workflow contains a job called "integration"
  integration:
        # A strategy that defines different variations of an environment to run each job in.
    strategy:
      matrix:
        os: [ubuntu-latest, macos-latest, windows-latest]
        node: [12]
    # The runners that the job will run on
    runs-on: ${{ matrix.os }}

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      - name: Setup Node.js environment
        uses: actions/[email protected]
        with:
          node-version: ${{ matrix.node }}

      - name: Checkout master branch
        uses: actions/checkout@v2

      - name: Cache node_modules
        uses: actions/[email protected]
        with:
          # A list of files, directories, and wildcard patterns to cache and restore
          path: node_modules
          # An explicit key for restoring and saving the cache
          key: ${{ matrix.os }}-node-v${{ matrix.node }}-deps-${{ hashFiles(format('{0}{1}', github.workspace, '/package-lock.json')) }}

      - name: Install dependencies
        if: steps.cache.outputs.cache-hit != 'true'
        run: npm install

      - name: Run ESLint
        run: npm run lint

      - name: Run unit tests
        run: npm run test:unit

      - name: Code coverage
        uses: codecov/[email protected]

私は、それが役に立ちました、そして、あなたが何か新しいことを学ぶことなくこのポストを去らないことを望みます.あなたが何か疑問を持っている場合は、それを読んでいただきありがとうございます

If you want to use more badges as the one for the coverage, check this website: https://badgen.net/ (it's amazing!)