CodeCommit と CodePipeline を使って S3 に自動デプロイしたい


昨日は @Nyokki さんの SQL についての記事でした。
@Nyokki さんの記事は毎回丁寧で勉強になりますよね！！



今日は、 CodeCommit と CodePipeline を利用して、[以前書いた](https://qiita.com/tkek321/items/69816a4c3d33f77ffffe) S3 で静的ホスティングをおこなった環境を git のブランチに push をすることで、自動デプロイできるようにしてみたいと思います。



## CodeCommit を作成

CodeCommit のコンソール画面へ移動

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/2e2b529f-105d-735d-53f9-1de6cd70e1bc.png)

リポジトリの作成をクリック

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3336343737332f64366432636431612d393764362d323561392d623161382d3261353662346530376437342e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/03622111-71cd-2027-9757-0b9ce1a0d127.png)


リポジトリ名を入力して作成をクリック

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3336343737332f37623033313938322d336666392d343335392d613630342d3361626330323135326636322e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/1001db47-7200-0a8b-e339-715af24284c9.png)

リポジトリが作成できる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/364b74db-4d54-95f0-fa30-688f821c4c4d.png)


## CodeCommit にアクセス

ローカルから CodeCommit に push するための設定を行います。

https://dev.classmethod.jp/articles/codecommit-try/

### IAM ユーザーを作成

IAM のコンソール画面へアクセスする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/cfa99e1b-222e-5965-65af-3985edf73d8e.png)

ユーザーをクリック

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3336343737332f34373630303664312d626433362d363731652d386633642d3031343430306364626462302e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/6113fc63-5276-e5e2-c1da-e3a896790693.png)


ユーザーを追加をクリック

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3336343737332f31336334343062322d643565662d383735392d633561652d3633666561373363383833342e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/80ecd7cd-701e-5240-0736-a47cf96fc498.png)

ユーザー名を入力し、
`アクセスキー - プログラムによるアクセス` を選択

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3336343737332f37663063643066612d333532302d666238642d336539372d3331323564363237366566352e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/809370b0-e4cf-9f28-2e28-1253f178e4a9.png)


`既存のポリシーを直接アタッチ` を選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/a3ceb1c6-383b-6da9-ff2f-9149c36e683a.png)

`AWSCodeCommitPowerUser` をつけてユーザーを作成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/926858c5-f736-acd9-1a64-19c0d5b580b0.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/2f404e64-d8e8-2a02-f033-7022e2f9ee15.png)


### ssh key を作成

```
 ssh-keygen -f ./codecommit-sample-key
Generating public/private rsa key pair.
Enter passphrase (empty for no passphrase):今回は空白
Enter same passphrase again:今回は空白
Your identification has been saved in ./codecommit-sample-key
Your public key has been saved in ./codecommit-sample-key.pub
```


### 認証情報の追加


ユーザー画面からユーザー名をクリック。

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3336343737332f62353131383565302d613137382d633439622d366337622d6130656664373762396434392e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/58ae7641-4db0-ad90-818c-d43bb75fbc48.png)



先ほど作成した、`codecommit-sample-key.pub` の中身を貼り付け。
`SSH パブリックキーのアップロード` をクリック。

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3336343737332f32316630663533312d373966382d353663332d616630382d6437313732376265643235352e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/6c752aa2-d964-856f-1e83-a9bbc1a53c95.png)

`SSH キーID` をコピーしておく。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/72b172dd-ab80-5ed5-38f1-2e271eb841a2.png)



### ssh config に設定

```
vim ~/.ssh/config

#  下記設定を追記
Host git-codecommit.*.amazonaws.com
    User              [SSHキーID]
    IdentityFile      [プライベートキーのパス (例)~/.ssh/test_repo]
```

### git clone を試す

CodeCommit の SSH のクローンで接続情報こコピーしておく

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/4869b9d7-5af8-dd56-8835-286dcb104dce.png)


```
 git clone ssh://git-codecommit.ap-northeast-1.amazonaws.com/v1/repos/example
```

前回作成したファイルをディレクトリ配下に移動させて、push してみる。

```
ls -l
total 8
drwxr-xr-x  3 kakiuchi  staff   96 11  6 17:03 css
-rw-r--r--@ 1 kakiuchi  staff  252 11  6 13:43 index.html
```

```
git push origin master
Warning: Permanently added 'git-codecommit.ap-northeast-1.amazonaws.com' (RSA) to the list of known hosts.
Enumerating objects: 5, done.
Counting objects: 100% (5/5), done.
Delta compression using up to 8 threads
Compressing objects: 100% (3/3), done.
Writing objects: 100% (5/5), 515 bytes | 515.00 KiB/s, done.
Total 5 (delta 0), reused 0 (delta 0), pack-reused 0
To ssh://git-codecommit.ap-northeast-1.amazonaws.com/v1/repos/example
 * [new branch]      master -> master
```

リポジトリにファイルが上がっているのがわかる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/5aae0771-d745-88ee-be59-6e74477c6a1e.png)


## CodePipeline でデプロイを行う

CodeCommit に push されたタイミングで自動デプロイされるように設定していきます。

CodePipeline のコンソールを開く。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/b8127c65-cb87-6870-0006-63e105e2a3a0.png)

`パイプラインを作成する` をクリック。

![スクリーンショット 2022-12-21 19.58.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/f99ae6e8-fe56-4cb7-06d9-ffc7ffea9c91.png)

パイプライン名を入力し、`次に` をクリック

![スクリーンショット 2022-12-21 20.00.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/2336c2fd-95d3-9324-076a-4eba8a7f4783.png)

- `ソースプロバイダー` を `AWS CodeCommit` 
- `リポジトリ名`を先ほど作成したブランチ名
- `ブランチ名` をデプロイに使用したいブランチ名

に設定し、`次に`をクリック

![スクリーンショット 2022-12-21 20.02.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/aeb0b6f9-95ba-fe1c-4c56-b5a290f2b233.png)

今回ビルドステージは必要ないので、`ビルドステージをスキップ`をクリック

![スクリーンショット 2022-12-21 20.06.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/c086db16-37f0-ad6f-4a84-8b0ba34a13ce.png)

- `デプロイプロバイダー`を `Amazon S3` に設定
- 作成したパケットのリージョンとバケット名を選択
- `デプロイする前にファイルを抽出する`にチェックを入れる
    - [CodeCommitを使ってGitリポジトリを作成してみた](https://dev.classmethod.jp/articles/tsnote-codepipeline-how-do-i-deploy-a-file-directly-under-an-s3-bucket-in-codepipeline/)

上記の設定ができれば `次に` をクリック

![スクリーンショット 2022-12-21 20.16.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/14874d16-0fe2-c196-979f-9a2be1dfa38b.png)

`パイプラインを作成する` をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/f66cf127-d2a7-95a4-66a0-2225d3064729.png)

パイプラインが生成され、初回のデプロイが走る

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/a211c653-1b67-7b1c-83cf-0adff263f65b.png)


この時点ではコードに変更はないので当然画面もそのまま

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/d16cba97-8220-30a6-6452-f720686b5302.png)


## 編集したコードを push してデプロイしてみる


`index.html` を編集する

```html:index.html
<!DOCTYPE html>

<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>静的 Web サイトホスティング</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div>
    <div>
      Hello!!<br>Hello!!<br>Hello!!
    </div>
  </div>
</body>
</html>
```

CodeCommit へ push

```bash
$ git add index.html

$ git commit -m "test commit"

$ git push origin master
```

### CodeCommit

CodeCommit のリポジトリのコードが更新されている

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/696da633-e9f1-34f2-be0d-f18d3e1b7a8a.png)

### CodePipeline 

Deploy が成功している

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/97b972d7-8af0-0638-12d1-8598c772cd66.png)


### サイト

ホスティングしているサイトも更新されている
（キャッシュが残っていたら反映まで少し時間がかかるかも）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/932908e2-66b7-530f-6d5c-f5a8bf60c3b2.png)


## おわり

明日は [yuki](https://www.yukimasa.net/)の Next についての記事になります！
yuki は普段から Next を触っているので、どんな記事を書いてくれるのか楽しみです！！