【いらすとや図解】はじめてのEC2デプロイ

簡単なDockerfileをEC2にデプロイするだけの記事を書いてみました。
ビジネスで活用する場合はセキュリティ等も考慮した構成の構築をご検討ください。
※AWSのアカウントは作成済としてます

# ざっくりとした実装の流れ
1\. AWS上でネットワークの箱を作る(VPC)
2\. どの通信をOKにするか？のルール決める(セキュリティグループ)
3\. 仮想サーバーを作り、VPCと関連付ける(EC2インスタンス作成)
4\. 仮想サーバーの中に入る(SSHでEC2)
5\. EC2サーバーの中でdockerとgitをインストールする
6\. EC2サーバーの中で該当リポジトリをgit pullする
7\. EC2サーバーでdocker run実行

### イメージ図
この画像を軸に解説していきます
![zu.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840696/856f7d22-089c-283c-b578-6f5ed77ae098.png)



# 今回使用したリポジトリ
https://github.com/mikaijun/aws-onboarding

# VPCの設定
![zuのコピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840696/bb4519c7-ec22-ed2a-0cce-e3c1aef50357.png)
### ネットワークの箱(VPC)を作成
この記事に出てくる任意で設定する名前はなんでも大丈夫です
![スクリーンショット 2024-06-23 10.59.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840696/43947052-6b13-f9f7-171f-73c0ec5a56e2.png)

### サブネット(VPC分割したもの)を作成
![スクリーンショット 2024-06-23 15.54.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840696/316aeaf6-8097-c78e-6935-e47ed9f1aa1c.png)

![スクリーンショット 2024-06-23 11.03.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840696/769c0e12-b01f-a34c-b758-72a0ca492e7b.png)

### インターネットゲートウェイ(VPCとインターネットを繋げるもの)を作成

![React.jsの キャッチアップは 「取捨選択」が9割.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840696/95469a12-a4be-2f3c-9181-56b4744bc7ab.png)

![スクリーンショット 2024-06-23 11.04.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840696/d53c423d-89da-6ada-6301-1e86429404f0.png)

インターネットゲートウェイとサブネット(ネットワークの箱を分割したもの)と紐づけるためにアタッチを行います

![スクリーンショット 2024-06-23 11.05.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840696/ea7a6092-ed2e-420e-b367-6693c14132af.png)



![スクリーンショット 2024-06-23 11.05.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840696/2a383a1d-670b-8c15-7f32-fbd020ca25ff.png)

## ルートテーブル(受け取った通信をどこに送るか?)作成
![React.jsの キャッチアップは 「取捨選択」が9割 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840696/2a1b816b-b43c-c2e9-9022-6ce3ecee64bc.png)



![スクリーンショット 2024-06-23 11.06.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840696/e31d4002-92a7-ef4b-b03c-f8e5701254ed.png)


受け取った通信をどこに送るかの「どこに」を設定

![スクリーンショット 2024-06-23 11.06.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840696/4e7f5f6b-1405-6962-17f8-41dd3d6b65ef.png)

受け取った通信をインターネットゲートウェイ(VPCとインターネットの架け橋)に送る設定をする
![スクリーンショット 2024-06-23 11.07.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840696/7bc9cb74-2acc-8a57-ac6e-cb0173f6450b.png)

上記でインターネットゲートウェイに送ることを設定したので作成したサブネット(ネットワークの箱を分割したもの)に紐づける
![スクリーンショット 2024-06-23 11.08.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840696/6a0b6938-05b4-c8ba-025d-c20635adc624.png)


![スクリーンショット 2024-06-23 11.09.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840696/b44936b5-20f8-497f-808f-46fd00ac032c.png)


# セキュリティグループの作成
![zuのコピー2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840696/2fcbcaaf-8257-6311-6b79-090e953bcdbf.png)

EC2を選択
![スクリーンショット 2024-06-22 10.11.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840696/2f810f4e-8118-0783-16b6-f6dcd6ebace6.png)

どの通信をOKにするか？というセキュリティグループを作成
![スクリーンショット 2024-06-23 11.38.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840696/c83faed5-40f5-2c06-0d51-ea9de312a5a7.png)

インバウンドとは外部から内部への通信方向のルール、インバウンドルールを編集
今回の場合はSSHでローカルPC(私)→EC2に通信する など
![スクリーンショット 2024-06-23 13.17.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840696/329dc40b-4fa0-ff7a-0f64-6545b15472ed.png)

SSHで接続できるルールを設定。**今回は0.0.0/0とすべての IP アドレスからインスタンスにアクセスすることが許可してますが、ビジネス等で定義する場合は既知の IP アドレスからのみアクセスできるようにしてください**

![スクリーンショット 2024-06-23 11.55.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840696/fd31a3b6-8d44-e36e-612e-b6a3cee7d773.png)

EC2を接続するための鍵(キーペア)を作成します。
今回の場合、この鍵が入っていないPCではEC2に接続できません

![スクリーンショット 2024-06-23 11.42.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840696/2533e56e-bd2a-1e43-611f-0fc0dc348d87.png)

![スクリーンショット 2024-06-23 11.42.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840696/67ed44b4-01a7-f89d-c13a-f94142a41be8.png)

# ECインスタンス作成

![zu.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840696/ebccdf99-661b-5740-4364-b6f359551d21.png)

インスタンス起動(作成)を選択
![スクリーンショット 2024-06-23 11.43.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840696/0783779b-cb58-548c-07b3-7ca0a13ab1dc.png)

今まで作ったものを設定していきます。それ以外は初期設定のままです
![スクリーンショット 2024-06-23 11.44.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840696/3f3ec1bf-17a0-751f-6ab1-14e0e9226afb.png)
![スクリーンショット 2024-06-23 11.46.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840696/43799ec8-92ba-ae3d-9d26-f457ae10fb79.png)
![スクリーンショット 2024-06-23 11.47.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840696/fa407e8c-2152-6d03-9161-98a52debf820.png)

作成されたのが確認できます

![スクリーンショット 2024-06-23 11.49.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840696/9bb2ec6e-ad00-9084-aafd-e92972e26aa1.png)


# インスタンス接続
現在のディレクトリでpemファイルが存在するかチェック
```
% ls
xxxxxxxxxxx.pem	
```
上記画像の①を実行
```
% chmod 400 "xxxxxxxxxxx.pem"
```
上記画像の②を実行。接続前に質問された場合はyesを入力
```
ssh -i "xxxxxxxxxxx.pem" ec2-user@yyyyyyyyy.ap-northeast-1.compute.amazonaws.com
   ,     #_
   ~\_  ####_        Amazon Linux 2023
  ~~  \_#####\
  ~~     \###|
  ~~       \#/ ___   https://aws.amazon.com/linux/amazon-linux-2023
   ~~       V~' '->
    ~~~         /
      ~~._.   _/
         _/ _/
       _/m/'
```


# EC2の中にdockerをインストール&設定
```
[ec2-user@ip-x-x-x-x ~]$ sudo yum update -y
[ec2-user@ip-x-x-x-x ~]$ sudo yum install -y docker
[ec2-user@ip-x-x-x-x ~]$ sudo systemctl start docker
[ec2-user@ip-x-x-x-x ~]$ sudo systemctl enable docker
[ec2-user@ip-x-x-x-x ~]$ sudo usermod -aG docker $USER
[ec2-user@ip-x-x-x-x ~]$ newgrp docker
```

# EC2の中にgitをインストールしてgit pull
pullしてくるリポジトリは記事の冒頭で紹介しているものです
```
[ec2-user@ip-x-x-x-x ~]$ sudo dnf install -y git
[ec2-user@ip-x-x-x-x ~]$ git clone https://github.com/mikaijun/aws-onboarding.git
```

# EC2の中でdocker run
```
[ec2-user@ip-x-x-x-x ~]$ cd aws-onboarding/ # pullしたリポジトリ名
[ec2-user@ip-x-x-x-x aws-onboarding]$ docker build -t my-simple-web-server .
[ec2-user@ip-x-x-x-x aws-onboarding]$ docker run -d -p 80:80 my-simple-web-server
```

# 結果
下記画像の赤枠をクリック

![スクリーンショット 2024-06-23 15.22.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840696/6d8f7233-61c9-faac-1701-b4ccf28f0cd0.png)

ブラウザに表示されました🎉
![スクリーンショット 2024-06-23 15.20.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840696/52a6ca66-f759-283c-6f07-01982bda1370.png)


# おわりに
今回はHTMLファイルをdocker runしただけなのでシンプルな実装で済みました。
実際のプロダクトはDB入れたり、セキュリティを厳密にしたり、サーバーを永続化するなどいろんな設定が必要だと思います。
この記事がAWS学習の第一歩になれば幸いです。
最後までお読みいただきありがとうございます！


# 参考にした記事
https://zenn.dev/mi_01_24fu/articles/1bac0febb8c175

https://dev.classmethod.jp/articles/creation_vpc_ec2_for_beginner_1/

https://dev.classmethod.jp/articles/creation_vpc_ec2_for_beginner_2/