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

10191 ワード
AWS 初心者 AWS テキストリンク

はじめに

AWSを使ってWebサイトを公開するまでの手順のメモです。AWSの知識がゼロで、「S3って何？」「バケットって何？」というようなレベルから、公開にこぎつけました。
AWSに動的なサイトを公開するまでの手順は、以下の記事を参照してください。
AWS EC2上にPHPのWebサイトを公開して、「Hello World」を表示するまでの全手順

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

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

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

今回はAWSでもっとも手軽にWebサイトを構築できる「Amazon S3」を利用しました。
Amazon S3（Amazon Simple Storage Service）は、クラウド上でファイルを共有できるAWSの中のひとつのサービスです。Webサイトのコンテンツ配信やバックアップなどに使用できます。
S3は静的なページのみ対応しており、PHPなど動的なページには対応していません。

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の買い物アカウントを持っていても、ここでアカウントを新規作成します。

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

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

電話番号を入力します。

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

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

2. HTMLファイルを作る

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

210406タイプ(タイプ)
[アルゴリズム]Algospot NERD 2