StaticPress-S3でWordPressをS3に連携

最近はサーバレスがトレンドなのでトレンド乗ってみたいのと
某社の方々がWordPressを信奉していて、数百万PV目指してるくせに
WordPressとは片腹いたいわと思いながら、少し実験してみました。

はっきり言って某社の方々を笑う資格があるほど僕はスキルありませんが
まぁ、これができればかなり運用コスト低減につながりますな。
とりあえず先人の方々の苦労の上に作業したので備忘録がてら残します。
あまり参考にはならないかも、、、、、
ここで全体の流れはまとまっています。

構成としては以下の通り
●コンテンツアップ
　LightSailのWordPressサーバ→S3
●外部からの接続
　CloudFront→S3

httpsを使いたいのでCloudFront使っています。
前回の作業で既にCloudFrontとS3の構築完了済みの前提です。


1.VPC構築
　https://qiita.com/shizuma/items/396ad15ff574717dfa1d
https://docs.aws.amazon.com/ja_jp/AmazonVPC/latest/UserGuide/VPC_Appendix_NACLs.html
　(1)VPCのデフォルトセキュリティグループの設定変更
　　[セキュリティ]→[セキュリティグループ]
　　インバウンド　http、https、DNS、SSHを許可
　※上記作業は不要だったかも、、、

2.LightSailでWordPressを構築する
　固定IPで構築しましたがStaticPressで再構築する際に
　対応してくれるみたいなので固定IPのままで問題なし
　https://qiita.com/taru2/items/ecd3fc4ee567dee937f1
　https://qiita.com/foursue/items/8e685b52cfddf05875ee
　https://qiita.com/na0AaooQ/items/781b3823b79fd3b747a3
  (1)SSHキーのダウンロード
 　・ホスト名のリンクをクリックするとキーをダウンロードできる
　　http://ryoichi0102.hatenablog.com/entry/2017/01/30/224337
　　https://lightsail.aws.amazon.com/ls/webapp/account/keys
 　・SSHでホストに接続
　　 鍵指定を忘れずに
　(2)WordPressのパスワード取得

    $ cat bitnami_application_password

　(3)Bitnamiのロゴ削除

    $ sudo /opt/bitnami/apps/wordpress/bnconfig --disable_banner 1

    $ sudo /opt/bitnami/ctlscript.sh restart apache

　(4)Gitインストール

　　$ sudo apt-get install git

3.WordPress設定
　http://xn--hostgator--tx4i9cssv854df9de53p.com/wordpress-japanese/
　(1)日本語化する
　(2)最新版に更新する。


4.Basic認証設定
　外部から見られるとまずいのでBasic認証をかける
　http://www.webdesignleaves.com/wp/wordpress/232/
　
　(1).htpasswordファイル作成
　　Basic認証を準備
　　http://www.luft.co.jp/cgi/htpasswd.php
      https://qiita.com/yamamotoshu1127/items/d72aa5d8786fe19f26ff
　　https://qiita.com/shell/items/5606d37a802e39479036
      http://www.terasol.co.jp/wordpress/585

   $ htpasswd -c -b /opt/bitnami/apache2/conf/.htpasswd ID パスワード

  (2)Apache設定
　　ディレクトリ構成が少し違うので注意

    $ sudo vi  /opt/bitnami/apps/wordpress/conf/htaccess.conf

    以下を追記

 ＜directory apps="" bitnami="" htdocs="" opt="" wordpress=""＞
  AuthUserFile /opt/bitnami/apache2/conf/.htpasswd
  AuthName "Please enter your ID and password"
  AuthType Basic
  require valid-user
 ＜/directory＞

5.wordPress設定
　(1)プラグイン類のインストール
  　StaticPress等、必要なプラグイン導入
　(2)Staticpress-s3導入

   $ cd /home/bitnami/apps/wordpress/htdocs/wp-content/plugins
   $ sudo git clone https://github.com/megumiteam/staticpress-s3.git
   $ sudo chown -R bitnami:daemon staticpress-s3

  https://qiita.com/Ichiro_Tsuji/items/c6a52ec0ee95ead42f68
  http://webfood.info/staticpress-s3/
  ほとんど上記のまま

　(3)画像くずれ等対策

　  $ cd /opt/bitnami/apps/wordpress/htdocs/wp-content/plugins/staticpress/includes/
    $ sudo cp class-static_press.php class-static_press.php.org
    $ sudo vim class-static_press.php

--- if (is_wp_error($permalink)) continue; --- の後に以下を追加

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

  (4)Basic認証対策
       同じファイルを編集

 static public function basic_auth(){
   //return get_option(self::OPTION_STATIC_BASIC, false);
               return "ID,パスワードエンコードした文字";
 }

  (5)連携不要ファイル除外
　　class-static_press.phpファイルを編集

  $ sudo vim class-static_press.php

      以下の通り修正

               $urls = array();
                $urls = array_merge($urls, $this->front_page_url());
                $urls = array_merge($urls, $this->single_url());
                $urls = array_merge($urls, $this->terms_url());
                //$urls = array_merge($urls, $this->author_url()); ←コメントアウト
                $urls = array_merge($urls, $this->static_files_url());
                $urls = array_merge($urls, $this->seo_url());
                return $urls;

　plugin.phpファイルを編集

  $ cd ../
  $ sudo vi plugin.php

  以下の通り修正

  $ cd ../
  $ sudo vi plugin.php

以下の通り修正

 add_action('StaticPress::file_put', 'static_rm', 1);
 function static_rm($file_dest, $url){
     if(strstr($file_dest, '/author/')
     or strstr($file_dest, '/wp-content/plugins/')
     or strstr($file_dest, '/wp-json/index.html')
     or strstr($file_dest, '/wp-includes')
     or strstr($file_dest, '/wp-admin/')){
                 unlink($file_dest);
   }
 }
 add_action('StaticPress::file_put', 'replace_url_of_feed', 2);
 function replace_url_of_feed($file_dest, $url){
   if(strstr($file_dest, '/feed/index.html')){
                 $buff = file_get_contents($file_dest);
                 $replace = substr(static_press_admin::static_url(), 0, -1);
                 $content = str_replace(home_url(),$replace,$buff);
                 file_put_contents($file_dest, $content);
         }
 }

6.IAM設定
　https://www.slideshare.net/tfurusato/20170204-wrodbench-staticpresss3
　(1)S3設定
　　IAMでS3書込用ユーザ追加　S3FullAccessにて設定
  (2)CloudFrontエンドポイント設定
　　http://blog.serverworks.co.jp/tech/2015/08/31/vpc-endpoint/
　　S3のURLを直接指定とする


7.トップページ以外で403対策
　http://www.diamond-booth.com/20150722/staticpress-s3/
　https://qiita.com/bakira/items/f00d14c7489ca72e1c33
　https://qiita.com/kkanamori@github/items/a63b69e67bd08b6027b8
　https://blog.bgbgbg.net/archives/4163
　http://ryoichi0102.hatenablog.com/entry/aws-s3-https-cloudfront-acm
　https://ja.seo.jxyz.info/wordpress-convert-to-html-site/
　http://ippatsuman.net/2477.html
　https://qiita.com/naoiwata/items/3c6626cbeacbb44d4aa8
　トップページ以外で403となる事象発生
  ここで結構はまった。CloudFrontのキャッシュ時間は調整した方がいい
　(1)解決策
　　S3のStatic website hostingは有効にしておく
　　CloudFrontのoriginに上記のS3のエンドポイント設定する。

まぁ細々とした作業が多いのとキャッシュが効きすぎているので
時間がかかったりと色々とトラブルはあるものの、一度順調に動けば
比較的、楽にコンテンツ更新ができそうです。
ただし、更新ファイル数が多いとこんなトラブルもあるようです。
せいぜい数百ファイルレベルまでの中規模サイト程度が限界かな。
相変わらずまとまりない記事でした。