【その1】CircleCI+ECS+ECR+CloudFrontでDockerのコンテナと静的ファイルをデプロイする方法について

# 前提
Dockerのコンテナが継続的にデプロイされる環境をCircleCIとAmazon ECS, ECRをセットアップし、Assetsファイル（CSS、JS）をs3のバケットに入れCloudFrontに送りデプロイする作業を行いました。
その一連の流れについて簡単にまとめてみたいと思います。

# 大まかな手順
### ECS＋ECR側のセットアップ
1. ECSクラスターを作成する
2. コンテナインスタンスを作成する（今回はEC2を選びました）
3. ECRリポジトリを作成する
4. ECSのタスク定義を作成する
5. ALBの作成をする
6. ECSサービスの作成をする


### S3＋CloudFrontのセットアップ
1. S3のバケットを作成する
2. CloudFrontのアカウントを作成する
3. CloudFrontのOrign NameにS3のバケットを指定する
4. Alternate Domain Names (CNAMEs)を指定する
5. CloudFrontの諸々のチューニングをする

# 全体図
![スクリーンショット 2020-12-19 23.39.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/623708/199cc509-0ddc-8d79-5a25-070bb1202da7.png)

# ECS＋ECR側のセットアップについて


## 1. ECSクラスターを作成する
### そもそもECSとは？

![スクリーンショット 2020-12-20 0.21.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/623708/c748ae29-b489-0f16-8c5b-d4e5f9b64624.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/623708/ae70e0f0-6011-6c30-2920-f746ac2cbe56.png)



![スクリーンショット 2020-12-20 0.22.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/623708/3cdd0a7e-6621-8eca-0a93-30a162c2ba53.png)






- クラスターテンプレートはEC2 Linux + ネットワーキングを選択する
- クラスター名を入力する ex) sample-cluster
- 空のクラスターを作成する
- インスタンスの設定はここではしない
![スクリーンショット 2020-12-19 23.45.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/623708/b61b252b-6c5f-7eae-e91d-bd829fe008e7.png)

## 2. コンテナインスタンスを作成する　(今回はEC2を選びました）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/623708/62ae8d61-197d-e960-4ab1-39632bb7c151.png)

- AMIはamzn2-ami-ecs-hvm-2.0を選択する
- インスタンスサイズは一旦t2.microを選択する
- ネットワーク（vpc）を選択する
- サブネットを選択する
- IAMロールでecsのInstanceのロール（作成済み）を選択する
- ユーザーデータを以下のように入力する
    - YOUR_CLUSTER_NAMEのところにクラスター名を入れる
 

```
#!/bin/bash
echo ECS_CLUSTER=YOUR_CLUSTER_NAME >> /etc/ecs/ecs.config
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/623708/ff222017-c72c-745f-2115-3e177feaed2f.png)

- 新しいセキュリティグループを作成する
- キーペアを作成する

## 3. ECRリポジトリを作成する

### そもそもECRとは？
![スクリーンショット 2020-12-20 0.27.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/623708/ca3d72a3-f9e3-97c2-baba-1006315ca948.png)


- プライベートを選択する
- リポジトリ名を入れる ex) sample-repository
![スクリーンショット 2020-12-19 23.54.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/623708/4d61e359-5021-d852-27d3-ab3e52d8f6a6.png)


### 4.ECSのタスク定義を作成する

- タイプはEC2を選択する
- 定義名を入れる ex) sample-task
- ロールはecsTaskExecutionRoleを選択する
- ネットワークはbridgeを選択する
    - ネットワークについて知りたい場合は[このサイト](https://dev.classmethod.jp/articles/ecs-networking-mode/)を参考にするといい
- タスクサイズはここでは選択せずコンテナでサイズを選択する
- コンテナ名を入力する　ex) sample-app
- イメージに先ほど作成したECR URIにタグをつけて入力する　ex) xxxxxxxxxxxxx.com/sample-repository:latest
- メモリ制限を入れる
    - 最初は300-500でいいかも
- ポートは動的ポートマッピングにしたいのでホストを0でコンテナを80にしておく

 ![スクリーンショット 2020-12-20 0.05.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/623708/9d31ce94-31c1-a015-a838-3c68bfce9ac5.png)


### 5.ALBの作成をする

- ALB名を入れる　ex) alb-sample
- リスナーを入れる　ex) HTTP, HTTPS
- アベイラビリティーゾーンを入れ、 vpcをEC2インスタンス作成時の時と同じものを選ぶ
- サブネットを選択する
- サーバー証明書を選択する
- セキュリティグループはEC2インスタンス作成時に作ったものを選択する
- ターゲットグループを新しく作成する
- ターゲットの種類はインスタンスを選択する

![スクリーンショット 2020-12-20 0.11.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/623708/271c56ed-60fd-581c-4b5a-a9c65a312191.png)


### 6. ECSサービスの作成をする

- 起動タイプはEC2を選択する
- タスクは先ほど作成したものを選択する　ex) sample-task
- クラスターは先ほど作成したものを選択する　ex) sample-cluster
- サービス名を入力する　ex) sample-service
- タスク数は今のところ１を選択する
- ALBは先ほど選択したものを選ぶ
- ターゲットグループは先ほど作ったものを選択する

 ![Amazon-ECS (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/623708/4b510a40-7925-3c6d-f06d-e90cfa23f76f.png)


以上が大まかなECSとECRのセットアップ手順です。

# S3＋CloudFrontのセットアップ
これは次の記事にまとめていこうと思います！！