Github Actionsを導入する

志水亮介 (Ryosuke Shimizu)

Github Actionsで実行したいもの

候補

ESLint, Prettier

Sentry（エラー監視）

Developer(無料)、使用出来るユーザーは1人だけ。

https://sentry.io/pricing/

Playwright（E2E）

参考

志水亮介 (Ryosuke Shimizu)

まずはGitHub Actions やってみる

今回はまず触ってる。

どうやってGitHub Actions を触るか、どんな機能があるか確認します。

下記で作成したサイトのgithubに対して行う。

バージョンなどは上記スクラップにあります。

なんて？

これは、GitHub ActionsおよびCodespacesについてのデモンストレーションの開始を歓迎するテキストです。このデモでは、GitHub Actionsを使用してCI/CDワークフローを自動化する方法について学びます。また、Codespacesを使用して、この開発環境にアクセスする方法についても触れます。

デモの終了時には、以下のことができるようになります。

GitHub Actions用のYAMLワークフローを記述、実行、表示する方法。
これらのワークフローを使用して、エラーを見つけ、コードの品質を確保する方法。
GitHub Actionsの一般的なユースケースを識別する方法。

このデモでは、GitHub Actionsを使用して、ポートフォリオウェブサイトをGitHub PagesにデプロイするいくつかのCI/CDワークフローを実行して、練習することができます。ポートフォリオをカスタマイズして、世界と共有してください。

それでは、始めましょう！🚀

GitHub Pagesにデプロイするまでのplaygroundやることになってる。うーむ。

あ、書けそう。

簡単な例 (Hello, World) を参考にトリアへず動かしてみます。

最初の name はワークフローの名前らしいです。

on でリポジトリへの push 時にこのワークフローは実行されると定義しています。

ブランチの指定はないので、全てのブランチで push された時に動作します。

jobs以下は

このワークフローには、単一のジョブ(build)が定義されており、Ubuntu環境で実行されます。このジョブには、名前が"Greeting"と定義され、1つのステップがあります。このステップでは、コマンドラインで"Hello, World!"というメッセージを出力するコマンドが実行されます。

勘で書きますが

jobs: ワークフロー内で実行内容の定義
build: ？？？
name: ジョブ名
runs-on: 実行する環境を指定
steps: 処理をステップごとに書けるのかな？ run, run, run みたいな感じで
run: 実際のシェルスクリプト書くのかな？

まだ、こんな感じ理解。

以下を見ればいいけど、長くてまだ見れてない。

作成したワークフローを実行してみましょう。トリガーはブランチ関係なくpushすればいいかもと思うので

README.md を適当に編集して push してみる。

Action の作成、編集、ワークフローの実行までできた。echoコマンド実行しただけだけど。

志水亮介 (Ryosuke Shimizu)

まずはGitHub Actions やってみる

.github/workflows/main.yml

# アクション名
name: CI

# ワークフローが実行されるトリガー
on: push

# Node 環境をセットアップ
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: checkout
        uses: actions/checkout@v3
      - name: setup-node
        uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: npm
      - name: yarn-install
        run: yarn
      - name: test
        run: yarn run jest
      - name: eslint
        run: yarn next lint

解説

アクション名が「CI」
コードがリポジトリに push されたときに実行される
Node.js の環境をセットアップするためにジョブを定義
- ジョブが Ubuntu 環境上で実行されること
- ジョブが複数のステップで構成されること
  - ステップごとに、特定のアクションを定義
    - actions/checkout@v3 を使ってリポジトリをチェックアウト
    - actions/setup-node@v3 を使って Node.js 環境をセットアップ
    - yarn コマンドを使って依存関係をインストール
    - yarn run jest を使ってテストを実行
    - yarn next lint を使ってコードの静的解析を実行

この設定ファイルを GitHub にアップロードすると、GitHub Actions が自動的に実行され、CI パイプラインが動作するようになります。具体的には、コードの変更がリポジトリに push されたときに、定義されたジョブとステップが順番に実行されます。

理解できていない部分。誤っている箇所などあると思うが、一応動くものは完成。

ローカルでeslintが動いてエラー出たところはgithub actions上でも出たので。一応はいいのでは

志水亮介 (Ryosuke Shimizu)

今後

目的（github actionsの導入）は達成したのでこのスクラップはクローズする。

さらに理解を進めるときに下記を読むこととする