16
17

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

S3でウェブサイトを公開する

Last updated at Posted at 2020-02-22

概要

AWSを利用していて、ウェブサイトを公開する簡単な方法は、S3を使うことです。
方法はあちこちにあると思いますが、人に説明するときの資料として作成します。

やり方

S3バケットを作る

(1) マネジメントコンソールからS3のメニューへ移行します。
WS000001.JPG

(2) 「バケットを作成する」をクリックします。
WS000000.JPG

(3) バケット名には公開したいドメイン名を入力して、「次へ」をクリックします。
リージョンは、基本はどこでも構いませんが、私は国内向けサイトとして考えているので、「アジアパシフィック(東京)」を選択しました。
尚、ここで入力した名前をDNSに登録する必要があります。
WS000002.JPG

(4) タグなどを必要に応じて設定し、「次へ」をクリックします。
WS000003.JPG

(5) 「パブリックアクセスをすべてブロック」のチェックを外します。
WS000004.JPG

(6) 警告が出ますが、「現在の設定により、このバケットと中のオブジェクトがパブリックになる可能性があることを了承します。」にチェックを入れ、「次へ」をクリックします。
WS000005.JPG

(7) バケット名、リージョンに間違いがないことを確認して、「バケットを作成」をクリックします。
WS000007.JPG

(8) 作成したS3バケットをクリックします。
WS000023.JPG

ウェブサイト公開の設定

(1) 「プロパティ」をクリックします。
WS000024.JPG

(2) 「Static website hosting」の〇をクリックします。
グレーアウトされていますが、クリックするとメニューが表示されます。
WS000026.JPG

(3) 「このバケットを使用してウェブサイトをホストする」を選択します。
WS000030.JPG

(4) 「インデックスドキュメント」に公開するファイル名を入力し、「エラードキュメント」に存在しないページにアクセスするなどエラー時に表示するファイル名を入力し、「保存」をクリックします。
ここでは、デフォルトの「index.html」、「error.html」を入力しました。
WS000031.JPG

(5) 以下のような表示になればOKです。
WS000032.JPG

インターネットからのアクセス設定

(1) 「アクセス権限」をクリックします。
WS000036.JPG

(2) 「バケットポリシー」をクリックします。
WS000037.JPG

(3) 「ARN:: am::aws:s3:::バケット名」の部分を確認しておきます。
WS000039.JPG

(4) 入力欄に以下のように入力します。
「バケット名」の部分は読み替えて入力してください。

{
  "Version":"2012-10-17",
  "Statement":[
    {
      "Sid":"AddPerm",
      "Effect":"Allow",
      "Principal": "*",
      "Action":["s3:GetObject"],
      "Resource":["arn:aws:s3:::バケット名/*"]
    }
  ]
} 

(5) 「保存」をクリックします。
WS000041.JPG

(6) 警告が出ますが、もともとインターネット公開が目的なので、気にしなくても大丈夫です。
WS000042.JPG

コンテンツアップロード

(1) 「概要」をクリックします。
WS000043.JPG

(2) 「アップロード」をクリックします。
WS000044.JPG

(3) 「index.html」と「error.html」をアップロードし、「次へ」をクリックします。
WS000047.JPG

(4) 「パブリックアクセス許可を管理する」で「このオブジェクトにパブリック読み取りアクセス権限を付与する」を選択します。
WS000048.JPG

(5) 「次へ」をクリックします。
WS000049.JPG

(6) ストレージクラスはデフォルトのまま、暗号化の設定は不要ですので、そのまま「次へ」をクリックします。
WS000051.JPG

(7) 「アップロード」をクリックします。
WS000052.JPG

(8) アップロードされたファイルをクリックします。
WS000054.JPG

(9) 「オブジェクト URL」をクリックします。
WS000056.JPG

(10) アクセス出来たら成功です。
WS000057.JPG

DNS登録

ここでは、Route53を使って登録します。
本手順を行う場合、前提として、ドメインを持っていて、Route53で管理していることが必要です。

(1) DNS登録する「オブジェクト URL」をコピーしておきます。
WS000058.JPG

(2) AWSコンソールのメニューに戻って、Route53メニューに移動します。
WS000059.JPG

(3) ホストゾーンを選択します。
WS000060.JPG

(4) 管理しているホストゾーンの設定画面へ移動します。
WS000061.JPG

(5) 「レコードセットの作成」をクリックします。
WS000063.JPG

(6) S3のホストをAレコードのエイリアスで登録します。
ここでは、エイリアスを使うのが重要です。
WS000064.JPG

(7) 登録出来たら、実際にURLにアクセスして表示できるか確認します。
WS000065.JPG

以上です。

備考

このままでは、httpアクセスしかできません。
どこかでhttpsアクセスできるよう、CloudFrontを使ったやり方を説明します。

16
17
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
16
17

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?