EC2インスタンス上にWebページを公開する方法

# はじめに
本記事はとりあえずAWSを使ってWebページをデプロイしたい人向けに作成しております。まずはAWSがどんなものかを知るきっかけになればと思います。



# 目次
1. [EC2インスタンスの作成](#ec2インスタンスの作成)
1. [ElasticIPの割り当て](#elasticipの割り当て)
1. [サーバに接続してWebページをデプロイ](#サーバに接続してwebページをデプロイ)

# EC2インスタンスの作成
Webページを公開する際に使用するサーバを立ち上げます。
以下の通りAWS上で作業を行ってください。

マネジメントコンソールの検索バーでec2と検索してEC2を起動
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/d8659f2b-7a5d-bc89-cbae-1e4bf4f5f12d.png)

画面左のインスタンスをクリック→インスタンスの作成ボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/0483ced0-6f1e-de13-1802-59b345ee3291.png)

名前に「WebServer」と入力(名前は自由に決めてOKです)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/61509310-3319-912c-bf18-1ea86958d0a8.png)

AMIで「Amazon Linux2」を選択(立ち上げるサーバの種類を決めています)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/2f1c8800-20a6-a1bc-ba55-2d2d9eef36e6.png)

キーペアを作成で「WebKey」という名前のpemキーを作成して保存(サーバへアクセスする際に使用する鍵を作成しています)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/da958a2a-55f0-3ea4-b3d5-45aec2bb6b50.png)

ネットワーク設定でhttpとhttpsのトラフィックを許可にチェックを入れる(インターネットからアクセスする際にhhtp通信を使うので通信を許可しています)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/131b2d74-767e-11b2-776e-407f590fc8e7.png)

「インスタンスを起動」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/8a07c92d-373c-1872-e731-228939b1269d.png)

これでサーバが立ち上がります。サーバが立ち上がるまで数分かかりますのでしばらくお待ちください。インスタンスの状態が「保留中」から「実行中」に変化すれば起動完了です。


# ElasticIPの割り当て
サーバにアクセスする際に使用するIPアドレスの割り当てを行います（この内容は省略可能です）

サイドバーのElasticIPをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/cbaac4b7-f8a1-39fc-4cde-4c303873d7bb.png)

ElasticIP アドレスを割り当てるをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/933849fa-efb4-f468-765d-9be55ad07b39.png)

割り当てをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/e6d4576c-ca2c-19a6-7f3a-520b217dd359.png)

このElastic IP アドレスを関連付けるをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/b207a0da-559a-d291-70fa-3f4d299f882e.png)

インスタンスでWebServer(自分が作成したサーバ)を選択して関連付けるをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/6d8a725f-58d3-36de-c512-e1d74c8f4d6a.png)



# サーバに接続してWebページをデプロイ
作成したサーバに接続して必要な設定を行い、ファイルをアップロードします

EC2でWebServer(自分が作成したサーバ)を選択し、パブリックIPv4アドレスをコピー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/4a1dbeb6-5a0b-59bb-17df-3038a232186a.png)

teratermを開いて、ホストに割り当てたIPアドレスを入力してOKをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/78aa23b2-0046-6aa6-d536-faf4482f099d.png)

ユーザ名にec2-userを入力、秘密鍵にWebKey.pemを選択してOKをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/0f0d7742-0f5a-84f9-1c4a-c48f3cb5f0a3.png)


teraterm上で以下のコマンドを順に実行

webサーバをインストールするコマンド
```
sudo yum -y install httpd
```
Webサーバを起動するコマンド
```
sudo systemctl start httpd.service
```
Webサーバが自動起動するよう設定するコマンド
```
sudo systemctl enable httpd.service
```

teratermの画面上に必要なファイル一式をドラッグアンドドロップ（画像の画面がでてきたらOKボタンをクリック）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/917974f4-1c77-902a-4f27-c90921a6433a.png)


以下の通りlsコマンドで必要なファイルが一式そろっていることを確認（htmlファイルの名前はindex.htmlであることが必須です）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/1b09c889-399a-8b86-2237-b63736b741dd.png)

以下の通りmvコマンドで必要なファイル一式を/var/www/htmlに移動(/var/www/html/の直下にあるindex.htmlが自動で読み込まれるようになっています)
```
sudo mv index.html main.css main.js quiz.json /var/www/html/
```

ブラウザ上でElasticIPを打ち込んで検索（作成したアプリケーションが起動していれば成功です）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/aa14dab8-631d-46e4-7304-492a775c7e3b.png)