AWS EC2インスタンスを作成してブラウザでページを表示させる

## 内容
EC2インスタンスを起動させ、ブラウザでファイルを表示させる流れをまとめました。

## 目次
- [ネットワークの作成](https://qiita.com/shogo30/items/d2e0fa2e7ecafc690952#%E3%83%8D%E3%83%83%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF%E3%81%AE%E4%BD%9C%E6%88%90)
- [EC2インスタンスの起動](https://qiita.com/shogo30/items/d2e0fa2e7ecafc690952#ec2%E3%82%A4%E3%83%B3%E3%82%B9%E3%82%BF%E3%83%B3%E3%82%B9%E3%81%AE%E8%B5%B7%E5%8B%95)
- [インスタンスにssh接続する](https://qiita.com/shogo30/items/d2e0fa2e7ecafc690952#%E3%82%A4%E3%83%B3%E3%82%B9%E3%82%BF%E3%83%B3%E3%82%B9%E3%81%ABssh%E6%8E%A5%E7%B6%9A%E3%81%99%E3%82%8B)
- [ブラウザで表示させる](https://qiita.com/shogo30/items/d2e0fa2e7ecafc690952#%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%A7%E8%A1%A8%E7%A4%BA%E3%81%95%E3%81%9B%E3%82%8B)

## ネットワークの作成
サーバーを起動するには、そのサーバーが属するネットワークを準備する必要があります。
AWSではVPCというAWSアカウント専用の仮想ネットワークで、このVPCの中にさまざまなAWSリソースを設置してサービスを提供します。
マンションを建てて、部屋にサーバーを起動させるみたいなイメージです。

### VPCの作成
まずはVPCでネットワークを作成しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935700/77583eb9-78e5-3c4f-a1fd-2e6ad7204789.png)


「VPCを作成」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935700/2e75e76c-46f8-4137-1b92-fb70f1d9b021.png)

VPCに名前をつけます。
ダッシュボードや他のサービスの設定で表示される名前なので、識別できるようにしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935700/9f90bb25-044d-9e4f-c1ad-17605448c3ce.png)

#### CIDRブロックの設定
このVPCで使用するプライベートネットワークの範囲を設定します。
CIDRとはIPアドレスを管理する範囲を決める方法の一つです。
今回はIPv4 CIDRブロック「10.0.0.0/16」をIPアドレスの範囲とします。(10.0.0.0 - 10.0.255.255)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935700/ced81df3-b100-b554-0b0b-834c885ab317.png)

今回はIPv6 CIDRブロックは設定しません。
IPv6 CIDRブロックも同じようにIPアドレスの範囲のことを指しており、IPv4のIPアドレスが枯渇しそうなのでIPv6が誕生したという経緯があります。
AWSでは今後、IPv4を使っているインスタンスに課金れるようになります。
今回はIPv4でいきます。

そして「VPCを作成」でVPCを作成します。
ダッシュボードでVPCが作成されたのがわかります。
![スクリーンショット 2023-10-22 15.30.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935700/6e554a18-db8d-3315-3fbd-cf0fc094a32c.png)

### サブネットの作成
次にサブネットを作成します。
サブネットとは、VPCのIPアドレスの範囲を分割する単位です。
VPCをマンションに例えると、サブネットは各部屋になります。
VPCというネットワーク全体をサブネットという単位で区切るということです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935700/50630dda-d31e-8b75-8c86-b05b2c653190.png)


リストから「サブネット」を選択し、「サブネットを作成」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935700/61649b77-6f2f-7aac-024c-8baac617da7b.png)

新しく作成するサブネットが、どのVPCに属するかを設定します。
先ほど作った「test-vpc」を選択します。
![スクリーンショット 2023-10-22 15.35.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935700/9226b8fe-0f7d-dc5d-99e8-65e0541dfab4.png)

サブネットのCIDRブロックを設定します。
「test-vpc」のCIDRブロックが10.0.0.0/16なので、この範囲でサブネットの範囲を設定します。
今回は「10.0.0.0/24」にしておきましょう。
これで「サブネットを」作成をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935700/13eb9edc-2e25-f2df-1c70-683eb2ba6da7.png)

ダッシュボードに戻ると、サブネットが作成されていることがわかります。
![スクリーンショット 2023-10-22 15.42.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935700/e5e34993-b592-f062-8a60-20c06953ba9c.png)

### インターネットゲーウェイの作成
インターネットゲートウェイとは、VPCで作成されたネットワークとインターネットの間の通信を可能にするためのものです。
マンションのエントランスのようなものです。
インターネットゲートウェイを用意することで、外から内に、内から外に通信を行うことができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935700/526e4bab-f254-911a-9eb9-2711851fc4de.png)


「インターネットゲートウェイの作成」をクリックします。
![スクリーンショット 2023-10-22 16.07.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935700/59517447-67dd-27a7-0c6b-91c187c14595.png)

名前をつけて「インターネットゲートウェイの作成」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935700/ebf3c334-b5b4-3503-657b-4a06528836eb.png)

ダッシュボードでインターネットウェイが作成されていることがわかります。
ではこのインターネットゲートウェイをVPCアタッチします。
このインターネットゲートウェイはこのVPCの玄関ですよ、という設定です。
対象のインターネットゲートウェイを選択した状態で「アクション」→「VPCにアタッチ」をクリックします。


![スクリーンショット 2023-10-22 16.09.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935700/07dbdf49-e06f-a961-f914-b68821c71ec5.png)

対象のVPC（test-vpc）を選択して「インターネットゲートウェイのアタッチ」をクリックします。
![スクリーンショット 2023-10-22 16.11.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935700/de74e376-72e9-dd70-9f7a-fe46add1b290.png)

インターネットゲートウェイの状態が「Attached」になっていることがわかります。
![スクリーンショット 2023-10-22 16.14.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935700/5deb9bdc-0657-8e85-90ce-13e2fd97be28.png)

### ルートテーブルの作成
次にルートテーブルを作成します。
ルートテーブルとは、ネットワークの経路を示しており、「このサーバーに接続するときはここを経由する」といったルールを設定します。
例えばマンションの住人Aさんのところに行きたいとした場合、どの部屋にAさんがいるかわからないとAさんの部屋番号に辿り着けません。
「Aさんは101号室です」のように設定しておくことで、Aさんに会おうと思った時に101号室のインターフォンを鳴らすことができるのです。
通信も同じで、ルートテーブルがあることで、目当てのサーバー等にたどり着くことができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935700/37186639-84fd-6fe6-df13-176218a81cd0.png)


「ルートテーブルを作成」をクリックします。
![スクリーンショット 2023-10-22 15.44.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935700/d8bd779e-29ad-3797-923d-8758fb56f64a.png)

このルートテーブルを使うVPC（test-vpc）を選択して作成します。
![スクリーンショット 2023-10-22 16.00.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935700/28d1cabe-e738-218d-7a41-a61a1c7b65e5.png)

作成したルートテーブルを編集します。
「ルートを編集」をクリックします。
![スクリーンショット 2023-10-22 16.02.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935700/aae558ce-c705-9503-b309-12d0d0643a78.png)

「ルートを追加」をクリックします。
送信先を0.0.0.0/0にして、ターゲットをインターネットゲートウェイの中から、先ほど作成したインターネットゲートウェイを選択します。
0.0.0.0/0と設定することで、ルートテーブルに設定されていないその他全ての送信先をインターネットゲートウェイに向けることができます。
「変更を保存」をクリックします。
![スクリーンショット 2023-10-22 16.17.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935700/16822802-176b-4770-f6a3-c468a6a19c64.png)

このルートテーブルにサブネットを関連付けさせます。
「明示的な関連付けがないサブネット」に先ほど作成したサブネット「test-ec2-subnet」があるので、「サブネットの関連付けを編集」をクリックします。
![スクリーンショット 2023-10-22 16.53.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935700/67ba1167-17ad-3a42-9ab5-77d494e97986.png)

対象のサブネットを選択して「関連付けを保存」をクリックします。
![スクリーンショット 2023-10-22 16.56.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935700/04d3188e-5792-01e3-755b-5d9592387d6b.png)

これでネットワークの設定は完了です。
ではこのネットワークの中にEC2サーバーを設置しましょう。

## EC2インスタンスの起動

AWS EC2のダッシュボードを開き「インスタンスを起動」をクリックします
![スクリーンショット 2023-10-22 14.55.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935700/0b3bf090-ad22-49b3-aa46-487c53f7662e.png)

### インスタンスに名前をつける
名前は任意のものを設定します
ダッシュボードに表示されるので、わかりやすい名前にしておくとよいです
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935700/2ae3e7d3-93f3-cf46-bdf2-48a896d45213.png)

### Amazon マシーンイメージ（AMI）を設定する
AMIとはEC2インスタンスの情報がまとまっているテンプレートです。鋳型みたいなものです。
AMIにはOSの設定などの情報が入っていて、AMIを使うことで同じ設定のインスタンスを作成できます。
AMIがないと、同じインスタンスを起動したい場合に、一つ一つ設定する必要が出てきます。
今回は先日公開された「Amazon Linux 2023 AMI」を使用します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935700/30638038-ef5b-4fb4-04b6-80d44c4cffab.png)

### インスタンスタイプ
インスタンスのスペックです。
スペックを上げれば上げるだけEC2の利用料金が高くなります。
今回はデフォルトで設定されている「t2.micro」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935700/d8e89c05-96d6-c465-7d7f-29afbfb86005.png)

### キーペア
キーペアとは公開鍵方式といって、キーのペアを用意することで、指定したキーがないとサーバーにsshでアクセスできないようにします。
「新しいキーペアの作成」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935700/36018035-d09b-0bf2-f037-7f3b0f0b1a4b.png)

キーペアに任意の名前をつけて作成します。
![スクリーンショット 2023-10-22 15.12.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935700/991b858e-51c0-6e33-673c-1e89fd07955c.png)

作成したキーが自動でダウンロードされます。
このキーをローカルの~/.sshに保存しておきましょう。

### ネットワーク設定
このインスタンスを設置するネットワークを指定しましょう。
デフォルトだとデフォルトのVPCに設置されてしまうので、「編集」をクリックして、それぞれ作成したものを指定しましょう。
VPC：test-vpc, サブネット：test-ec2-subnet
**パブリックIPの自動割り当て**をすることで、このインスタンスにパブリックIPアドレスが割り当てられ、外部からアクセスすることができます。
![スクリーンショット 2023-10-22 16.31.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935700/53e37b26-e1b7-fa1b-d1d8-efdf6c41937b.png)

セキュリティグループを設定します。
セキュリティグループとはファイアウォールのことで、このインスタンスに接続できる通信についてルールを設けることができます。
セキュリティグループはデフォルトでは通信拒否という設定なので、アクセスを許すルールを追加します。（何も設定しなければどこからもどんな方法からでもアクセスできない）

今回は「自宅IPアドレスからのssh接続」と「全てIPアドレスからのHTTP通信」を許可します。
![スクリーンショット 2023-10-22 16.39.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935700/24db1218-b6a1-fe30-1ac9-e45ba9a4bc96.png)

### その他設定
その他の設定は今回はデフォルトでOKです。
ストレージの大きさや、インスタンスの復旧などに関する設定を行うことができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935700/f78ad1c7-0bf9-14fd-ac0c-9d081e7f0b3e.png)


インスタンスを起動させると、ダッシュボードに作成したEC2インスタンスが作成中になっていることがわかります。
しばらく時間を置けば、実行中となりインスタンスが起動状態になります。
**※ここからEC2インスタンスの利用料金がかかるので注意**
![スクリーンショット 2023-10-22 16.46.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935700/ee640625-87b5-208d-5d77-379b54e3fbcf.png)

## インスタンスにssh接続する
いよいよインスタンスに接続します。
EC2のダッシュボードから対象のインスタンスを選択して「接続」をクリックします。
![スクリーンショット 2023-10-22 16.59.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935700/8cfd53a2-8a54-aa8e-1dc0-d9c5b3e332c3.png)

SSHクライアントタブに接続する方法が記載されています。
![スクリーンショット 2023-10-22 17.00.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935700/0341a005-cc3c-b84c-6855-77074792e896.png)

要は
1. キーの読み込み権限を付与する
2. キーを使って対象のパブリックIPを指定してssh接続する

という流れです。
キーが保存されているディレクトリやパブリックIPはまちまちだと思うので、適宜変更ください。
私はキーを~/.sshに保存しています。

ターミナルを開いて
```
~ %ssh -i ~/.ssh/test-key.pem ec2-user@[インスタンスのパブリックIP]
```
とします。

すると
```
Are you sure you want to continue connecting (yes/no/[fingerprint])?   yes
```
と聞かれるので元気よく「yes!!」と答えましょう。


ようやくSSH接続できました！！
```
   ,     #_
   ~\_  ####_        Amazon Linux 2023
  ~~  \_#####\
  ~~     \###|
  ~~       \#/ ___   https://aws.amazon.com/linux/amazon-linux-2023
   ~~       V~' '->
    ~~~         /
      ~~._.   _/
         _/ _/
       _/m/'
[ec2-user@ip-10-0-0-86 ~]$ 

```

今回はssh接続してHTMLファイルを作成したりします。

## ブラウザで表示させる
さてssh接続はできましたが、これだけではブラウザでページを表示させることができません。
試しにパブリックIPをブラウザに打ち込んでみましょう。
![スクリーンショット 2023-10-22 17.12.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935700/68d61a71-1635-07e5-26c8-03474f8f30b7.png)

このサイトにアクセスできません。
なのでこのインスタンスにWebサーバーソフト Apacheをインストールしましょう。

### Apacheのインストール
```
[ec2-user@ip-10-0-0-86 /]$ sudo yum update -y
Amazon Linux 2023 repository                     39 MB/s |  20 MB     00:00    
Amazon Linux 2023 Kernel Livepatch repository   947 kB/s | 160 kB     00:00    
Dependencies resolved.
Nothing to do.
Complete!

[ec2-user@ip-10-0-0-86 /]$ sudo yum install -y httpd

...


Complete!

```
Apacheのインストールが完了しました。
ではいよいよHTMLファイルを作成します。

### HTMLファイルを作成する
``/var/www/html``の直下に``index.html``を作成します。

```
[ec2-user@ip-10-0-0-86 html]$ sudo vi /var/www/html/index.html
```
↓index.html
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello, Japan!!</h1>
</body>
</html>
```

### Apacheの設定変更
一応Apacheの設定を確認しましょう。
ディレクトリへのアクセスをしたときにどのファイルを返すのかを設定します。
今回は``index.html``を返すようにします。

```
[ec2-user@ip-10-0-0-86 html]$ sudo vi /etc/httpd/conf/httpd.conf

...

<IfModule dir_module>
    DirectoryIndex index.html
</IfModule>

...

```

これでApacheの設定も完了です。
さあ最後の仕上げです。
Apacheを再起動させましょう。

```
[ec2-user@ip-10-0-0-86 html]$ sudo systemctl restart httpd
```

ブラウザで表示できました！！
![スクリーンショット 2023-10-22 17.28.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935700/28761226-7bd5-8dcf-f1a2-405432f291d2.png)
ちなみにインスタンスを再起動するとパブリックIPアドレスは変わるので、前回と同じコマンドでは接続できません。
固定したい場合はElactic IPを使いましょう。