AWS

AWS上にWebサイトを公開して、「Hello World」を表示するまでの全手順

はじめに

素人がAWSを使ってWebサイトを公開するまでに学んだことのメモです。AWSの知識がゼロで、「S3って何?」「バケットって何?」というようなレベルから、四苦八苦して公開にこぎつけました。気づいたところがあったら、教えてもらえると助かります。
ちなみに、独自ドメインはすでに取得済です。

AWSはクラウドサービスである

AWSとは、Amazon Web Serviceの略で、Amazonが提供する世界最大のクラウドサービスのことです。
クラウドサービスとは、ネットワーク上にあるさまざまなサービスを必要に応じて利用するシステム形態のことです。

S3はクラウド上でストレージを提供するサービスである

今回はAWSでもっとも手軽にWebサイトを構築できる「Amazon S3」を利用しました。
Amazon S3(Amazon Simple Storage Service)は、クラウド上でファイルを共有できるAWSの中のひとつのサービスです。Webサイトのコンテンツ配信やバックアップなどに使用できます。

AWS基本用語

  • バケットとは、データの入れ物のことです。
  • オブジェクトとは、バケットに保存するファイルのことです。

全体の流れ

  1. AWSのアカウントを取得する。
  2. HTMLファイルを作る。
  3. バケットを作成して、HTMLファイルをAWS上に保存して、公開する。
  4. 独自ドメインを設定する。
  5. http://www.hogehoge.com にアクセスしたら、http://hogehoge.com にリダイレクトさせる。

1. AWSのアカウントを取得する

アカウント登録にはメールアドレスとクレジットカード、本人確認のための電話番号が必要です。AWSのサイトにアクセスします。
https://aws.amazon.com/jp/
AWSのアカウントは、Amazonで買い物するときのアカウントと異なります。Amazonの買い物アカウントを持っていても、ここでアカウントを新規作成します。
AWS1.PNG

アドレス項目は必須です。日本語に対応していないので、英語で住所を入力します。
AWS2.PNG

クレジットカード情報を入力します。
AWS3.PNG

電話番号を入力します。
AWS4.PNG

電話がかかってくるので、電話で認証番号を入力します。
AWS5.PNG

AWS6.PNG

無償は「ベーシックプラン」です。ベーシックプランを選びます。
AWS7.PNG

2. HTMLファイルを作る

メモ帳を開いて、以下を入力します。ファイル名を「index.html」として、文字コードを「UTF-8」で保存します。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
Hello World
</body>
</html>

html1.PNG

3. バケットを作成して、HTMLファイルをAWS上に保存する

AWSにログインし、「すべてのサービス」から、「S3」を選択します。
AWS9.PNG

「バケットを作成する」をクリックし、バケット名を入力します。リージョンは「アジアパシフィック(東京)」を選択し、「次へ」をクリックします。
AWS_1.PNG

「プロパティの設定」画面では、何もせず、「次へ」をクリックします。
AWS_2.PNG

「アクセス許可の設定」画面では、「パブリックアクセスを管理する」の項目を「このバケットにパブリック読み取りアクセス権限を付与する」を選びます。
AWS_3.PNG

「確認」画面では、「バケットを作成」をクリックします。
AWS_4.PNG

S3のコンソール画面に戻るとバケットが作成されています。バケット名をクリックします。
AWS_5.PNG

「ファイルの選択」画面で、「ファイルを追加」をクリックし、さきほど作った「index.html」を選びます。
AWS_6.PNG

アップロードしたあとに、「次へ」をクリックします。
AWS_7.PNG

「アクセス許可を設定する」画面では、「パブリックアクセス許可を管理する」の項目で「このオブジェクトにパブリック読み取りアクセス権限を付与する」を選びます。
AWS_8.PNG

「プロパティを設定する」画面では、何も変更せずに、「次へ」をクリックします。
AWS_9.PNG

「確認画面」では、「アップロード」をクリックします。
AWS10.PNG

ファイルがアップロードされました。さきほどアップロードした「index.html」をクリックします。
AWS_11.PNG

「リンク」にある「https://s3-ap~」で始まるURLをクリックします。
AWS_12.PNG

AWS_13.PNG

「Hello World」が表示されました。

5. 独自ドメインを設定する

「Amazon Route 53」にアクセスします。
「Amazon Route 53」とは、AwSのクラウドドメインネームシステム(DNS)の名称です。
クラウドドメインネームシステム(DNS)とは、インターネット上におけるドメイン名などを管理・運用するシステムのことです。
https://console.aws.amazon.com/route53
「DNS Management」の「Get Started now」をクリックします。
AWS26.PNG

もう一度、「Create Hosted Zone」をクリックします。
「Domain Name」に取得済みのドメイン「hogehoge.com」を入力します。今回は、メインをwwwなしの「hogehoge.com」にして、「www.hogehoge.com」にアクセスされた場合、「hogehoge.com」にリダイレクトするように設定します。
「Public Hosted Zone」を選択し、「Create」をクリックします。
AWS28.PNG

「NS」の「Value」をメモしておきます。
AWS_19.PNG

次にオリジナルドメインを購入したサイトに移動し、ネームサーバー設定画面を開きます。ムームードメインの場合、「ネームサーバ設定変更」という名称です。
muumuu_1.PNG

ネームサーバー1~4に先ほどメモした「ns-」で始まるValueに記載されているドメイン名を入力します。最後のドットは入力してはいけません。入力後、「ネームサーバ設定変更」をクリックします。
muumuu_2.PNG

AWSに戻り、「プロパティ」の「Static website hosting」をクリックします。「エンドポイント」に記載されているURLをコピーします。
AWS_20.PNG

「Amazon Route 53」に移動します。「Name」に「www」、「Type」は「CNAME - Canonical name」を選択し、「Value」に先ほどコピーしたURLを貼り付けます。「Create」をクリックします。
AWS_21.PNG

以下のように、wwwで始まるCNAMEが追加されます。移行には1日程度かかります。翌日、独自ドメインにアクセスすると、「Hello World」が表示されます。
AWS_22.PNG

5. http://www.hogehoge.com にアクセスしたら、http://hogehoge.com にリダイレクトさせる

AWSで、wwwで始まるドメイン名でバケットを新規作成します。「アクセス」は今まで同様に「パブリック」に設定します。
AWS_23.PNG

wwwで始まるドメイン名の「プロパティ」を開き、「Static website hosting」で「リクエストをリダイレクトにする」を選択します。「ターゲットドメインまたはドメイン」の項目に、wwwなしのドメインを入力し、「保存」をクリックします。この処理はすぐに反映されます。www.hogehoge.comにアクセスすると、hogehoge.comにリダイレクトされます。

AWS_24.PNG