AWS CodePipelineとは
AWS CodePipeline はフルマネージド型のサービスで、アプリケーションとインフラストラクチャをアップデートするパイプラインのリリースを自動化するサービスです。
今回はCodePipelineを使ってvueを使ったFront WebサービスのCI/CD手法を紹介します。
CI/CD環境(Vue)
今回の環境は下記のような構成です。
AWS環境下でCloudFront+S3の静的ウェブサイト構成です。
S3にVue.jsをデプロイします。
CodePipelineにてソースコードの更新を検知、CodeBuildでVueのビルドを行います。
CodeDeployは不要で、CodePipeline内のDeploy機能でデプロイします。
今回ソースコードの管理システムについては人それぞれかと思うので割愛します。
backlogを用いたソースコード管理におけるCI/CDは下記でご紹介しています。
CloudFront+S3構築についても今回は割愛します。
CodePipeline作成
設定手順
①パイプラインの設定を選択する
パイプライン名：任意
サービスロール：新しいサービスロール
ロール名：任意
チェックボックス：チェック
「次に」
②ソースステージを選択する
各環境によるため割愛します。
③ビルドステージを追加する
プロバイダーを構築する：CodeBuild
リージョン：任意
プロジェクト名：「プロジェクトを作成する」でCodeBuildへ。
④CodeBuild
プロジェクト名：任意
下記のように設定。
基本何でも良いですが、AWSのベストプラクティスとしては最新版が良いそうです。
⑤環境変数部分だけ入力します。
名前：値
S3_BUCKET_NAME：S3バケット名
CLOUDFRONT_DISTRIBUTION_ID：CloudFrontディストリビューション名（E~~~~~の大文字英数字のやつ）
⑥Buildspecをコマンドで挿入
Buildspec
version: 0.2
phases:
pre_build:
commands:
- yarn install
build:
commands:
- yarn build
post_build:
commands:
- aws s3 sync ./dist s3://${S3_BUCKET_NAME} --delete
- aws cloudfront create-invalidation --distribution-id ${CLOUDFRONT_DISTRIBUTION_ID} --paths '/*'コピペでOKです。既設のS3内のデータを削除、デプロイ前にCloudFrontで現在取得しているキャッシュの削除まで実施しています。
これでCodeBuildの作成は終了です。
⑦CodePipelineに戻る
デプロイは「S3」
デプロイしたいS3を選択します。
デプロイする前にファイルを抽出するをチェックします。これをしないと、zipファイルがデプロイされてしまいます。
完成です！
CI/CDを試す
CodePipeline作成後、自動で一度CI/CDが走ります。
これで無事Ｓ３にデプロイされていればＯＫです。
AWSの学習方法
私はAWSの最初の勉強を下記で行いました。Udemyの講座です。
非常にわかりやすく、勉強になりました。
