読者です 読者をやめる 読者になる 読者になる

akiyoko blog

akiyoko の IT技術系ブログです

StaticPress で WordPress サイトを10円ホスティング

WordPress の「StaticPress」というプラグインを使って、WordPressのページを静的ファイルに変換して S3 にアップロードし、WordPress サイトを激安で運用しよう、というのが今回の主旨です。


きっかけは、@masuidrive さんの、

という記事を見て、「そんなのできるんだー。試してみたい!」と思っていたので。



これまで4本ほど連続して、S3 や WordPress について書いてきたわけですが、

それらの集大成的なものになります。


やりたいこと

  1. StaticPressプラグインを使って、WordPressページを静的ファイルに変換し、S3 にアップロード
  2. アップロードされたファイルを、S3 で Webサイトとしてホスティング


なお、S3へのアップロードには、staticpress-s3 というプラグインを利用します。

環境

  • ホストマシン: Mac OS X 10.9.3
  • ゲストマシン: CentOS 6.5 (64bit) on Vagrant 1.4.3 + VirtualBox


 

手順

1) Access Key、Secret Key を作成

S3 へファイルをアップロードするために必要な Access Key、Secret Key を作成します。

AWS Console Manager にログインし、右上のメニューから「Security Credentials」をクリックします。

f:id:akiyoko:20140609072008p:plain

[Access Keys (Access Key ID and Secret Access Key)] から、「Create New Access Key」をクリックします。

f:id:akiyoko:20140609072016p:plain

表示された「Access Key Id」「Secret Access Key」をコピペしておくか、ファイルをダウンロードします。

f:id:akiyoko:20140609072132p:plain

ダウンロードしたファイルには、このように「Access Key Id」と「Secret Access Key」が記述されています。

AWSAccessKeyId=<Access Key Id>
AWSSecretKey=<Secret Access Key>



2) S3 バケットを作成

2) ~ 3) の手順の詳細については、「はじめての Route 53 (Amazon Route 53 を使って Webサイトをネイキッドドメインで運用する)」を参照のこと。

FQDN 形式でバケット名を指定して、S3 バケットを作成します。

f:id:akiyoko:20140610232447p:plain

誰でもファイルの参照ができるようにポリシーを設定します。

f:id:akiyoko:20140610232640p:plain

以下のように Webサイトホスティングの設定をします。

Index Document index.html
Error Document 404.html

f:id:akiyoko:20140610232616p:plain


 

3) レジストラ側で CNAME を設定

「akiyoko.info」ドメインを管理している「お名前.com」のドメインNavi 上で、CNAME の設定をします。





ドメインNavi にログインして、[ドメイン設定] から、[DNS関連機能の設定] -> [DNSレコード設定を利用する] の「設定する」をクリックします。

f:id:akiyoko:20140610235813p:plain


以下のように、CNAME の設定をします。

ホスト名 TYPE VALUE 状態
www.akiyoko.info CNAME www.akiyoko.info.s3-website-ap-northeast-1.amazonaws.com 有効

f:id:akiyoko:20140610235820p:plain



 

4) WordPressを起動

Vagrant + Ansible を使って、さくっと WordPress を起動します。

詳しくは、「Ansibleで WordPress日本語版(3.9.1) を楽々インストール」を参照してください。




5) パーマリンク設定

WordPressダッシュボードで [設定] -> [パーマリンク設定] で「カスタム構造」にチェックを入れて、「/%postname%.html」と入力して保存します。

f:id:akiyoko:20140609072228p:plain

参考



 

6) StaticPress を導入

WordPressダッシュボードで [プラグイン] -> [新規追加] をクリックし、「StaticPress」プラグインを検索します。

f:id:akiyoko:20140609072238p:plain

StaticPress 0.4.3.4 が該当しました。
「いますぐインストール」をクリックします。

f:id:akiyoko:20140609072245p:plain

「プラグインを有効化」をクリックします。

f:id:akiyoko:20140609072253p:plain


7) staticpress-s3 を導入

https://github.com/megumiteam/staticpress-s3
GitHubの画面上で、「Download ZIP」ボタンをクリックして zipファイルをダウンロードします。

f:id:akiyoko:20140609072309p:plain

WordPressのダッシュボードの [プラグイン] -> [新規追加] から、zipファイルをアップロードして追加します。

f:id:akiyoko:20140609072316p:plain

f:id:akiyoko:20140609072324p:plain

f:id:akiyoko:20140609072329p:plain


8) StaticPress 設定

以下のように StaticPress の設定をして、「変更を保存」をクリックします。

静的サイト URL WordPressが動作しているURLではなく、S3で公開するFQDNを指定。例えば「http://www.akiyoko.info/」など
出力先ディレクトリ (ドキュメントルート) デフォルトの「/srv/wordpress/」ままだと、wp-admin, wp-content, wp-includes などが出力されないので、「/srv/wordpress/static/」などとする

f:id:akiyoko:20140609072340p:plain


次に、StaticPress S3 Option の設定をして、一旦「変更を保存」をクリックします。

AWS Access Key 1) で作成した Access Key
AWS Secret Key 1) で作成した Secret Key
AWS Region 「Tokyo」の場合は「AP_NORTHWEST_1」

f:id:akiyoko:20140609072349p:plain

「S3 Bucket」を選択して、再度「変更を保存」します。

f:id:akiyoko:20140609072356p:plain


9) 再構築してみる

[StaticPress] -> [StaticPress] から「再構築」ボタンをクリックすると、
/srv/wordpress/static/ 以下にファイルを保存すると同時に、S3へもアップロードされます。

f:id:akiyoko:20140609072404p:plain

f:id:akiyoko:20140609072410p:plain

$ ls -al /srv/wordpress/static/
total 72
drwxr-xr-x 11 wordpress wordpress  4096 Jun  8 04:47 .
drwxr-xr-x  7 wordpress wordpress  4096 Jun  8 04:45 ..
drwxr-xr-x  3 wordpress wordpress  4096 Jun  8 04:46 2014
-rw-r--r--  1 wordpress wordpress  6393 Jun  8 04:47 404.html
drwxr-xr-x  3 wordpress wordpress  4096 Jun  8 04:46 author
drwxr-xr-x  3 wordpress wordpress  4096 Jun  8 04:46 category
drwxr-xr-x  3 wordpress wordpress  4096 Jun  8 04:46 comments
drwxr-xr-x  2 wordpress wordpress  4096 Jun  8 04:46 feed
-rw-r--r--  1 wordpress wordpress 10713 Jun  8 04:45 hello-world.html
-rw-r--r--  1 wordpress wordpress  6941 Jun  8 04:45 index.html
drwxr-xr-x  2 wordpress wordpress  4096 Jun  8 04:45 sample-page
drwxr-xr-x  5 wordpress wordpress  4096 Jun  8 04:45 wp-admin
drwxr-xr-x  4 wordpress wordpress  4096 Jun  8 04:46 wp-content
drwxr-xr-x  7 wordpress wordpress  4096 Jun  8 04:46 wp-includes


S3 にもアップロードされているようです。

f:id:akiyoko:20140611000831p:plain


なお、2回目以降の再構築では、/srv/wordpress/static/ からの差分しかフェッチ(S3へのアップロードも)しないので、最初からやり直したいときは、一旦 /srv/wordpress/static/ 以下と S3のバケットにアップロードされたファイルを全てを削除してください。



 

10) 確認してみる

http://www.akiyoko.info/
にアクセスするも、CSSが崩れています。。

f:id:akiyoko:20140609072431p:plain



 

11) S3 の Metadata を変更

S3 にアップロードした CSSファイルの Content-Type がおかしくなってしまっているのが原因のようなので、変更していきます。

wp-content/themes/twentyfourteen/style.css
の Content-Type を「text/x-c」から「text/css」に変更します。

f:id:akiyoko:20140611001047p:plain

他にも、

  • wp-content/themes/twentyfourteen/rtl.css
  • wp-content/themes/twentyfourteen/css/editor-style.css
  • wp-content/themes/twentyfourteen/css/ie.css

という CSSファイルがあるのですが、念のためこちらも変更しておきます。



 

13) 再度、確認

f:id:akiyoko:20140611001132p:plain

OKでした。



あと最後に大切なことですが、以上の手順で激安ホスティングができるのは間違いないのですが、1ヶ月10円かどうかは保証できません。各自でお試しくださいませ。