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

# 説明
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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504218/dc78dc7f-7f39-f170-1656-d3ba042a85d2.png)

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

``` html: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）と揃えておきます。

``` yml: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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504218/49534233-b7db-ec1f-24b2-1c31ab2c4c0b.png)


## CodeBuildの作成
ここからちょっと丁寧目に書きます。
ビルドプロジェクトの作成を押します。
![スクリーンショット 2020-12-18 16.50.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504218/b6c84bc4-949c-f345-4e4a-18f67ccc4239.png)

ソースプロバイダはCodeCommitにして、リポジトリを入力するとブランチを入力できる欄が現れます。（今回はmasterにしておきます。）
![スクリーンショット 2020-12-18 16.52.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504218/f8dab2e0-da49-774b-4367-28805e74eaf5.png)

環境はlinuxを選択します。
![スクリーンショット 2020-12-18 17.03.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504218/8357cf69-769b-8160-3919-315ed0d5cb4c.png)

ランタイム他の設定です。
![スクリーンショット 2020-12-18 17.04.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504218/c278b4ed-eb92-e2c9-60be-d0c0e99b1c82.png)

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

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

![スクリーンショット 2020-12-18 17.05.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504218/a4ee99bc-20ab-469e-d62f-553edbfe76db.png)

次はアーティファクトをS3に指定します。
![スクリーンショット 2020-12-18 17.08.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504218/2b9612f9-62ac-ff0e-dd77-019336789209.png)

ここまででCodeBuildは作成できましたが、S3へアップロードする権限がないので付与してあげましょう。
今回はS3へのFullAccessをアタッチします。
![スクリーンショット 2020-12-18 17.11.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504218/b6cc0e59-ea7c-2a54-8d0a-e7fd382cbd18.png)

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

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

![スクリーンショット 2020-12-18 17.19.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504218/cb0bad30-93f7-8303-54f0-099ca2aa428c.png)

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

![スクリーンショット 2020-12-18 17.21.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504218/661afe27-3ff6-322d-81f1-9ab550ae7001.png)

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

![スクリーンショット 2020-12-18 18.49.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504218/03d0559e-ba5f-337b-f27c-e40849fe9740.png)


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

![スクリーンショット 2020-12-18 19.50.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504218/6d4b94b9-bdf1-83b7-806f-43623510f04f.png)

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

![スクリーンショット 2020-12-18 19.53.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504218/10a8b3a1-872d-1963-5692-51a4ac2b4716.png)

これでcpdepipelineが完成しました！
![スクリーンショット 2020-12-18 20.09.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504218/d438f4dc-f8ee-4837-4d2d-0ce34b52daf4.png)

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

![スクリーンショット 2020-12-18 20.14.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504218/81840b25-0835-a036-6bfd-dd16023097ab.png)



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

と書いてあるのにリポジトリにsrcフォルダを用意しなかったからです。
![スクリーンショット 2020-12-18 20.10.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504218/4880d844-b995-083f-b7f4-c9ee60a9334d.png)

ひとまずこれでgitのpushを契機にS3へのアップロードはできるようになりました！！ﾔｯﾀｰ

## cloudfrontの設定
次回に回します。

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