Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

はじめに

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

harufuji
趣味プログラマです。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away