【AWS】ドメイン取得してブラウザでHello worldを表示させるまでやってみる

## はじめに
こんにちは、僕は普段業務の中でAWSを触る機会はあるのですが、まっさらな状態の環境で一から構築して公開までするという経験がありませんでした。

ドメイン回りの勉強もかねて今回は、

**ドメインの取得**
↓
**AWS環境でEC2でwebサーバを立てる**
↓
**hello world用HTML配置**
↓
**ブラウザでドメインたたいて表示されるか確認**

までやってみます！

## ドメインの取得
いきなり出鼻をくじく感じになってしまいますが、こちらはちょっと長いので別記事にしました(ﾟ∀ﾟ ；)

以下の記事です↓
[【お名前.com】初めてドメインを取得してみた](https://qiita.com/Ryukuu0919/items/64b2f46beac8aadbb3e5)

はい、今回はお名前.comさんでドメインを取得いたしました。かかった費用はなんと**0円**！
まぁちゃんとドメインに保護機能とかかけるとお金はかかってしまうのですが、仕事で使うドメインだったり正式なサービスを乗せるドメインでなければ無料で済むかと思います。

## EC2を起動
では早速AWSを触っていきますよ、、！
AWSアカウント持ってないよ～っていう人はAWSのサイトにアクセスしてアカウント作成してください。
クレジットカードの登録とかちょっとめんどくさいですが、そこまで躓くことはないかと思います。

▼AWS公式から出てるアカウント作成フロー
https://aws.amazon.com/jp/register-flow/

また、本来であればAWSアカウントを作成した後は色々とやることがあります。（IAMユーザの作成とか）
ですが今回はすぐ消す予定ですのでそこら辺は飛ばします。

▼ちゃんと運用していく予定の方はこちら参考ください
https://dev.classmethod.jp/articles/aws-baseline-setting-202206/


AWSにログインします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577451/f13f1a40-0346-ff65-6aab-79869be94d46.png)

まっさらですね笑

では検索バーでEC2を検索し、EC2のダッシュボードを開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577451/5113c78a-13fa-3c3a-4c71-57e3b900a84f.png)

リージョンは東京を選択しておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577451/1564d102-9f33-ab90-c7a8-ab8b0d7c4bf7.png)

次に「インスタンス」→「インスタンスを起動」に進みます。

![スクリーンショット 2023-10-24 222300.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577451/47a2ff17-b517-3545-d03a-5cfb8306e81a.png)

名前は適当につけます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577451/c5cde782-f660-94cc-6724-a5cee725daf3.png)
![スクリーンショット 2023-10-24 222511.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577451/2a5cbe16-508a-c25c-cba8-43eefcb8b06c.png)

インスタンスタイプとAMIは無料枠のものを指定します。

![スクリーンショット 2023-10-24 222652.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577451/0777c34b-ac1d-f0b5-654b-9f293267c18c.png)

![スクリーンショット 2023-10-24 222708.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577451/4ed26499-a4ab-3c18-98c0-2e3a806dc647.png)

キーペアを作成を選択してキーペアを作成します。`.pem`形式のファイルがダウンロードされるはずなので失くさないようにしましょう。（※**のちに紹介するPuttyを使ってEC2接続する場合は`.ppk`形式を選択してください**）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577451/2e774b26-16c0-c73e-e117-a500795a3e3b.png)


ネットワーク設定はデフォルトのままで大丈夫です。

![スクリーンショット 2023-10-24 223133.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577451/34e68ed2-32aa-527d-7b36-a69156631391.png)

ストレージ設定もデフォルトのままで設定し、高度な詳細はいったん無視します。

こちらでインスタンスを起動させてあげると、、、、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577451/5351d5eb-7225-8399-1e35-e407321ae87e.png)


EC2が起動してますね！！


## EC2をWebサーバにする

Hello worldをブラウザで表示させるにはWebサーバを立てる必要があります。
そのためEC2にApacheというwebサーバソフトを入れてあげてwebサーバにします。

ではEC2にApacheを入れるため、まずはEC2に接続するところから始めましょう。

僕はいつも**Putty**というツールを使ってSSH接続をしてます。

↓Puttyを使った接続の仕方は別の記事に切り出したので以下を参考に接続してください！
https://qiita.com/Ryukuu0919/items/3dbb87804ca3b0022333

Puttyを使った方法以外にもさまざまな接続法があるのでEC2に接続できればなんでも大丈夫です

EC2に接続できたら以下のコマンドでApacheをインストールしてあげます。
```
sudo yum install httpd -y
```
Apacheをインストール出来たら以下のコマンドで起動してあげましょう。
```
sudo systemctl start httpd
```
これでEC2はwebサーバになっているはずです！
webサーバになっているか確認するために`/var/www/html/`にファイルを置いておきます。
```
sudo nano /var/www/html/index.html
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577451/843c78c4-2243-1541-d9f7-4099cb242eb7.png)

`Ctrl+S`で保存→`Ctrl+X`で終了です。

次にEC2に対してHTTPもしくはHTTPSできるよう該当EC2に紐づくセキュリティグループを編集します。
セキュリティグループで許可してあげないとブラウザで確認する時にEC2にアクセスできません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577451/47ded944-5b2f-05db-a932-cb9093668150.png)

Type: HTTP, Port Range: 80, Source: Custom, Source IP: 0.0.0.0/0 (または特定の IP アドレス/範囲)
Type: HTTPS, Port Range: 443, Source: Custom, Source IP: 0.0.0.0/0 (または特定の IP アドレス/範囲)

上記のインバウンドルールを追加してあげましょう。

これでブラウザで確認できるようになったはずです。
いったんEC2のパブリックIPアドレスをたたいてHello worldが表示されるか確認してみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577451/e60af393-9e2a-f303-2788-957987714bf5.png)

ブラウザのアドレスバーに張り付けて、、、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577451/7eaceac0-d30d-ba23-d78c-faac2442cd07.png)

表示されてる、、！！
自分が設定したインフラに置いたテキストがインターネットに公開されてブラウザで確認できるのって、なんだかとてつもない偉業を成し遂げたかのような気分になりますね、、笑


## ドメインとIPアドレスを紐づける

最後に取得したドメインとIPアドレスを紐づけてドメインをたたいたらHello Worldが表示されるところまでやって完成です。

お名前.comの自分のアカウントにログインします。
そしてDNSレコードの編集と行います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577451/052c58ce-d2d7-a8f1-ca32-c42577b0bc63.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577451/d53ef1d2-530e-ab06-bce6-4bf276bcd152.png)

ドメインとIPアドレスを紐づけるのでAレコードを追加します。
自分が設定したドメインの前には「www（よくみるやつ）」をつけValueにはEC2のパブリックIPアドレスを紐づけます。
![スクリーンショット 2023-10-28 181947.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577451/800a66c5-769f-2abe-7792-5d85eac570a6.png)

この設定が反映されたのを確認したらブラウザで「www.【取得したドメイン】」をたたいてみましょう！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577451/55cf1c48-e107-1880-34b4-cb9feb9480fa.png)

**うおおおおおおおおおお！！**

これでドメインをたたけばHello worldが表示されるようになりました！
いや～テンションが上がりますね(๑˃̵ᴗ˂̵)و 

DNSレコードの設定はすぐに反映されないこともあるみたいなので、表示されなかった場合は数時間まってから再度アクセスしてみてください。


## 最後に
ドメインやらAWSやらはお金がかかってくるものなので管理は忘れないようにしましょう！
インフラは最初取っ付きづらさがありますが、一線を越えてしまえばガンガン触っていけそうだなと今回感じました。
個人開発のモチベも上がるので皆さんもぜひ試してみてください。

それではまた！ヾ(*･ω･)ﾉｼ