Help us understand the problem. What is going on with this article?

AWS S3で静的ウェブサイトをホスティングする

背景

会社でホームページ作成の案件を任されたのをきっかけに,S3を用いてウェブサイトを公開するまでの流れを知ることができたので,整理も兼ねて記事を書くことにしました.

概要

今回はタイトル通り,S3で静的ウェブサイトをホスティングするところまでを書きます.

まず,静的ウェブサイトとは,予め作成されたhtmlファイル等をサーバにアップロードしておき,ブラウザからのリクエストに対してそのままそのファイルをレスポンスするサイトのことです.

S3とは,Amazonが提供するクラウドストレージサービスのことです.
S3は動的ウェブサイトには対応していませんが,静的ウェブサイトなら独自ドメインを割り当てることで,S3のみで完結するため,低コスト,高安定なサイト運営が可能です.

手順

バケットを作成する

S3 Management Consoleからバケットを作成します.
このとき,バケット名を割り当てるドメイン名と同じにすることに注意して下さい.
これはあとでRoute53でS3バケットに独自ドメインを割り当てるためです.

リージョンは「アジアパシフィック(東京)」を選択.
「次へ」を連打し,バケット作成を完了します.

静的ウェブサイトをホストする

作成したバケットを選択し,「プロパティ」タブをクリック.
「Static website hosting」をクリックし,「このバケットを使用してウェブサイトをホストする」を選択します.

すると,

  • インデックスドキュメント
  • エラードキュメント
  • リダイレクトルール

が表示されます.

インデックスドキュメントとは,ファイル名を指定せずにアクセスしたときに表示されるページです.
アップロードするファイル名を入力します.

エラードキュメントとは,ファイルが存在しないなど,エラーが発生したときに表示されるページです.
今回は上記と同じファイル名を入力します.

リダイレクトルールとは,特定のコンテンツのウェブページのリクエストを自動的にリダイレクトするように設定できるルールのことです.
空欄可なので,今回はスルーします.

「保存」し,ホスティングの設定完了です.

アクセス権を付与する

初期設定では,バケットに対するアクセス権は当事者にしかありません.
今回はウェブサイトを公開したいので,誰でもバケットにアクセスできるように設定します.

「アクセス権限」タブをクリックし,バケットポリシーを選択.
するとテキストエリアが出てくるので,以下のバケットポリシーをコピペして追加します.
examplebucketの部分は作成したバケット名に変更してください.

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

匿名ユーザーに読み取り専用のアクセス権を与えるよという意味です.
テキストエリアの下のドキュメント → Bucket Policy Examples → Granting Read-Only Permission to an Anonymous Userに詳細が書いてあるので気になる方はどうぞ.

「保存」して,アクセス権限の設定完了です.

結果

以上で,静的ウェブサイトをS3でホスティングし,誰でも閲覧可能な状態にすることができました.

suuungwoo
大阪大学大学院 情報科学研究科 コンピュータサイエンス専攻 並列処理工学講座。 深層学習/医用画像処理/フロントエンド
https://suuungwoo.github.io/portfolio/
weboar
技術と発想で 「嬉しい」を形にするスタートアップ
https://weboar.com
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした