狛ログ

2018年4月12日木曜日

Amazon S3 で サイト公開（HTTPS）する。（２）S3での公開準備編

4月 12, 2018

オフィス狛 技術部のKoma（Twitterアカウントの中の人＆CEO）です。

前回は、作業の概要のみだったので、今回は早速作業に取り掛かって行こうと思います。

１）バケット（Bucket）の作成

まずは、AWSのAmazon S3でバケット（Bucket）を作ります。

・Name and region
バケット名称（Bucket name）は、サイトのドメインにします。
例えば弊社だと「officekoma.co.jp」になります。

・Set properties
ここはそのまま次へ（Next）

・Set permissions
ここもそのまま

・Review
内容を確認しバケット作成します。（Create bucket）

上記までの手順を再度繰り返し、「www」サブドメイン用のバケットも作っておきます。
例えば弊社だと「www.officekoma.co.jp」になります。
作成した結果が以下の通りです。

２）ファイル（html・css・js）のアップロード

次にhtmlなどのファイルをアップロードします。
アップロードするのは、サブドメイン無しのドメインのみです。
例えば弊社だと「officekoma.co.jp」

OverviewタブのUploadボタンを選びます。

必要なフォルダ・ファイルを選択します。Drag and dropで、まとめて一気にアップロード出来ます。

漏れなくファイルが選ばれていることを確認して、アップロードします。（Upload）

アップロードすると、以下のようになります。

３）権限の設定

次に Permissions タブから、権限の設定してを行います。
以下の内容で保存します。（Save）
※Resource のドメイン部分を所有のドメインに変更して下さい。
{
  "Version":"2012-10-17",
  "Statement":[{
 "Sid":"PublicReadGetObject",
        "Effect":"Allow",
   "Principal": "*",
      "Action":["s3:GetObject"],
      "Resource":["arn:aws:s3:::officekoma.co.jp/*"
      ]
    }
  ]
}


登録後は以下のように、公開状態（Public）になっている事をアラートで教えてくれます。

４）ホスティングの設定

次に Properties タブを選択し、「Static website hosting」（静的Webサイトに使用する）を選択します。
「Index document」にトップページとなるhtmlファイルを設定します
「Error document」にエラーページ（404など）となるhtmlファイルを設定します
※Endpointが接続するURLになります。

設定後はこんな感じです。
この時点でサイトは表示出来るようになっているので、
先程の Endpoint のURLに接続して、表示を確認しましょう。

続いて、同じ事を「www」サブドメインの方にも行いますが、
こちらは、Properties の設定のみを行います。
先程と同じ手順で、「Static website hosting」（静的Webサイトに使用する）を選択します。
そして、Redirect requests にサブドメイン無しのドメインを設定します。
例えば弊社だと「officekoma.co.jp」

これで、サブドメイン「www」付きで接続されても、サブドメイン無しで接続されても、
問題なくサイトが表示される事になります。

如何だったでしょうか？
S3での公開準備編はここまでです。

次回は、問い合わせフォームで、PHPなどプログラムを使用していた場合の代替手段についてです。

次回：Amazon S3 で サイト公開（HTTPS）する。（３）問い合わせフォーム準備編その１
前回：Amazon S3 で サイト公開（HTTPS）する。（１）作業の概要


, ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)

Recent Posts

Posts