【まとめ】AWSのS3上で静的なウェブサイトを構築する手順

【まとめ】AWSのS3上で静的なウェブサイトを構築する手順

AWSのS3を使えば安く静的なウェブサイトを構築できますよ。

いまやどの会社も持っているウェブサイト。
個人でもブログを含めて運用している方は多い方は多いかと思います。

しかし、そんなウェブサイトを運用するには下記のような悩みがでてきます。
「ウェブサイトを運用すると月額が結構かかる」
「プログラムはいれないから安く済ませたい」

そんな悩みはAWSのS3を使えば解決します。
http://aws.amazon.com/jp/s3-hosting/
なにしろ安い。

AWSで運用するには多少知識が必要になります。
今回はS3上で静的なサイトを構築する手順をまとめます。

AWSのS3で格安にウェブサイトを運用する方法

この後手順をまとめますが、S3で運用をするにはAWSにアカウントを持つ必要があります。
http://aws.amazon.com/jp/

アカウントを持ってログインした状態から下記手順を進めてください。

【参考サイト】
http://docs.aws.amazon.com/AmazonS3/latest/dev/website-hosting-custom-domain-walkthrough.html

S3での設定

S3 Management Console 起動

  1. AWSにログインし “Management Console”を開く
  2. サービス一覧から、S3を選択

2つのBucketの作成 (www有りとwww無し)

  1. 画面左上の”Create Bucket”をクリック
  2. “Create a Bucket”というダイアログがでてくるので、”Bucket Name”と”Region”を設定する。
    ※Bucket Nameはwwwのサブドメイン名と同じ名称 ここでは”www.foo.com”
    ※RegionはTokyo
    入力ができたら”Create”をクリック
  3. 続けて画面左上の”Create Bucket”をクリック
  4. “Create a Bucket”というダイアログがでてくるので、”Bucket Name”と”Region”を設定する。
    ※Bucket Nameはドメイン名と同じ名称 ここでは”foo.com”
    ※RegionはTokyo
    入力ができたら”Create”をクリックこの段階で”www.foo.com”と”foo.com”というBucketがコンソールに表示されます。※ここから先の設定は、wwwありで公開したい場合はwwwありで、wwwなしで公開したい場合はwwwなしで設定してください。
    ここでは、wwwなしのfoo.comを公開する手順で進めます。

データのアップロード

  1. コンソールに表示されたBucketの一覧からfoo.comを開く
    ※名称をクリックする
  2. ページ左上の”Upload”をクリックすると、Upload用のダイアログが開く
  3.  “Add Files”を選択して、アップロードする
    ※”Add Files”を使用すると、フォルダのアップロードはできない。
    フォルダ毎アップロードする場合、”Enable Enhanced Uploader (BETA) “を使用するか、Cyberduckなどソフトを利用する形になる

公開するための承認の設定

  1. “All Buckets”をクリックしてBucketの一覧に戻り、foo.comを選択し、ページ右にあるタブから”Properties”を開き、”Permissions”を展開する。
    ※名称をクリックすると中が展開されてしまうので、名称の横をクリックする
  2. “Add bucket policy”をクリックすると、”Bucket Policy Editor”が起動するので、下記のコードを記述する。

    ※コード内のfoo.comの箇所は、その都度設定したいドメイン名に変更

ウェブサイトのホスティングのための設定

  1. 引き続き、foo.comの”Properties”の”Static Website Hosting”を展開し、”Enable website hosting”を選択する。
  2. Index Documentを入力する欄が展開されるので、インデックスとなるファイル名(index.htmlなど)を入力し、Saveをクリック。

リダイレクトの設定

※www有りを公開したい場合は、www無しからwww有りへのリダイレクト、 www無しを公開したい場合は、www有りからwww無しへのリダイレクトの設定をします。
ここでは後者の形になります。

  1. コンソールに表示されたBucketの一覧からwww.foo.comを選択し、ページ右にあるタブから”Properties”を開き、”Static Website Hosting”を展開する。
  2. “Redirect all requests to another host name”を選択し、”Redirect all requests to:”の欄にfoo.comと入力し、Saveをクリック。
    ※foo.comの箇所は、その都度設定したいドメイン名に変更

Route53での設定

Hosted Zoneを作成する

  1. サービス一覧から、Route53を選択
  2. Route53のコンソールに移動したら、ページ左の”Hosted Zone”を選択
  3. “Route 53: Hosted Zones”にあるタブから”Create Hosted Zone”を選択
  4. “Domain Name:”の欄にドメイン名(例:foo.com)を記入し、”Create Hosted Zone”をクリック
    ドメイン一覧に登録したドメインが表示されます。

Hosted ZoneにA (エイリアス)レコードを作成する

  1. ドメイン一覧から、登録したドメインを選択
  2. “Route 53: Hosted Zones”にあるタブから”Go to Record Sets”を選択
  3. 続いて、”Create Record Set”を選択
  4. 入力に移るので、下記のように入力
    ・Name = サブドメイン(wwwなど)を公開する場合は記入(※ここでは入力無し)
    ・Type = A – IPv4 address
    ・Alias = Yes
    ・Alias Target = 記入欄にフォーカスすると選択肢が表示されるので、その中から”S3 Website Endpoints”にある先程作成したBucketのEndpointを選択(例:foo.com(s3-website-ap-northeast-1))
    ・Routing Policy = Simple
    ・Evaluate Target Health = No
    入力が出来たら、入力画面下の”Create Record Set”をクリックして完了

Hosted ZoneにCNAMEレコードを作成する

  1. 引き続き、”Create Record Set”を選択
  2. 入力に移るので、下記のように入力
    ・Name = Aレコードで設定したNameではないほうのNameを入力(※ここではwww)
    ・Type = CNAME – Canonical name
    ・Alias = No
    ・TTL = 300(デフォルトのまま)
    ・Value = Endpointを記述する。
    記載場所は、S3コンソールの”Properties”内、Static Website Hostingを展開すると記載されている (例:www.foo.com.s3-website-ap-northeast-1.amazonaws.com)
    ・Routing Policy = Simple
    入力が出来たら、入力画面下の”Create Record Set”をクリックして完了

Route53をDNSプロバイダーとして設定する

  1. “Back to Hosted Zones”をクリックして、ドメインの一覧に戻る
  2. 設定したドメインをクリックすると(ここではfoo.com)、右側に情報が表示されるので、その中のDelegation Set *:の内容を控える
  3. ドメインを取得したレジストラにて、ネームサーバ参照先を2で控えたものに変更する

設定完了後の確認

  1. コンソールから、dig foo.comと入力して、設定が正しいか確認する
  2. www有り・www無し共に、表示が問題無い事・リダイレクトが正しく動作することを、ブラウザでチェックする

まとめ

設定する項目が多いのでハードルは若干高めですが、これだけ格安で運用できるのであれば使わない手はありませんね。
ファイルが多く発生するサービスでは、物理ファイルの置き場として使用するとメインサーバへの負荷を抑えられますよ。

筆者について

筆者について


1982年、東京下町生まれ。
高校卒業後、アメリカへ留学。その後、「アートが根付いた国では絵だけで食えるのか」を確認するため、ドイツベルリンにてアート活動をおこなう。

日本に戻ってからは、コーディング・オーサリング・プログラミングなんかを経て、ウェブディレクターを肩書きにしておりました。現在は独立し、ブログやサイトの運用を軸に、ウェブサイトの企画提案からデザイン・構築まで手広く活動しております。何でも屋です。

isLog〜イズログ〜では『日々生きること自体が旅』をモットーに、日々の旅を中心に綴っています。

詳しいプロフィールはこちら


feedly

コメントを残す

*