![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi566L7skwC1cmrgydvguybjGXYqPXh8OgQIEj-quqJsJ3mO8OS_OxTDrTIrhKWWgRZLzzynWrYdmzZijfJfZRj1UzCNg3JpyhOU77zvBE1BCzBilQVBfsIsOsKi13DWNov1EpdHst9wO7W/s320/Fotolia_143589026_XS.jpg)
オフィス狛 技術部のKoma(Twitterアカウントの中の人&CEO)です。
前回は、作業の概要のみだったので、今回は早速作業に取り掛かって行こうと思います。
1)バケット(Bucket)の作成
まずは、AWSのAmazon S3でバケット(Bucket)を作ります。![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiptIv_u5T0JcTnIjOwmqU2rS8VI0gRgdPW0Be1QO4pNi1aNjJB_-VJKUGD2sDR2DjR3B8ojjkGFS7GQ2IqqWFcyfofdxYGp1tMxYob0aF25r11GUgzKJxQsMMxR1zds0b_IVDog8leC9Qr/s320/Fotor001.png)
・Name and region
バケット名称(Bucket name)は、サイトのドメインにします。
例えば弊社だと「officekoma.co.jp」になります。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhypiKLTKL8N3Y0iQ_eTWXJzyNQTMVCNaDhKvbnd8ywJdANLwxgkTF00DQXDfbEtsOQZ2DGZc3oDHAA2ohNqnR8sNEb9MOj08pxSfoRv8UndcSZIPIqTd-QTQFsB7uZjRswgo2H3rp9NWga/s320/Fotor002.png)
・Set properties
ここはそのまま次へ(Next)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_rxXoxGro18cH30ypdxL3b3HYGpkbcgPnpco_5hFdBohAR_8AleifWvQlQUA9k5P3ivH2UxQ_LHcmb1A1obNB3RPA_513JfW1duL4HXIengMJfXiXvKupPk_XACyJ6tggIUBOwv1PHeWz/s320/Fotor003.png)
・Set permissions
ここもそのまま
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD68SbA7Q3qysFaRo0Nq8NcpJOCRKFSBDIdNE4JaY_kGM70tFCgFnJ5o-fKAU2_mPOHhDXNH2rMHuMSC2i0fAdI_RHijIvzb3R-2wh3nsv_4Ddz5gfqbq_DEdeIhZBCJCjjZ8VDPHTry_7/s320/Fotor004.png)
・Review
内容を確認しバケット作成します。(Create bucket)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9K4JrmCBu6bbrpCM19XjYu4tiO71nT41m2vzIFZvThrnStx1nUoX6Rg-5LdKQ2qVlv2jLi0dgCvq_Qkk2VRpXlwQsoH99rvMxEasLWd5pE44qVU82mZxYCd_TviWH6Zty6fQWkp7k8F27/s320/Fotor005.png)
上記までの手順を再度繰り返し、「www」サブドメイン用のバケットも作っておきます。
例えば弊社だと「www.officekoma.co.jp」になります。
作成した結果が以下の通りです。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPDxsYZovq4A9M3itq85jp8kM6kaNAoeTa9B3p2-ob_zeInLLlMtyOy02G3XNS8rRZQpANpwBqPXrc1a9w2edbu771gl8f0551Yj_Qu3Juajr9P9zuHn60VcWV3Dx0zNwZWJRASBH5JvY7/s320/Fotor006.png)
2)ファイル(html・css・js)のアップロード
次にhtmlなどのファイルをアップロードします。アップロードするのは、サブドメイン無しのドメインのみです。
例えば弊社だと「officekoma.co.jp」
OverviewタブのUploadボタンを選びます。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjapTK-LNPMkfPDXLrgSRjKAsyecNpBND19GkFZOY6cHHhXIBI82KRAESOfJBZvZQ2GFHzJRLNtDFIEt2Y489-WA4NXnQHx2jMYKT_STHhSLDDVAcOexkJV89_jTCF-JFMXhkaDIDXDLef4/s320/Fotor007.png)
必要なフォルダ・ファイルを選択します。Drag and dropで、まとめて一気にアップロード出来ます。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK4ojKMcvFhx3VB577JoCWix8d8YaEFKLb1V-lwEF7gEp2aNY34ADjxzGpaoUOB2fimfEGfDhJAk963UOLOHp69lxqHOlyrc3UItcA2bHgs6nUmf2ghHnfora6Mtb5jybgstmdL3hQnpqW/s320/Fotor008.png)
漏れなくファイルが選ばれていることを確認して、アップロードします。(Upload)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgORLGPVHzDWDm-L3Wfou1N75RwK0Jv5ul_SiiH3F032eYkldxNWLC_wri5EvMyjg6rL7qP3f3ohhldleMrAV4x-LBUevoVyDpz5cl4unH2lFph3TBtkPBs6uiftdMhaXhIcYUP4bpZ-Mks/s320/Fotor009.png)
アップロードすると、以下のようになります。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWRNrm6QkvOvf71Nbs8zRe_5sh1LCZYTBLJcrtMIsdovyVKL7wK2IMIVKlgLR1t1tyx5etMg1ZosZaEc2MnciM7pPZhJQjRTmS7tCTR-hWZXeo4PNhfp4o6oNwlgWtktqspfg8bZAha7bw/s320/Fotor010.png)
3)権限の設定
次に Permissions タブから、権限の設定してを行います。以下の内容で保存します。(Save)
※Resource のドメイン部分を所有のドメインに変更して下さい。
{ "Version":"2012-10-17", "Statement":[{ "Sid":"PublicReadGetObject", "Effect":"Allow", "Principal": "*", "Action":["s3:GetObject"], "Resource":["arn:aws:s3:::officekoma.co.jp/*" ] } ] }
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeKRVguv1lpzMcSyaYYTJCJdoECBQBgQ_OweUZSan8SOnaffjXPC2gSunppPJZjB0Q0hJGuy3ilnHdBY6jcJYCeUQcwi0ZVUl1lSLoVL1qglCSEbmraWOv2ccrQQtzX_IAu2rxyF_NUgth/s320/Fotor011.png)
登録後は以下のように、公開状態(Public)になっている事をアラートで教えてくれます。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl8whiiv0E88Bfa3Kc1I0Be9Lmv-vNXzAuo0nI27W4SMQCk9MIpix_afGP4bci_O0f9NJY15hRV1Wqar1XFLjam6wM-g2mt5XVS0P3iXoEOJLh_mDL56we6iL4_02HVqBh9rnNOQ075oB3/s320/Fotor012.png)
4)ホスティングの設定
次に Properties タブを選択し、「Static website hosting」(静的Webサイトに使用する)を選択します。「Index document」にトップページとなるhtmlファイルを設定します
「Error document」にエラーページ(404など)となるhtmlファイルを設定します
※Endpointが接続するURLになります。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5Fjjh1oyx3sKN9l9zy7RU-xEteqDHyjgb1DcT9SQIIPVj-TNQk3ylJ3FaQedCtvUg43LiVIexWInrNmbR5VIMK73DCZ2zpyQ87jkqSRLP9yLX2haBe7dFjLvhfv7zeSFVkCBgf1U18ZYI/s320/Fotor013.png)
設定後はこんな感じです。
この時点でサイトは表示出来るようになっているので、
先程の Endpoint のURLに接続して、表示を確認しましょう。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRJzRbKqpTQXiMFL0zrrN5UIpwyvFwDucbWugCgk9EKXtb7dr9be44ILlxpYU6BNHT9dfKgSet1z6A0HtbIj0xIpTMFI21tZn8BslDY66E41HvOtjREq4gqdXFud1XciXeEiwzAs2aAKaM/s320/Fotor014.png)
続いて、同じ事を「www」サブドメインの方にも行いますが、
こちらは、Properties の設定のみを行います。
先程と同じ手順で、「Static website hosting」(静的Webサイトに使用する)を選択します。
そして、Redirect requests にサブドメイン無しのドメインを設定します。
例えば弊社だと「officekoma.co.jp」
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG1iEBkHV1NjzDo86itxATAcuupcSv6rsxStfbXF2xuBJ08yuAF76iJhDD8URMAGTf2ZO6WntwUa4-Ptk1QcmpNCVUH2uOyy2fCaMA-gmvgE-gXFSOSyc7HRd1Kk-4l3tpIQzvLsKYrsEa/s320/Fotor015.png)
これで、サブドメイン「www」付きで接続されても、サブドメイン無しで接続されても、
問題なくサイトが表示される事になります。
如何だったでしょうか?
S3での公開準備編はここまでです。
次回は、問い合わせフォームで、PHPなどプログラムを使用していた場合の代替手段についてです。
次回:Amazon S3 で サイト公開(HTTPS)する。(3)問い合わせフォーム準備編その1
前回:Amazon S3 で サイト公開(HTTPS)する。(1)作業の概要
AWS , HTTPS , S3
0 件のコメント:
コメントを投稿