🌩️

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

2024/06/25に公開

簡単な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://github.com/mikaijun/aws-onboarding

VPCの設定

zuのコピー.png

ネットワークの箱(VPC)を作成

この記事に出てくる任意で設定する名前はなんでも大丈夫です
スクリーンショット 2024-06-23 10.59.32.png

サブネット(VPC分割したもの)を作成

スクリーンショット 2024-06-23 15.54.56.png

スクリーンショット 2024-06-23 11.03.23.png

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

React.jsの キャッチアップは 「取捨選択」が9割.png

スクリーンショット 2024-06-23 11.04.48.png

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

スクリーンショット 2024-06-23 11.05.07.png

スクリーンショット 2024-06-23 11.05.15.png

ルートテーブル(受け取った通信をどこに送るか?)作成

React.jsの キャッチアップは 「取捨選択」が9割 (2).png

スクリーンショット 2024-06-23 11.06.18.png

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

スクリーンショット 2024-06-23 11.06.45.png

受け取った通信をインターネットゲートウェイ(VPCとインターネットの架け橋)に送る設定をする
スクリーンショット 2024-06-23 11.07.07.png

上記でインターネットゲートウェイに送ることを設定したので作成したサブネット(ネットワークの箱を分割したもの)に紐づける
スクリーンショット 2024-06-23 11.08.39.png

スクリーンショット 2024-06-23 11.09.03.png

セキュリティグループの作成

zuのコピー2.png

EC2を選択
スクリーンショット 2024-06-22 10.11.09.png

どの通信をOKにするか?というセキュリティグループを作成
スクリーンショット 2024-06-23 11.38.13.png

インバウンドとは外部から内部への通信方向のルール、インバウンドルールを編集
今回の場合はSSHでローカルPC(私)→EC2に通信する など
スクリーンショット 2024-06-23 13.17.47.png

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

スクリーンショット 2024-06-23 11.55.32.png

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

スクリーンショット 2024-06-23 11.42.32.png

スクリーンショット 2024-06-23 11.42.52.png

ECインスタンス作成

zu.png

インスタンス起動(作成)を選択
スクリーンショット 2024-06-23 11.43.25.png

今まで作ったものを設定していきます。それ以外は初期設定のままです
スクリーンショット 2024-06-23 11.44.55.png
スクリーンショット 2024-06-23 11.46.14.png
スクリーンショット 2024-06-23 11.47.04.png

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

スクリーンショット 2024-06-23 11.49.58.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

ブラウザに表示されました🎉
スクリーンショット 2024-06-23 15.20.07.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/

Discussion