1
1

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

Last updated at Posted at 2023-10-28

はじめに

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

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

ドメインの取得

AWS環境でEC2でwebサーバを立てる

hello world用HTML配置

ブラウザでドメインたたいて表示されるか確認

までやってみます!

ドメインの取得

いきなり出鼻をくじく感じになってしまいますが、こちらはちょっと長いので別記事にしました(゚∀゚ ;)

以下の記事です↓
【お名前.com】初めてドメインを取得してみた

はい、今回はお名前.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

まっさらですね笑

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

image.png

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

image.png

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

スクリーンショット 2023-10-24 222300.png

名前は適当につけます。

image.png
スクリーンショット 2023-10-24 222511.png

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

スクリーンショット 2023-10-24 222652.png

スクリーンショット 2023-10-24 222708.png

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

image.png

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

スクリーンショット 2023-10-24 223133.png

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

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

image.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

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

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

image.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

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

image.png

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

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

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

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

image.png

image.png

ドメインとIPアドレスを紐づけるのでAレコードを追加します。
自分が設定したドメインの前には「www(よくみるやつ)」をつけValueにはEC2のパブリックIPアドレスを紐づけます。
スクリーンショット 2023-10-28 181947.png

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

image.png

うおおおおおおおおおお!!

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

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

最後に

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

それではまた!ヾ(*・ω・)ノシ

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1