1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

[AWS]codecommitにpushされたらs3に静的コンテンツをリリースする環境を作成しよう

Posted at

説明

AWSでCI/CD環境を一度作成してみたかったので、作成してみました。
このような記事は腐るほどありますが、自分のメモのために記事としてまとめます。

概要

awsのサービス「CodeCommit」と「CodeBuild」を使用します。CodeCommitやCodeBuildなどの細かい説明は省きますが、CodeCommitはソース管理サービス(gitを使用)で、CodeBuildはビルドサービス(テストやビルドの自動化)です。

今回はCodeCommitに資源がpushされたらCodeBuildが動いてs3に資源がリリースされるところ(派生でCloudFrontでキャッシュさせるところ)まで作成してみます。

準備

CodeCommitのリポジトリ作成

※作成手順は割愛。リポジトリ作成してからローカルにclone(iamのcodecommitのキー作成を忘れずに。)までします。
スクリーンショット 2020-12-18 16.23.42.png

適当なhtmlとbuildspec.ymlもコミットしておくことにします。(後ほどCodeBuildというサービスで使います)

test.html
<!DOCTYPE html>
<html lang=“ja”>
  <head>
    <meta charset=“UTF-8” />
    <title>test page</title>
  </head>
  <body>
    <h1>ci/cdのテストページです</h1>
  </body>
</html>

バケット名は次で作るs3バケット(test-bucket-20201218)と揃えておきます。

buildspec.yml
version: 0.1

phases:
  build:
    commands:
      - aws s3 sync --delete src s3://test-bucket-20201218

静的コンテンツ格納のs3作成

静的コンテンツを格納、ホスティングさせるS3バケットを作成します。
スクリーンショット 2020-12-18 16.26.54.png

CodeBuildの作成

ここからちょっと丁寧目に書きます。
ビルドプロジェクトの作成を押します。
スクリーンショット 2020-12-18 16.50.29.png

ソースプロバイダはCodeCommitにして、リポジトリを入力するとブランチを入力できる欄が現れます。(今回はmasterにしておきます。)
スクリーンショット 2020-12-18 16.52.38.png

環境はlinuxを選択します。
スクリーンショット 2020-12-18 17.03.17.png

ランタイム他の設定です。
スクリーンショット 2020-12-18 17.04.16.png

ロール名はデフォルトで設定されているものを使用しました。

さらに今回はbuildspec.ymlをリポジトリのルートディレクトリ直下に置きますのでここは書くことはないです。

スクリーンショット 2020-12-18 17.05.58.png

次はアーティファクトをS3に指定します。
スクリーンショット 2020-12-18 17.08.48.png

ここまででCodeBuildは作成できましたが、S3へアップロードする権限がないので付与してあげましょう。
今回はS3へのFullAccessをアタッチします。
スクリーンショット 2020-12-18 17.11.52.png

CodePipileneの作成

そして、CodePipilineの設定をしましょう。
CodeCommitへのpushをトリガーにCodeBuildが動作する設定をしてあげます。

パイプラインを作成するを押します。

スクリーンショット 2020-12-18 17.19.46.png

パイプライン名、ロールの設定をします。

スクリーンショット 2020-12-18 17.21.38.png

次はソースのプロバイダなどの設定。以下の通り設定します。

スクリーンショット 2020-12-18 18.49.47.png

ビルドステージには先程作成したcodebuildのプロジェクトを指定します。

スクリーンショット 2020-12-18 19.50.44.png

デプロイステージは特に設定しません。
buildspec.ymlの中でs3にputすることを書いているからです。

スクリーンショット 2020-12-18 19.53.39.png

これでcpdepipelineが完成しました!
スクリーンショット 2020-12-18 20.09.11.png

試しに0byteのテキストファイルをgit pushしてみました。きちんとs3が更新されています。

スクリーンショット 2020-12-18 20.14.00.png

何度か失敗していますが、これはbuildspec.ymlに
aws s3 sync --delete src s3://test-bucket-20201218

と書いてあるのにリポジトリにsrcフォルダを用意しなかったからです。
スクリーンショット 2020-12-18 20.10.54.png

ひとまずこれでgitのpushを契機にS3へのアップロードはできるようになりました!!ヤッター

cloudfrontの設定

次回に回します。

codedeployも使ってみたいなぁ・・・あとcloudformationも。

1
2
0

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
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?