365
342

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.

独自ドメインを使ってAmazon S3で静的Webサイトをホストする

Last updated at Posted at 2016-02-07

#概要
##何ができるのか
Direct Hosting Pattern.png

  • S3バケットをまるごとWeb公開することができます
  • Web公開できるのは静的コンテンツに限ります
  • 独自ドメインも使用可能です。ただしZone Apex(サブドメインなし)の利用はドメインをRoute 53でホストしてる場合のみ可能です
  • LinuxなどでWebサーバを立てる場合のように、サイジングやサーバ運用を行う必要はありません
  • ある程度までのスパイクには耐えますが、xx砲1対策などにはCloudFrontを併用しましょう

<公式ドキュメント>
http://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/hosting-websites-on-s3-examples.html
<分かりやすいスライド>
http://www.slideshare.net/horiyasu/amazon-s3web-27138902

##前提条件

##料金
S3の料金のみでWeb公開が利用できます。
また、サインアップ後1年間の無料利用枠があります。
https://aws.amazon.com/jp/s3/pricing/

#S3 BacketをWeb公開する

  • Web公開に使用する独自ドメインを用いたFQDNを決めておく

    ex) s3.jaws-ug.tk
  • AWSにサインインする
  • S3コンソールを開く

    ※ 英語画面で説明するので日本語表示になっている場合は、画面左下の言語選択を「English」に変更する
    AWS Management Console 2017-06-24 10-38-08.png


  • [+ Create bucket]をクリックする
  • 上記独自ドメインのFQDNを[Backet Name]に入力する。独自ドメインをもっていない場合は、任意のバケット名でOK。リージョンはお好みで良いが、日本人向けサイトであれば東京リージョンが最もパフォーマンスが良い

    独自ドメインでWeb公開する場合、バケット名=FQDNでなければならない
  • [Next]をクリックする
    S3 Management Console 2017-06-24 10-42-43.png


  • [Next]を2回クリックする
  • 今回はWeb公開(パブリックアクセスを許可)するので[Block all public access]のチェックを外し、[I acknowledge...]にチェックを入れ、[Next]をクリックする

    スクリーンショット 2020-05-26 17.31.29.png

* [Create Backet]をクリックしてバケットを作成する
![S3 Management Console 2017-06-24 10-47-34.png](https://qiita-image-store.s3.amazonaws.com/0/80392/9b72e411-f585-7680-dc20-34a88b786691.png)

* 作成したバケットを開く
![スクリーンショット 2017-06-24 10.56.13.png](https://qiita-image-store.s3.amazonaws.com/0/80392/16eb1f50-299d-ae38-192b-f21e29849c77.png)

* [Properties]タブを開き[Staticwebsite hosting]を展開する * [Use this bucket...]を選択する * [Index document]に**`index.html`**を入力する * [Save]をクリックする ![S3 Management Console 2017-06-24 11-07-00.png](https://qiita-image-store.s3.amazonaws.com/0/80392/9032d4f1-bf24-810e-3c99-eacf92a3349f.png)

* [Permission]タブを開き[Bucket Policy]をクリックする * 画像下のJSONをコピペする。バケット名(s3.jaws-ug.tk)は修正すること * [Save]をクリックする ![S3 Management Console 2017-06-24 11-28-06.png](https://qiita-image-store.s3.amazonaws.com/0/80392/c268731a-3d6b-8cef-1323-4ab83e0b78ed.png)

BucketPolicy
{
  "Version":"2012-10-17",
  "Statement":[
    {
      "Sid":"AddPerm",
      "Effect":"Allow",
      "Principal": "*",
      "Action":["s3:GetObject"],
      "Resource":["arn:aws:s3:::s3.jaws-ug.tk/*"]
    }
  ]
}
  • 何か文字(文字化けしないよう、英文が無難)を書き込んだテキストファイルを**index.html**の名前で作成し、Web公開するバケットにファイルをアップロードする
    S3 Management Console 2017-06-24 12-40-52.png


  • Endpointのリンクをクリックして先ほどTXTファイルに書き込んだ文字が表示されたら成功

    S3 Management Console 2017-06-24 12-46-12.png
    スクリーンショット 2020-05-27 9.02.48.png

#独自ドメインでアクセスできるようにする
##独自ドメインをRoute 53でホストしている場合
あらかじめ決めておいたFQDNでAレコードAliasを登録する
http://qiita.com/Ichiro_Tsuji/items/8471fe0b3d4d17cde146#aレコードaliasの登録
##独自ドメインをRoute 53 以外のDNSでホストしている場合
あらかじめ決めておいたFQDNでDNSにCNAMEレコードを作成し、先ほどクリックしたS3バケットのEndpointを登録する

#APIアクセス用のKeyを作成する
他のアプリケーションからS3バケットにAPIでアクセスするために、IAM Access Keyを作成します
今回作成するのは下表のユーザーおよびそれにひも付くKeyです。画像内の入力文字列はサンプルですので、説明文で指定した文字列を入力してください。

ユーザー名 アクセス権
s3 AmazonS3FullAccess
  • AWSにサインインする
  • Identity and Access Management(IAM)コンソールを開く
    ※ 英語画面で説明するので日本語表示になっている場合は、画面左下の言語選択を「English」に変更する

    AWS Management Console 2017-02-05 15-21-17.png


  • 「s3」というUser nameでProgrammatic accessユーザーを作成する

    IAM Management Console 2017-02-05 15-25-26.png



    IAM Management Console 2017-02-05 15-27-19.png


  • [Attach existing policies directly]をクリックし、[s3]で検索して、[AmazonS3FullAccess]にチェックを入れる
  • [Next: Review]をクリックする

    IAM Management Console 2017-02-05 15-36-54.png


  • [Create user]をクリックする

    IAM Management Console 2017-02-05 15-38-24.png


  • 認証情報の書かれたCSVをダウンロードし、[Close]をクリックする

    IAM Management Console 2017-02-05 15-41-43.png

#参考
S3バケットのコンテンツを管理するには、専用アプリを利用すると便利です。バケットへのアクセスには先ほど作成したIAM Access Keyを使用します。
<Mac用>
Cyberduck
https://cyberduck.io/index.ja.html?l=ja

<Windows用>
WinSCP
https://forest.watch.impress.co.jp/library/software/winscp/

CloudBerry Explorer
http://www.cloudberrylab.com/free-amazon-s3-explorer-cloudfront-IAM.aspx

  1. 不倫謝罪程度のことではびくともしないようです

365
342
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
365
342

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?