20240724_AWSとGitHubを連携して、簡単にCICDを体験しよう

JAWS-UG初心者支部で発表したスライド。
AWSとGitHub Actionsを連携し、CloudFront＋S3でホストした静的サイトへの変更にCI/CDを適応する方法を詳説。

Transcript

1. Yutaka Kozuka 2024/07/24 JAWS初心者支部 #61勉強・LT会 AWSとGitHubを連携して、 簡単にCI/CDを体験しよう
2. 自己紹介（Yutaka Kozuka） 簡単な肩書: • 2024 Japan AWS Jr. Champions • 外資SIer・コンサルファームで勤務 • wakaru-blog.com（ブログ）運営 業務での取り組み: • インフラアーキとして、インフラ設計・構築～運用 引継ぎまで幅広く対応。 • 現在はAmazon Elastic Kubernetes Serviceを利用した、コンテナアプリケーションの 基盤構築を担当中。
3. 目次 1.CI/CDとは 2.今回の構成 3.フォルダ構成 4.変更前の画面 5.変更内容と変更後の画面 6.変更内容の説明（GitHubシークレット） 7.変更内容の説明（CDワークフロー） 8.変更内容の説明（CIワークフロー） Appendix 1.注意事項と推奨構成
4. CI/CDとは CI： Continuous Integration CIとは、開発者が行ったコード変更を 頻繁に統合し、問題を早期に検出で きるようにすること。 1. 開発者がコードをリポジトリにプッ シュする 2. 自動ビルドとテストがトリガーされる 3. 問題があれば早期にフィードバック を得る CD： Continuous Delivery CDとは、CIが終わり次第、本番環境 にデプロイできる状態に保つこと。 1. CIのプロセスを通過したコードは、 自動的にステージング環境にデプ ロイされる 2. 追加のテストや承認プロセスを経 て、本番環境にデプロイされる準 備が整う CD： Continuous Deployment CDとは、コードの変更を自動で本番 環境にデプロイすること。 1. Continuous Deliveryのプロセ スをさらに進め、ステージング環境 での承認プロセスを省略する 2. テストに合格したコードは自動的 に本番環境にデプロイされる
5. 今回の構成 今回の構成で実行されるCI//CDは以下の通り AWS Cloud Amazon CloudFront Amazon S3 GitHub Repository レポジトリへのプルリクをトリ ガーに、キャッシュを削除 レポジトリへのプルリクをトリ ガーに、S3へコードを同期 プルリクエスト 自動テスト CI ・自動リンティング （コードに問題がないか確認） CD ・S3にレポジトリのコードを同期 ・CloudFrontのキャッシュを削除
6. 変更前のフォルダ構成 Repository/ ├── package.json ├── package-lock.json ├── eslint.config.mjs │ ├── .github/ │ └── workflows/ │ ├── ci.yaml │ └── cd.yaml │ ├── AWS/ │ └── cloudfront-s3.yml │ └── Frontend/ ├── images/ │ ├── banana.png │ └── grape.png ├── index.html ├── styles.css └── scripts.js • package.json:Node.jsプロジェクトの依存関係と設定を 記述したファイル。eslintの利用について書き込まれている。 • eslint.config.mjs:ESLintの設定を記述するJavaScript モジュールファイル。 • ci.yaml:eslintを実行するためのワークフローファイル。 • cd.yaml: S3への同期・CloudFrontのキャッシュ削除を実 行するためのワークフローファイル。 • 構成は「.github/workflows/<workflow file>」である必 要がある。 • 簡単なフロントエンドコードが格納されている。 • 今回は、images/とscripts.jsを変更する。
7. 変更前の画面 変更前のアプリケーションの写真は以下の通り。 （CloudFrontのディストリビューションIDから開く） 現状: 果物が降ってくるシンプルなゲームとなっているが、バナナとグ レープのみ降ってくる状態である。 変更後: ローカルのコードを変更し、PRを作成・マージすることで、 CI/CDワークフローが実行され、アップルが追加で降ってくるこ とを確認する。
8. 変更内容と変更後の画面 変更後のアプリケーションの写真は以下の通り。 (CloudFrontのディストリビューションIDから開く) 変更後: バナナ、グレープに加えて、アップルが追加で降ってきている。 変更内容: 1. AWS IAMユーザーの認証情報（アクセスキーID、シーク レットアクセスキー、セッショントークン）を取得する。 2. GitHubシークレットに取得した認証情報を、登録する。 3. GitHubブランチを作成する。 4. images/ 内に、apple.pngを格納する。 5. scripts.js の内、banana.png、grape.pngについて 記載されているコードにapple.pngも追記する。 6. 変更内容をGitHubレポジトリにプルリクエストを作成し、プ ルリクエストをマージする。 7. CI/CDワークフローが自動で実行され、アプリケーションが 自動で更新される。
9. 変更内容の説明（GitHubシークレットの登録） 機密性の高い値はレポジトリのシークレットに登録することができる。 GitHubにて、Settings → Secret and variables → Actions と遷移する。 以下画像のように、登録するシークレット分、『New repository secret』をクリックし、NameとSecretに値を入力する。
10. 変更内容の説明（CDワークフロー） name: S3 sync and CloudFront cache invalidation on: pull_request: paths: ['Frontend/*'] jobs: s3_sync: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v4 - name: Configure AWS credentials uses: aws-actions/configure-aws-credentials@v4 with: aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }} aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }} aws-session-token: ${{ secrets.AWS_SESSION_TOKEN }} aws-region: ap-northeast-1 • on.pullrequestは、プルリクエストをトリガーに、ワークフローを 起動することを意味する。 • pathsは、トリガー対象である対象のパスを意味する。 → Frontend/に対して、PRが作成・マージ場合に、このワー クフローが実行される。 • uses: aws-actions/configure-aws-credentials@v4 は、GitHubがAWSの認証情報を設定して、AWSのサービス にアクセスすることを意味する。 → GitHubシークレットに設定した認証情報を参照し、AWS サービスに対して認証認可が行われる。 • jobsは、複数のジョブがあることを意味する。 • s3_syncは、ジョブの名前 • runs-onは、ジョブの実行マシンを指定 • stepsは、各ジョブを実行していくことを意味する。 • uses: actions/checkout@v4 は、GitHubがリポジトリの コードをチェックアウト（クローン）するということを意味する。 → Ubuntsuマシンで、レポジトリのコードがクローンされる。
11. - name: Define S3 bucket name env: S3_SYNC_BUCKET: ${{ secrets.S3_SYNC_BUCKET }} run: | echo "S3_SYNC_BUCKET is set to $S3_SYNC_BUCKET" - name: Sync to S3 env: S3_SYNC_BUCKET: ${{ secrets.S3_SYNC_BUCKET }} run: | aws s3 sync ./Frontend/ s3://$S3_SYNC_BUCKET ¥ --delete –exclude “README.md” ¥ --exclude “.git/*” –exclude “.github/*“ ¥ --exclude ".gitignore" --exclude "AWS" • env:は環境変数として、secrets.S3_SYNC_BUCKETの 値を受け取ることを意味する。 • Runsは、コマンドを実行することを意味する。 → GitHubシークレットに格納したS3名が表示される。 （デバック用に表示している。） → aws s3 sync コマンドが実行され、レポジトリのコード （Frontend/）が該当のS3バケットへ同期される。 • exclude <path>は、pathsに指定した値は同期しな いことを意味する。 変更内容の説明（CDワークフロー）
12. invalidate_cache: runs-on: ubuntu-latest needs: s3_sync steps: - name: Configure AWS credentials uses: aws-actions/configure-aws-credentials@v4 with: aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }} aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }} aws-session-token: ${{ secrets.AWS_SESSION_TOKEN }} aws-region: ap-northeast-1 - name: Invalidate CloudFront cache env: CLOUDFRONT_DISTRIBUTION_ID: ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }} run: | aws cloudfront create-invalidation --distribution-id ¥ $CLOUDFRONT_DISTRIBUTION_ID --paths "/*" → aws cloudfront create-invalidation コマンドが実 行され、 該当 CloudFront ディストリビューションに対して、 全てのキャッシュの削除が行われる。 変更内容の説明（CDワークフロー）
13. name: autmated lint on: pull_request: paths: ['Frontend/*'] jobs: build: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v4 - name: Set up Node.js uses: actions/setup-node@v4 with: node-version: '20' - run: npm install - run: npm run lint • uses: actions/setup-node@v4は、Node.jsをwithに指 定したバージョンで起動・セットアップすることを意味する。 → Node.jsを起動し、 npmパッケージをインストールし、 npm run lint を実行する。 変更内容の説明（CIワークフロー）
14. Wakaru-blog.com yutaka.kozuka.aws@gmail.com
15. 注意事項と推奨構成 • 今回は一番単純な構成として、AWS IAM ユーザーの認証情報を利用した、AWSサービス への認証認可を行った。 • しかし、認証情報は利用しないことがベストプラク ティスの（万が一漏洩した場合、AWSへ不正ア クセスされる）ため、本来はOpen ID Connectを利用した、トークンによる認証認可 をおkなう必要がある。 • 今回紹介した構成・推奨構成についても、以下 のブログに記載しているため、興味があればご確 認ください。 • 【CI/CDシリーズ➂】OpenID Connectを利用し たAWSとGithub Actionsのセキュアな接続 （CloudFormationの自動デプロイ） | わかるブ ログ (wakaru-blog.com)