【AWS】Code3兄弟を使用してci/cdパイプラインを構築した

# 01.はじめに
CodeDeployが提供しているサンプルアプリケーションを使用してci/cdパイプラインを構築してみた。
前提として筆者の作業環境はWindowsを使用しておりGitクライアントはあらかじめ使用できる状態である。

# 02.構成図
下記の通りとする。
今回はci/cdの動作確認が主であるためセキュリティの考慮はしない。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1050566/0cef56ee-0746-9d16-714d-f402a719fbb3.png)



# 03.テスト方法
Code Commitにサンプルアプリケーションをpushする。
EC2のグローバルIPアドレスにhttpアクセスしてテストページが閲覧できることを確認する。
確認後、テストページをローカル環境で編集して再度pushする。
EC2に再アクセスした際に編集内容が反映されているか確認する。

# 04.IAMロール作成
`1.マネジメントコンソールのIAM画面に遷移してEC2用のロールを作成する。`
　下記2つのポリシーを持ったロールを作成する。
・AmazonS3FullAccess
・AWSCodeDeployRole
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1050566/dbeccb2b-4cf5-6daa-114e-449090b03935.png)

2.[公式ドキュメントに沿って](https://docs.aws.amazon.com/ja_jp/codedeploy/latest/userguide/getting-started-create-service-role.html)
　信頼関係を下記のように変更する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1050566/ff4c1451-e92d-27fc-6502-5d5ac79b88db.png)

# 05.EC2作成
`詳細は割愛するが、下記のような方針でEC2を構築する`
・パブリックサブネットに構築する
・セキュリティグループはSSH接続、http接続ができる設定になっていればOK
・前項番で作成したIAMロールをアタッチする
・タグ付けを下記の通りとする
　Key:deploy Value:01
・EC2起動後CloudShellでSSHログインして下記コマンドを実行
```
sudo su -
yum update
yum install ruby
yum install wget
cd /home/ec2-user
wget https://aws-codedeploy-ap-northeast-1.s3.ap-northeast-1.amazonaws.com/latest/install
chmod +x ./install
./install auto
service codedeploy-agent start
service codedeploy-agent status
```

# 06.リポジトリ作成
` 1. マネジメントコンソールからCodeCommitに遷移してリポジトリの作成をクリックする。`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1050566/12a97306-090b-adf4-3797-adfbfdf0c397.png)


`2.リポジトリ名を任意の名前に設定して作成をクリックする。`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1050566/867f91fc-40dc-479a-10ae-f17463806ca5.png)

`3.接続方法はhttps,ssh,GRCの3種類あるが今回はhttpsを使用する。`
　下記画面でURLを発行できるので控えておく
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1050566/72258810-60fd-1522-5a60-b14ca258fd0e.png)

`4.IAMの管理画面に遷移して既存のユーザのポリシーにIAMポリシーを追加する。`
・AWSCodeCommitPowerUser
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1050566/126b2ff2-b5a4-b107-2130-f0e768da4f7c.png)

`5.対象ユーザのセキュリティ認証情報タブをクリックする。`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1050566/845282de-1591-8db4-7eac-ff21e80bdd32.png)
　下記画面に遷移する。認証情報を生成するとユーザ名とパスワードが表示されるので控えておく。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1050566/f3149745-c7e5-1ba3-ca2a-602052a1f74b.png)

`6.ローカル環境で任意の名前でフォルダを作成する。作成後Gitクライアントが扱えるツール`
　`(コマンドプロンプト、Power Shell、Git Bashのどれか)で該当フォルダにcdしておく。`

`7.3で控えていたURLを参照して下記コマンドを実行する。`
```
git clone https://xxxx
```
　認証画面に遷移するので5で控えていたユーザ名・パスワードを入力する。

8.[codedepoloy提供のサンプルアプリケーションをインストールする](https://aws-codedeploy-ap-northeast-1.s3.amazonaws.com/samples/latest/SampleApp_Linux.zip)
　解凍すると下記ファイルが存在する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1050566/f130aa79-0d73-deec-611f-4ce0d7e2afb1.png)
　scripts配下の中身。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1050566/a284aa5d-b11d-0307-17b7-4bb79e719365.png)


　6で作成したフォルダにファイルを一式移動しておく。

`9.index.htmlの現在設定の確認`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1050566/5ecd8334-ec2a-563b-b841-b1f97a5da98f.png)

# 07.ローカルリポジトリをプッシュ
`1.マネジメントコンソールでCodeCommit/リポジトリに遷移して現在設定を確認する。`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1050566/34f295de-c89a-03bb-950c-e09d52b97ced.png)

`2.ローカルで下記Gitコマンドを実行する。`
```
git init
git add .
git commit -m "first commit"
git push https://xxxx master
```
`3.リモートリポジトリにpushされたことを確認する。masterブランチが作成されていることを確認する。`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1050566/88efbc1a-d3c8-9f43-d9a3-46f4debc77e4.png)


# 08.Codedeployの作成
`1.マネジメントコンソールでCodeDeploy/アプリケーション作成に遷移してアプリケーション作成する。`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1050566/10af769c-05dd-3566-340c-2379cacc8726.png)

`2.1を作成後デプロイグループの作成する。`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1050566/6ab62fa3-9959-6db6-763b-eaa3bb6d7666.png)

# 09.Codepipelineの設定＆テストアクセス
`マネジメントコンソールでCodePipeline/パイプラインを作成するに遷移する。`
`1.任意のパイプライン名を入力する。`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1050566/adf664d2-bff5-490a-a080-3b427759993a.png)


`2.ソースステージを追加する。`
　ソースプロバイダ：AWS CodeCommit
　リポジトリ名：CodeCommitで作成したリポジトリ
　ブランチ名：master
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1050566/a5615d71-72f4-96aa-f8f8-3848ebe8419a.png)

`3.今回の設定ではスキップ。`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1050566/3409545d-50f7-4b62-9bc8-8b547a5b71e4.png)

`4.デプロイステージを追加する`
　赤枠の箇所はCode Deployで設定したものが候補として出てくるのでそれを設定する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1050566/738f8477-b888-f032-a66c-808257943bbb.png)

　次にを選択すると自動的にCodepipelineが走る。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1050566/58958f15-0392-d657-b907-210e662cbf71.png)

`5.テストアクセス`
```
①EC2のグローバルIPアドレスを確認
 $ ec2-metadata | grep ipv4
local-ipv4: 10.0.4.213
public-ipv4: 52.199.201.209　←こっちが対象
 $
②httpdのステータス確認
$ systemctl status httpd
● httpd.service - The Apache HTTP Server
   Loaded: loaded (/usr/lib/systemd/system/httpd.service; disabled; vendor preset: disabled)
   Active: active (running) since Thu 2023-02-02 13:24:05 UTC; 3min 2s ago
     Docs: man:httpd.service(8)
 Main PID: 8795 (httpd)
   Status: "Total requests: 2; Idle/Busy workers 100/0;Requests/sec: 0.0112; Bytes served/sec:  12 B/sec"
   CGroup: /system.slice/httpd.service
           ├─8795 /usr/sbin/httpd -DFOREGROUND
           ├─8799 /usr/sbin/httpd -DFOREGROUND
           ├─8800 /usr/sbin/httpd -DFOREGROUND
           ├─8801 /usr/sbin/httpd -DFOREGROUND
           ├─8802 /usr/sbin/httpd -DFOREGROUND
           ├─8803 /usr/sbin/httpd -DFOREGROUND
           └─8943 /usr/sbin/httpd -DFOREGROUND

Feb 02 13:24:05 ip-10-0-4-213.ap-northeast-1.compute.internal systemd[1]: Starting The Apache HTTP Server...
Feb 02 13:24:05 ip-10-0-4-213.ap-northeast-1.compute.internal systemd[1]: Started The Apache HTTP Server.
$ 
③index.htmlファイルの確認
$ ll /var/www/html/index.html 
-rw-r--r-- 1 root root 717 Dec 31  1979 /var/www/html/index.html
$ 
```
　ブラウザでアクセス出来ることを確認する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1050566/55115999-4e2d-08ec-bd14-00fd4d09d46f.png)

# 10.index.htmlをローカルで編集して再度push、ブラウザで再アクセスする
`1.ブランチを作成する。下記Gitコマンドを実行する。`
```
git switch -c test
git branch
git init
```

`2.ローカルのindex.htmlの9行目を変更する。(水色→黒色にする)`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1050566/dc487025-530b-0185-cd69-9654891cbe5a.png)

`3.リモートリポジトリにpushする。下記Gitコマンドを実行する。`
```
git add .
git commit -m "modify black"
git status
git push https://xxxx test
```
`4.マネジメントコンソールでCodecommitに遷移するとプルリクエストが出来ている。`
　testブランチからmasterブランチにマージしようとしていることを確認する。
　変更箇所が差分として表示されるので差分が想定通りのことを確認してプルリクエストの作成をクリックする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1050566/94c4761d-ba99-a800-78b9-ff7e73187624.png)


`5.プルリクエストが作成される。マージをクリックする。`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1050566/c83d7169-ede8-e940-f409-7051718c2bd9.png)


`6.マージする。`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1050566/a663365d-c6a5-bd78-4147-80512d22d7de.png)

　自動でパイプラインが走る
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1050566/936bca1f-e1b9-ac51-4dfc-a15d56ce26bb.png)

　少し待つと設定が反映される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1050566/f513b486-a35a-9add-22a4-11d088101e90.png)


`7.設定が反映されているか確認する`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1050566/6491aec8-86b6-5c61-b3fb-84fe7f6b5885.png)
※ブラウザのキャッシュが残っていて再読み込みだと設定が反映されないケースもあるので、
　その場合はキャッシュをクリアするか違うブラウザでアクセスする。

# 11.所感
直感的に操作が出来るので思ったより設定自体はシンプルにできた。
IAMの権限設定がシンプルにEC2を立てるケースよりも複雑な印象。
git操作で躓いてしまったのでコマンドをしっかり理解する。
次回はblue green デプロイやマルチAZ対応のパターンも試してみたい。

# 参考文献
https://dev.classmethod.jp/articles/codecommit-try/

https://zenn.dev/satopi/articles/2023-01_usage-of-codecommit

https://docs.aws.amazon.com/ja_jp/codecommit/latest/userguide/how-to-create-pull-request.html

https://www.youtube.com/watch?v=8mPm7jolnVk