S3をデプロイ先としたCI/CD環境の構築

##　はじめに
今回やった内容はAWSのハンズオンセミナーのCodeCommit、CodePipeLineを用いAmazon S3バケットへのデプロイを行うパイプラインを構築します。
途中Cloud9が起動せず1時間ぐらい悪戦苦闘しました。そこも交えてアウトプットしていこうと思います。
またS3の静的Webホスティングについては[こちら](https://qiita.com/pankata79/items/68109e9e04d5c14fb88e)へ

よろしくお願いします(｡･ω･)ﾉﾞ

##　今回使用したAWSサービス
<details><summary>CodeCommit</summary>
・ソースコードを管理する**Gitリポジトリサービス**
・サートバーティ製のツールも利用可能
・プルリクエスト機能もある
・フルマネージド型のリソース管理サービス
</details>
<details><summary>CodePipeLine</summary>
・**フルマネージド型の継続的デリバリーサービス**
・Codecommit/CodeBuild/CodeDeployの流れをパイプラインとして定義することでソースコードがコミットされたらデプロイまで自動化
・素早く確実性のあるアプリケーションとインフラストラクチャのアップデートのためのパイプラインのリソースを自動化
</details>
<details><summary>AWS Cloud9</summary>
・アプリケーションの開発などをクラウド環境で利用できるサービス
・IDE(統合開発環境)としての機能が充実しておりGitHubなどの他のツールとの連携もスムーズ
・ブラウザ上で動くのでPCに依存することなく開発環境を準備することができるのが利点。無料
・今回初期起動せず原因探しに時間を費やした。
</details>

## 今回作る構成図
![CodeCommit.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/993659/d275cb06-faac-a9b8-cc48-19b924649960.jpeg)

##　CodeCommit
まずマネジメントコンソールからCodeCommitを開きリポジトリを作成していく。

![スクリーンショット 2021-06-14 173533.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/993659/21dc545f-b3eb-4d20-f415-ed2a994f6ebb.png)

![スクリーンショット 2021-06-14 173655.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/993659/8a1f4249-f690-c9e1-73b8-33917161ab95.png)

## Cloud9で環境構築
マネジメントコンソールからCloud9を開きCloud9の環境を作っていく過程でエラーがあり悪戦苦闘したのも書いていきたいと思います。
![スクリーンショット 2021-06-14 192530.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/993659/85f11984-ad1c-4053-d756-02e7c4c2bdb1.png)

本来であればこのままName、EC2インスタンスのタイプやプラットフォームも今回は学習用なのでデフォルトで進めていくのだが、何故かCloud9環境に接続できなかった。

調べた限りのCloud9環境に接続できない主な原因として
　・VPCのルーティングミス
　・ネットワークACL
　・セキュリティグループ辺りの設定ミス

Cloud9はVPCに接続する際デフォルトVPC（変更可）に対して接続されるようになっておりそこからCloudFormastionのテンプレートを使用しEC2インスタンスがデプロイされるようになっている。
CloudFormastionのスタックを見る限りロールバックは起きてないのでデプロイは上手く行ってる。
なので上記のネットワークの設定ミスが多いと思います。

僕の場合はインターネットゲートウェイがブラックホールになっており削除されたインターネットゲートウェイを利用しようとしていたのが原因で接続出来なかった。
接続出来ると以下のようなターミナル画面が出てくる
![スクリーンショット 2021-06-14 194439.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/993659/8fef92b1-e139-2ccd-cd77-93b070c3f1d8.png)
## AWS CodeCommitの認証ヘルパーを使って接続していく
ターミナルで以下のコマンドを叩き接続する

```
git config --global credential.helper '!aws codecommit credential-helper $@'
git config --global credential.UseHttpPath true
```
そしてターミナル上でGitユーザーとメールアドレスを作成する。

```
git conhig --global user.name "○○○○"
git conhig --global user.email "○○○○@hogehoge.jp"
```
先ほど作ったCodeCommitからリポジトリをクローンする。
![スクリーンショット 2021-06-14 195412.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/993659/ecb6bf0c-396f-7e81-b7e5-8b278cdf6b83.png)

cdコマンドでmasterリポジトリに移動しgitコマンドを打つことでCodeCommitのリポジトリにファイルが作成される！
![スクリーンショット 2021-06-14 195834.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/993659/c0686e8c-9e59-b1dc-70df-af5dd9a19a09.png)

## CodePipeLine

CodePipeLineでパイプラインの設定をしていく。
マネジメントコンソールからCodePipeLineを開き作成をクリックし名前を設定しソースステージを追加するという画面では、

１：ソースプロバイダーにCodeCommitを指定
２：リポジトリ名にそれぞれ設定した名前を指定
３：ブランチはmasterしかないのでそれを指定

をそれぞれ設定する
![スクリーンショット 2021-06-14 200618.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/993659/17bfe069-b8d7-3cf3-e1a2-82fe7012d40b.png)

次へをクリックしていくとビルドステージに設定する画面が出てくるのだが今回はCodeCommitにpushされたソースをそのままS3にデプロイするように設定するので今回は省きます。

スキップするとデプロイステージがでてくるのですが今回はそのままS3にデプロイするのでプロバイダーにS3を設定する。
![スクリーンショット 2021-06-14 201236.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/993659/b50d7e09-08fe-1040-1630-69a3b4589afd.png)
レビューの画面が出てくるので下にスクロールしパイプラインを作成するをクリックする

ここまで用意が終わると下のようにCloud9でHTMLファイルのソースを書き換えプッシュすることでCodePipeLineが検知してその変更をS3バケットに反映させることができるようになる！！！
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">学習記録280日目<br>AWS(6h)<br><br>・朝活：DVAの学習<br>・S3の静的Webホスティングの構築<br>・Cloud9の環境を作っていく過程でエラーにぶつかり1時間ほど格闘。原因はblackhole<br>・CodeCommit、CodePipeLineを使用したCI/CD環境の構築<br>・動画は本日の成果<a href="https://twitter.com/hashtag/RaiseTech?src=hash&amp;ref_src=twsrc%5Etfw">#RaiseTech</a><a href="https://twitter.com/hashtag/%E4%BB%8A%E6%97%A5%E3%81%AE%E7%A9%8D%E3%81%BF%E4%B8%8A%E3%81%92?src=hash&amp;ref_src=twsrc%5Etfw">#今日の積み上げ</a> <a href="https://t.co/z6zWveNqcd">pic.twitter.com/z6zWveNqcd</a></p>&mdash; きむら＠調理師からエンジニアへ (@kimura_T_T) <a href="https://twitter.com/kimura_T_T/status/1404400441375420417?ref_src=twsrc%5Etfw">June 14, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## おわりに
エラーで躓きそうになりましたが、楽しくできました！！
また今度はEC2上にCI/CD環境の構築をしていこうと思います！！！！

(｡･ω･)ﾉﾞバイバイ