search
LoginSignup
0

posted at

updated at

CodePipeLineを使用したCI/CDの構築

目的

以下のデプロイフローを実現

  • CodeCommitリポジトリのPushをトリガーに、CodeBuildによるビルド/テストを実行
  • ビルドに問題がなければWebアプリの実行ファイルをS3にデプロイ
  • S3にデプロイしたWebサイトをCloudFrontでキャッシング

参考記事

[AWS] CodeCommit + CodeBuild + CodePipeline + S3で静的コンテンツをデプロイする環境を作ってみる!

使用したAWSサービス

  • S3
  • CodeCommit
  • CloudFront
  • CodeBuild
  • CodePipeLine

CodeCommit

  • 新規リポジトリを作成

S3

  • 新規バケットを作成(アクセス許可はパブリックアクセスを全てブロック)

CloudFront

  • 新規ディストリビューションの作成
  • オリジンドメイン:作成したS3バケット
  • S3バケットアクセス:
    • OAIを使用(新規で作成)
    • バケットポリシー:自動で更新

CodeBuild

  • 新規プロジェクト作成

プロジェクトの設定

  • プロジェクト名を入力

ソース

  • ソースプロバイダに「AWS CodeCommit」を指定し、作成したリポジトリを選択

環境

  • 環境イメージ:マネージド型イメージ
  • オペレーティングシステム:Amazon Linux 2
  • ランタイム:Standard
  • イメージ:aws/codebuild/amazonlinux2-aarch64-standard:1.0
  • イメージのバージョン:常に最新
  • サービスロール:新しいサービスロール

Buildspec

  • 「buildspecファイルを使用」を選択し、ファイル名を入力

※こちらで指定するbuildspecファイルはソースプロジェクトに設置。

buildspec.yml
version: 0.1

phases:
 install:
  runtime-versions:
   nodejs: 12
  commands:
   - cd app
   # package.jsonのある階層に移動
   - npm ci
   # nodeのインストール
   - npm i n 
   - n latest
 build:
  commands:
   # テストやビルドの実行
   # S3へデプロイ
   - aws s3 sync dist/app s3://{S3バケット名} --delete
   # キャッシュ削除
   - aws cloudfront create-invalidation --distribution-id ${CLOUDFRONT_DIST_ID} --paths '/*'
 # アーティファクトの出力
 artifacts:
  files:
   - "**/*"

アーティファクト

  • タイプ:S3
  • 作成したバケットを選択

ログ

  • CloudWatchログ:ON

※作成したプロジェクトを選択し、「ソース」メニューからビルド対象のリポジトリやコミットの指定が可能


ポリシーの設定

CodeBuildプロジェクトの作成時、新規でCodeBuildのロールを生成した場合は以下の権限を付与する必要あり

  • S3(書き込み、削除)
  • CloudFront Create Invalidation

CodePipeLine

  • 新規プロジェクトを作成

パイプラインの設定を選択する

  • パイプライン名を入力し、「新しいサービスロール」を選択

ソースステージを追加する

  • ソースプロバイダー:AWS CodeCommit
  • 作成したリポジトリとブランチを選択
  • 検出オプション:AWS CodePipeLine
  • 出力アーティファクト形式:完全クローン

ビルドステージを追加する

  • プロバイダー:AWS CodeBuild
  • 作成したCodeBuildプロジェクトを選択
  • buildspec.ymlに埋め込むための環境変数を設定
    • CLOUDFRONT_DIST_ID:CloudFrontのディストリビューションID

デプロイステージを追加する

  • デプロイ先のS3の情報を設定

※デプロイしたファイルをルートに配置する場合、S3オブジェクトキーは「/」を入力

動作確認

  • CodeCommitから変更内容をPushして、S3にデプロイされること、CloudFrontのオリジンURLからWebアプリを参照できることを確認

終わりに

CI/CDを概念としてしか理解していなかった著者ですが、実際に調べて手を動かすとかなり理解が深まりました。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
0