search
LoginSignup
113
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

Organization

WordPress + StaticPress S3で静的WebサイトをS3でホストする

概要

何ができるのか

wp-s3.png

  • WordPressの「StaticPress S3」プラグインを使うことで、WordPressサイトの静的コンテンツをAmazon S3でWebホスティングすることができます
  • WordPressは静的コンテンツを吐き出すだけなので、サーバスペックは最低限でOKです
  • イベントサイトなどの永代供養に最適です
  • メールフォームなどPOSTを伴うコンテンツやGetによる検索クエリは利用できません。CloudFrontを利用しましょう
    WordPressサイトをCloudFrontで配信する

<参考>JAWS-UG京都 第5回勉強会登壇スライド
ヤフー砲も怖くない!? WordPressとS3で落ちない コーポレートサイトを立ち上げよう

前提条件

  • WordPressのインストールが完了していること。本手順は、AMIMOTO AMI(Apache HTTPD PHP7)の環境が前提となっていますので、他の環境では期待通りの動作をしない可能性があります
    http://qiita.com/Ichiro_Tsuji/items/88f9009f80f3439ad9fa
  • WordPressサーバにSSHでアクセスできること
  • S3のバケットがWeb公開できる状態になっており、APIアクセス用のKeyが取得できていること
    http://qiita.com/Ichiro_Tsuji/items/c174d580587a622d3358
  • 手順中に登場するFQDN(サイトのURL)は下記の通りです。ご自分の環境に合わせて読み替えて下さい
Wordpressサイト    -> wp.jaws-ug.tk
S3バケットのWeb公開 -> s3.jaws-ug.tk
  • 独自ドメインをもっていない場合は下記の通り読み替えて下さい
Wordpressサイト    -> WordPressサーバのPublic DNS
S3バケットのWeb公開 -> S3バケットのEndpoint

プラグインをインストールする

StaticPress S3プラグイン

  • WordPressサーバにSSHでアクセスし、下記コマンドを実行する
    ※ SSH接続できない場合はこちら
    i-xxxxxxxxは、AMIMOTO AMIインストール時に指定したインスタンスID。i-まで入力してTabキーで補完してもよい
$ cd /var/www/vhosts/i-xxxxxxxx/wp-content/plugins
$ sudo git clone https://github.com/megumiteam/staticpress-s3.git
$ sudo chown -R nginx:nginx staticpress-s3

StaticPressプラグイン

  • WordPressダッシュボードを開く
  • [プラグイン] -> [新規追加]
  • 「staticpress」で検索し、[今すぐインストール]をクリックする スクリーンショット 2016-02-07 13.43.27.png

プラグインの有効化/停止

  • [プラグイン]をクリックする
  • Nginx Cache Controllerの[停止]をクリックする
  • StaticPressの[有効化]をクリックする
  • StaticPress S3の[有効化]をクリックする スクリーンショット 2020-05-26 18.11.50.png

各種設定

設定中のwp.jaws-ug.tkは、自分のWordPressサイトアドレスに読み替えてください。

リバースプロキシキャッシュの削除

  • WordPressサーバにSSHでアクセスし、下記コマンドを実行する
$ sudo rm -rf /var/cache/nginx/proxy_cache

コード修正

  • WordPressサーバにSSHでアクセスする

class-S3_helper.phpの修正

$magic_fileのパスをAMIMOTO環境に合わせて修正します。
i-xxxxxxxxは、AMIMOTO AMIインストール時に指定したインスタンスID。i-まで入力してTabキーで補完してもよい

$ cd /var/www/vhosts/i-xxxxxxxx/wp-content/plugins/staticpress-s3/includes
$ sudo cp class-S3_helper.php class-S3_helper.php.org
$ sudo vim class-S3_helper.php
class-S3_helper.php
/*188行目あたり
$magic_file = '/usr/share/misc/magic'; 
をコメントアウトまたは削除し、追記する*/

$magic_file = '/usr/share/percona-server/magic';

class-static_press.phpの修正

画像つきの投稿を新規作成するとうまく動かない事象への対処です。

$ cd /var/www/vhosts/i-xxxxxxxx/wp-content/plugins/staticpress/includes
$ sudo cp class-static_press.php class-static_press.php.org
$ sudo vim class-static_press.php
class-static_press.php
/*730行目あたり
                        if (is_wp_error($permalink))
                                continue;
の後に追記する*/

if (preg_match('/.*\.html\/.*/', $permalink, $m)) {
                                continue;
}

パーマリンクの設定

  • [設定] -> [パーマリンク設定]
  • カスタム構造を選択し、/%postname%.htmlを入力する
  • [変更を保存]をクリックする スクリーンショット 2016-02-07 15.43.53.png

StaticPress S3の設定

  • StaticPress設定を開く
  • 静的サイトURLにS3バケットのWeb公開URL(独自ドメインをもっていない場合は、S3バケットのEndpoint)を入力する
  • 出力先ディレクトリの最後尾にstatic/を追加する
  • [設定を保存]をクリックする StaticPress 設定 ‹ カレーは最強の飲み物 — WordPress 2016-07-15 22-14-44.png

  • S3バケットのIAM Access Keyを入力し、リージョンを選択する
    ※ 東京リージョンはAP_NORTHEAST_1
  • [変更を保存]をクリックする スクリーンショット 2016-02-07 14.54.24.png

  • S3 Bucketが選択できるようになっているので、同期先のバケットを選択する スクリーンショット 2016-02-07 14.56.30.png

  • [変更を保存]をクリックする

記事を投稿する

管理画面から新規記事を投稿します。写真入りの記事が望ましいです。

コンテンツを同期する

  • [StaticPress] -> [再構築]
    スクリーンショット 2016-02-07 15.39.19.png

  • [終了]と表示されたら同期完了 スクリーンショット 2016-02-07 15.42.23.png

■「エラー!」と表示された場合のトラブルシューティング
・class-S3_helper.phpの修正部分を見直す
・StaticPress S3の設定を見直す
・S3バケットのIAM Access Keyを作りなおす
・サーバのstaticディレクトリを削除する(次項参照)
  • S3バケットのWeb公開URLにアクセスしてブログサイトが表示されることを確認する スクリーンショット 2016-07-15 22.28.36.png

コンテンツを更新する

記事の投稿など、コンテンツを更新した際は都度「再構築」を実行する必要があります。
ただし、テーマの変更など大きくコンテンツが変更された場合など、同期がうまくいかず「エラー!」と表示されることがあります。
その時は、下記コマンドでサーバのstaticディレクトリを削除してから「再構築」を実行してみましょう。
i-xxxxxxxxは、AMIMOTO AMIインストール時に指定したインスタンスID。i-まで入力してTabキーで補完してもよい

$ sudo rm -rf /var/www/vhosts/i-xxxxxxxx/static

WordPressサーバを停止してみよう

WoudPressサーバを停止してもS3バケットのWeb公開URLに正常にアクセスできれば、落ちないWebサイトの完成です!(ブラウザキャッシュの影響を排除するために別のブラウザを使って確認した方が良いでしょう) もし、画像等一部コンテンツが欠落するようなら、Webページのソースを調べて、オリジンの絶対パスの記述がないか確かめます。
※ EC2でElasticIPをアサインしていない場合、サーバ停止 -> 起動でグローバルIPが変わりますので注意して下さい。IPが変わってしまった場合は、DNSのレコードを修正する必要があります

サーバの停止

Elastic IP(固定IP)を設定していない場合はIPアドレスが変わります

  • AWS ConsoleでEC2を開く
  • 左ペインの[Instances]をクリックする
  • 停止するインスタンスの上で右クリック -> [Instance State] -> [Stop]
    ※ 起動する場合は[Instance State] -> [Start]
    スクリーンショット 2016-05-31 22.59.47.png

  • [Yes, Stop]をクリックする
    EC2 Management Console 2016-05-31 23-00-42.png

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
113
Help us understand the problem. What are the problem?