TypeScriptのPJにGithub Actionsを導入する
すでに作ったプロジェクトに導入する
学習用のサンプルに作ったプロジェクトに途中で、CI/CDツールの導入をやってみました。
🧑🎓できるようになること
ESLintのコマンドを毎回実行しなくても自動で静的解析が行われるようになる。とはいってもVisual Studio Codeでコーディングしてるときもチェックは自動でされてます笑
🙃そもそもワークフローとは?
まとめると、イベントに応じて実行される作業の流れを定義するものです。
- ワークフローは、リポジトリ内の .github/workflows ディレクトリに格納されています。
- ワークフローは、YAML形式で記述されています。
- ワークフローは、リポジトリのイベントに応じて実行されます。
- ワークフローは、ジョブとステップから構成されています。
- ワークフローは、ジョブを並列に実行できます。
設定の仕方
GitHub Actionsワークフローファイルの作成: .github/workflows ディレクトリを作成し、その中にGitHub Actionsのワークフローファイルを作成します。ファイル名は任意ですが、通常は lint.yml などと名付けます。以下はワークフローファイルの例です。
フォルダ構成はこんな感じです。
name: Lint
on:
push:
branches:
- main # またはメインブランチの名前
jobs:
lint:
runs-on: ubuntu-latest
steps:
- name: Checkout Repository
uses: actions/checkout@v2
- name: Set up Node.js
uses: actions/setup-node@v2
with:
node-version: 16.17.1 # 利用したいNode.jsバージョンを指定
- name: Install Dependencies
run: npm install
- name: Run ESlint
run: npm run lint # ESlintを実行するnpmスクリプト名に合わせて設定
ESlintの設定ファイル: TypeScriptプロジェクトには .eslintrc.js などのESlintの設定ファイルが必要です。プロジェクトルートにこのファイルを作成し、適切なESlint設定を行います。以下は簡単な例です。
module.exports = {
parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint'],
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended'
],
rules: {
// 任意のカスタムルールを追加できます
}
};
npmスクリプトの設定: package.json ファイルにESlintを実行するためのnpmスクリプトを追加します。以下は例です。
"scripts": {
"lint": "eslint . --ext .ts"
}
GitHubリポジトリにプッシュ: これらの設定をプロジェクトに追加し、GitHubリポジトリにプッシュします。
これで、GitHub Actionsを使用してTypeScriptプロジェクトでESlintのチェックを自動化できます。GitHubにプッシュすると、指定したブランチ（通常はmainブランチ）に対してESlintのチェックが自動的に実行されます。エラーがある場合、GitHub Actionsのビルドが失敗し、問題がリポートされます。
私が使った方法だと、ブランチを分けてGithubにpushした後にmainブランチにマージしました。そうすると、自動で、CI/CDの設定がActionsというタブで確認できるページにされていました!
いつの間に....
ワザと、使用を禁止しているシングルクオートを使用したので、静的解析のチェックでエラーが発生しました!
このように、コードの書き方のルールが正しいかのチェックも自動でやってくれます。
まとめ
CI/CDツールは仕事では使ったことが今までなかったのですが、今後は使う機会が出てきそうなので、キャッチアップしてみました。テストコードまでは書いていないので今後はテストの自動化までやりたいですね。
Discussion