Amazon S3 + Movable Type for AWS で負荷耐性の高いウェブサイトを公開する

Movable Type は強力なスタティックパブリッシング機能を持ち、静的なhtmlによるウェブサイト構築は得意とするところです。

この特性を利用して、Movable Type で出力したhtmlを、Amazon S3に転送。S3をウェブサーバーとして使い、サイトを公開してみます。

#  この稿でやること

* Movable Type for AWS(Amazon EC2, 以下 MT for AWS)で、静的htmlのサイトを作る
* 出力したサイトデータをAWS CLI経由でS3へ転送する
* S3上でウェブサイトを公開する

# この構成を利用して嬉しいこと

* Movable Type + S3の静的ウェブサイトホスティング機能を使って、S3をウェブサーバー代わりに使える。
* S3を利用するため、負荷耐性の高いウェブサイトの運用が可能となる。
* CMSサーバーを常時起動しっぱなしにする必要が無い。

#留意点

* S3は静的ファイルしか扱えない。PHPやCGIなどのサーバーサイドプログラムは動かない。
* Movable Type の検索機能やコメント・トラックバック機能は使えない。
* ベーシック認証をかけることができない。

# 前提条件
今回は特定のドメインを利用することを前提とせず、S3が付与するデフォルトのエンドポイントを利用してウェブサイトを閲覧できるまでを記述します。

AWSの管理画面は頻繁にレイアウト変更・文言変更があります。
今回の用語・画面キャプチャは、2016年7月時点のものを利用して記述しています。現状と異なる用語・画面になっている場合はご容赦ください。


# 用語解説

##  Movable Type for AWS とは
Movable Type がインストールされた、OS込みの Amazon Machine Image（AMI）です。MTがインストール・設定済みのEC2インスタンスです。nginx版とApache版があり、用途に応じて選択することができます。
Movable Type for AWS の料金は時間課金となり、マイクロインスタンス（nginx版でのみ提供）でのご利用は無料になります。

https://www.sixapart.jp/movabletype/aws/

##  AWS CLIとは
AWSの各種操作をCLI (Command Line Interface) から行える統合ツールです。Mac・Linux、Windows版があります。Amazon Linux を利用したEC2インスタンスには予め設定されており、すぐに使うことができます。

https://aws.amazon.com/jp/cli/

##  IAM とは

AWS Identity and Access Management の略称です。AWSの操作を行うためのユーザーアカウントを作成して、個別に権限を付与することができます。ユーザーごとに権限を設定できるため、用途によって細かな権限設定をユーザーごとに割り当てることができます。

http://docs.aws.amazon.com/ja_jp/IAM/latest/UserGuide/introduction.html

# 手順

## MT for AWS の立ち上げ

まず最初に、MT for AWSを起動します。起動から設定までは、シックス・アパートのウェブサイトに詳しいマニュアルが公開されていますので、そちらをご参照ください。

https://www.sixapart.jp/movabletype/aws/how-to-use.html

### 公開サイトパスの確認
MT for AWS は、初期状態で [/data/file/static/] 以下にデータを公開するようになっています。S3への同期は、[/data/file/static] 以下の、任意のディレクトリを配信・同期する形になります。

S3に公開したいウェブサイト・ブログの管理画面へ移動して、左メニューから [設定] => [全般] を選び、ウェブサイトやブログのサイトパスを確認します。

## S3 の設定

次に、S3側の設定を行います。

### バケットの作成
ウェブサイトのホスティングに利用するための、S3のバケットを作成します。
AWSのコントロールパネルから、S3のコンソールに移動します。
アクションから[バケットの作成]を選びます。

![S3_1.png](https://qiita-image-store.s3.amazonaws.com/0/83767/e616287c-2c69-6471-a4b0-4732b5d52dcf.png)

バケット名を入力します。ここでは[mt-sample]とします。

![S3_2.png](https://qiita-image-store.s3.amazonaws.com/0/83767/86be16c1-06c3-c9c6-f8f5-fb7d17f16a0f.png)

### サイト公開ポリシーの設定

S3バケットでウェブサイト公開できるように、ポリシーを設定します。

作成したバケットのプロパティを選び、[静的ウェブサイトのホスティング]の設定画面を開きます。
[ウェブサイトのホスティングを有効にする]を選びます。
![S3_3.png](https://qiita-image-store.s3.amazonaws.com/0/83767/30d6e8e5-6cc4-e495-7b3b-22f67de00573.png)

この画面では、ウェブサイトのトップページにあたるインデックス用のhtmlと、エラーが有った際に表示するエラー用のhtmlを設定することができます。それぞれ、任意のhtml名を入力しましょう。

設定画面に[エンドポイント]が表示されます。今回のシナリオでは、このエンドポイントが公開サイトのURLとなります。

すべて設定が終わったら、保存ボタンを押します。

次に、[アクセス許可]から[バケットポリシーの追加]を選びます。

![S3_4.png](https://qiita-image-store.s3.amazonaws.com/0/83767/9580e446-edcb-27bc-0542-5ac82b62e3cc.png)


ここで、S3をウェブサーバーとして利用できるように設定を行います。S3のアクセス許可については、以下のURLに詳しい記述があります。

https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/WebsiteAccessPermissionsReqd.html

例として、[mt-sample]バケットに対するアクセス許可を行う場合、以下の様な記述になります。

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

![S3_5.png](https://qiita-image-store.s3.amazonaws.com/0/83767/b7b833b9-f844-92fb-a687-b3020242e87e.png)

記述が終わったら、保存しておきましょう。

## IAMの設定

S3へデータをアップロードするためのIAMを設定します。
AWSのコントロールパネルから、IAMのコンソールへ移動します。

### IAM の新規作成

[新規ユーザーの作成]を選びます。

![IAM_1.png](https://qiita-image-store.s3.amazonaws.com/0/83767/68dcf1e9-a752-4530-7a1c-272f7a0660b4.png)

任意のユーザー名を入力して、作成します。

![IAM_2.png](https://qiita-image-store.s3.amazonaws.com/0/83767/5f0977c9-2f98-cb11-af53-b6b737c074f0.png)


ユーザーの作成が完了すると、一度だけ、[アクセスキーID] と [シークレットアクセスキー] の表示が行われます。

![IAM_3.png](https://qiita-image-store.s3.amazonaws.com/0/83767/92cac506-ca83-ca82-498d-8efd9fe68bf5.png)


S3へのデータ配信を行う際、この2つのIDが必要となりますので、絶対忘れずにメモしておいてください。また、アクセスキーIDとシークレットアクセスキーは、CSVファイルとしてもダウンロードできますので、必要に応じてダウンロードしておく良いでしょう。

次に、作成したユーザーにポリシーの設定を行います。ユーザー名をクリックして、[アクセス許可]=>[ポリシーのアタッチ]を選びます。

![IAM_5.png](https://qiita-image-store.s3.amazonaws.com/0/83767/c72304e8-f364-e9b7-3a35-24bee7fa7562.png)


この画面では、作成したユーザーに、AWSのどのサービスに対して操作を許可するかの設定を行えます。今回の目的は、S3へのデータ配信なので、[AmazonS3FullAccess]を選び、[ポリシーのアタッチ]をクリックします。

![IAM_6.png](https://qiita-image-store.s3.amazonaws.com/0/83767/ed3758ab-2ea6-2795-3990-d4c78c5eb4dc.png)


AmazonS3FullAccess　のポリシーがアタッチされていれば、設定は成功です。

![IAM_7.png](https://qiita-image-store.s3.amazonaws.com/0/83767/c8295937-0b90-d36b-3b2e-9fd1163bd761.png)


## AWS CLI の設定

作成したIAMでS3へファイルをアップロードするための設定を行います。
SSHを利用して、MT for AWS のインスタンスに接続します。

Movable Type for AWS のインスタンスはAmazon Linux を利用しています。Amazon Linux にはあらかじめAWS CLI がインストールされているため、すぐに利用することができます。

コマンドラインから、[aws configure]と打ち込みます。すると、以下の4つを設定するように求められますので、それぞれ以下のように入力します。

* AWS Access Key ID
 * 作成したIAMのアクセスキーIDを入力
* AWS Secret Access Key：
 * 作成したIAMのシークレットキーを入力
* Default region name：
 * 以下のウェブサイトをもとに、任意のリージョンを入力する。東京なら ap-northeast-1 [^1]
 * https://docs.aws.amazon.com/ja_jp/general/latest/gr/rande.html#s3_region
* Default output format：
 * 設定の必要はありません。

[^1]: S3 はどのエンドポイントを選んでも、すべてのリージョンのS3へ接続できるので、基本的にどのリージョンを選んでも問題ありません。

すべての設定が終わったら、[aws S3 ls] と入力してみましょう。

    $ aws s3 ls
    2016-07-15 05:44:09 mt-sample
    $

作成していたS3のバケット名が表示されたら、設定は完了しています。


## S3 へsyncを実行する

S3 へファイルをアップロードしてみましょう。例として

/data/file/static 以下に公開したウェブサイトのデータを配信する

バケット名はmt-sample

の場合、以下の様なコマンドとなります。

    aws s3 sync /data/file/static s3:/mt-sample/

実際に打ち込んでみると

    $ aws s3 sync /data/file/static s3://mt-sample/
    upload: ../../data/file/static/2016/07/index.html to s3://mt-sample/2016/07/index.html
    upload: ../../data/file/static/robots.txt to s3://mt-sample/robots.txt
    upload: ../../data/file/static/atom.xml to s3://mt-sample/atom.xml
    upload: ../../data/file/static/favicon.ico to s3://mt-sample/favicon.ico
    upload: ../../data/file/static/mt-theme-scale2.js to s3://mt-sample/mt-theme-scale2.js
    upload: ../../data/file/static/index.html to s3://mt-sample/index.html
    upload: ../../data/file/static/styles_ie.css to s3://mt-sample/styles_ie.css
    upload: ../../data/file/static/mt.js to s3://mt-sample/mt.js
    upload: ../../data/file/static/styles.css to s3://mt-sample/styles.css
    upload: ../../data/file/static/2016/07/test.html to s3://mt-sample/2016/07/test.html
    $

スクリプトが実行されて、/data/file/static 以下のデータをS3に転送します。


# S3でホスティングしたウェブサイトをブラウザで確認する

いよいよ、S3にアップロードしたhtmlをブラウザで見てみましょう。

先にS3 のバケットで控えていた、エンドポイントのURLへ、ブラウザでアクセスしてみましょう。

![publish_1.png](https://qiita-image-store.s3.amazonaws.com/0/83767/fe80d874-4ed5-8381-3e2b-f8647727d0b4.png)

無事にhtmlが表示されています。S3へのアップロード成功です。

# Movable Type を利用した運用上の注意点

&lt;MTBlogURL&gt;,&lt;MTEntryPermaLink&gt;など、URLを出力するMovable Type のタグの多くは、http:// からはじまる絶対URLを出力します。このため、S3を利用した運用を行う場合、リンクやURLの出力データに不整合が起きないよう、相対パスによる出力設定を行うなどの必要があります。

Movable Type の標準テーマ「Rainier」や「Classic Blog」などは、Movable Type のパッケージに含まれる[mt-static]ディレクトリ内の画像やcssなどのファイルを参照するように作られています。そのままではS3に配信できないため、ご注意ください。


# 独自ドメインを利用した運用

S3を利用しつつ、独自ドメインを設定したい場合、以下のドキュメントをご覧ください。
https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/WebsiteHosting.html