ふるさとチョイスのサーバー構成の変遷

トラストバンクの高橋と申します。 ふるさとチョイスのサービスが立ち上がってからもうすぐ10年。 最初は小さかったサービスが現在に至るまでのサーバー構成の変遷についてまとめてみます。 それほど革新的な内容のないごくごく平凡な構成ではありますが、 これからサービスを立ち上げる方成長途中のサービスを運用している方の参考に少しでもなれば幸いです!

なお、セキュリティ関連については、勿論、IDS/IPS、WAF、DBFWなど色々導入しておりますが、ここでは具体的な内容は伏せさせていただきます。

2012~2013年 サービス立ち上げ期

ふるさとチョイスのキャプチャー (2013年)
ふるさとチョイス (2013年)

サービス立ち上げから間もない時期のトップページです。当初は以下の様なシンプルな構成でした。

f:id:trustbank-developers:20220217235800p:plain
サーバー構成図 (2012年)

サーバーは格安のレンタルサーバー1台で、Cloudflare のフリープランのCDNを通していました。 当初はふるさとチョイス上で寄付を受け付けるという発想は無く、自治体様の寄付金の使い道やお礼の品を紹介するだけのサイトでしたので動的な要素はほぼ無く、WordPress で十分成り立っていました。

2013~2014年 寄付受付開始、絞り込み検索導入

ふるさとチョイスのキャプチャー (2014年)
ふるさとチョイス (2014年)

サービス立ち上げ2年後のトップページです。このときには既に多くの自治体様の寄付を受け付ける仕組みができあがっていました。 他、カテゴリーなどでの絞り込み機能が追加され、ログイン・マイページ機能もできあがりました。 GCF (ガバメントクラウドファンディング)も2013年から始まり、2014年末には長野県白馬村様で最初の災害支援受付が開始されました

このときは以下のようなサーバー構成でした。

f:id:trustbank-developers:20220218003857p:plain
サーバー構成図 (2014年)

さすがにレンタルサーバは厳しくなり、クラウド利用に移行しました。

WebサーバーとDBサーバーは分離されておらずに相乗りしており、各Webサーバーは読み込み時はローカルのDBを参照し、書き込み時はマスターサーバーのDBを参照していました。 ロードバランサーなどは特に用意せず、CloudflareのDNS機能を使って各サーバーに振り分け、Webサーバー間のファイルは lsyncd で同期していました。

大変シンプルな構成ではありますが、それ故にスケールアウト対応も単純。ひたすらWebサーバーをコピーして増やし、Cloudflareで紐付けるだけでした。 今でこそふるさと納税は一般に浸透していますが、当時はまだ知る人ぞ知る仕組み、という感があり、ふるさとチョイスがテレビなどで取り上げられるとアクセスが急増し、その際は何名かで手分けしてひたすらサーバーをコピーする作業をしていました。(オートスケーリングなどの仕組みはありませんでした)

とあるテレビ番組で取り上げられた際は約100台を一時的に並列に並べました。本来、100台も必要になるようなアクセス数ではありませんでしたが、当時はまだ WordPress 上でサービスを開発しており、これが大変重かったため1台で捌けるアクセス数がかなり少なかったです。このときに1台で捌ける量を増やすため、外部のエンジニア様のご支援により Apache から nginx に移行し、nginxのページキャッシュ機能を使うことで、捌ける量が大幅にアップしました。

当時はソース管理には Subversion を使っておりました。(後に 自前GitGitHub と変遷)

2015~2017年 円熟期

ふるさとチョイスのキャプチャー (2017年)
ふるさとチョイス (2017年)

2015年2月に累計寄付件数が100万件を突破してから一気にふるさと納税の利用が拡大し、競合他社様のサービスも次々に立ち上がっていきました。2015年12月には月間1億ページビュー数を超え、 翌2016年6月には、契約自治体数が1,000自治体を超えました (全国1,788自治体中)。

そんな最中でのサーバー構成です。

f:id:trustbank-developers:20220218022411p:plain
サーバー構成図 (2016年)

より堅牢性を高めるため、データベースサーバー用にクラウドとは別に専用サーバーを購入してリモートハウジングし、クラウドサーバー用のネットワークとブリッジ接続する構成を取りました。 また、2015年まではお礼の品のフリーワード検索ができませんでしたが、 Apache Solr を使って検索サーバーを立て、検索ができる仕組みを整えました。

お礼の品の数が大幅に増加し、画像の容量が逼迫してきたので、画像専用のサーバーを別途立てました。画像のアクセスはほとんどCDNが捌いてくれるので、月間1億ページビュー数の最中でも、Core数6のサーバー2台で余裕で捌くことができました。(それでもスカスカでした)

2015年の中頃より、Cloudflareのフリープランから一気にエンタープライズプランに切り替えました。恐らく、日本の企業の中ではかなり早いプラン導入事例だったと思われます。(当時は日本語の窓口も無くお打ち合わせも英語のみでした…)

そして相変わらず WordPress を導入していましたが、これが原因でパフォーマンス上のネックがあったり、開発効率にも大きな支障があったため、徐々に FuelPHPフレームワークを使った実装に置き換えていきました。 当時は PHP界隈において、ここまで Laravel 一強時代になることを予期することができず、今思うと選択を誤ったな…、と感じております。(ただ、フレームワークの根本の考え方はそれほど変わらないです)

また、当時は NoSQL の有用性を理解しきれておらず、Key-Valueストア の代わりとして、もっぱらPHPAPC を用いていました。 ( memcached など色々試してみたものの、満足するレベルではなく、たとえサーバーごとに個別にキャッシュを持つことになったとしてもAPCの方が圧倒的に速く感じた)

ふるさと納税サイトは年末に駆け込み需要があり、大幅にアクセス・寄付が伸びますが、クラウドサーバー上で相乗りによるティーが発生しないように、1台あたりモリー224GB確保するという荒業をとることもありました。(当時は224GB確保すると相乗りされることがなかった)

2018年 ふるさとチョイス全面リニューアル

ふるさとチョイスのキャプチャー (2018年)
ふるさとチョイス (2018年)

2018年3月にふるさとチョイスを全面的にリニューアルしました。 WordPress を完全にやめ、全て FuelPHP で書き直しました。 そして、サーバーインフラ専門の会社様と相談しながらサーバー構成も大幅に見直しております。

f:id:trustbank-developers:20220218032316p:plain
サーバー構成図 (2018年)

今まで、Webサーバー上にDBなど色々なものが相乗りしていましたが、 Webサーバー (nginx)APサーバー (PHP)DBサーバー (MySQL) の3層に分け、各層間はソフトウェアロードバランサーで繋ぎました。 これにより細かいスペック調整が可能になったのと、CPUやメモリーを効率良く使えるようになり、異常発生時の切り分けもしやすくなりました。反面サーバー構成が複雑になったために、異常発生時の緊急対応が知見のある者でないと行えなくなってしまいました。 3層に分けてみて分かったこととしては、Webサーバーはほとんどスペックや台数は必要ありませんでした。APサーバーやDBサーバーはボトルネックになることがかなり多いようです。

また、自治体様が LGWAN ネットワーク上からふるさとチョイスの管理が行えるよう、 J-LIS に申請して LGWANネットワークに参加しました。 DBはインターネットとLGWANの真ん中に配置し、LGWANネットワークからは LGWAN WebサーバーFirewallLGWAN APサーバーFirewall と、2つのFirewallを挟んでつながるようにしております。

2022年~ インフラ改革

ふるさとチョイスのキャプチャー (2022年)
ふるさとチョイス (2022年)

今までトラストバンクはインフラ専任エンジニアがおらず、開発と兼務していましたが、ようやく念願のインフラに特化したエンジニアが合流し、色々な改革に着手しています。 AWSを利用した動的なスケーリングマイクロサービス化デプロイの仕組みの見直しLaravelへの切り替え、その他大小様々な対応の検討が進んでおります。

おわりに

トラストバンクにご興味をお持ちいただけましたら、是非以下の募集ページをご覧ください。様々な職種で絶賛募集中です。

www.wantedly.com

AWS EFSを使ったWordPressシステムをProduction Readyにするまでの道のり

トラストバンクふるさとチョイス事業本部SREの香西(かさい)です。

先月末に「読むふるさとチョイス」というオウンドメディアをリリースしました!

prtimes.jp

本記事ではこのオウンドメディアをEC2+EFS+RDS+ElastiCacheでAutoScalingなWordPressシステムとして構築したので、このシステムをProduction Ready*1にしていくまでの道のりをご紹介したいと思います!

要件

まず要件ですが、今回開発を外部制作会社へ発注していたこともあり、以下のような制約がありました。

デプロイをWordPressプラグインで行い、SFTP経由でのファイル更新するという要件があることで、Gitでソースを管理してCI/CDでデプロイ、ということが難しくなってしまい、プロジェクトから冗長構成でスケールできるようにしてほしいという要件も出てきました。

WordPressは基本的に冗長構成を考慮したアーキテクチャになっていないので冗長化するの大変なんですよね。。。

マスターサーバーを別にしてlsyncdで同期するとか、共有が必要なディレクトリをNFS上に置いたり、画像データをS3に置いたりと色々なやり方はあるもののベストプラクティス的なものは存在せず、デプロイでも悩むことになることも多く、WordPressをスケーラブルでイケてるシステムにするために涙ぐましい努力をしているエンジニア諸氏の屍の上に我々は立っていると言っても過言ではないのです。(過言やろ)

今回はデプロイ部分については制約があり、あまり工夫が出来ないので、どのようにデプロイ要件を満たしつつスケーラブルなインフラにしていけるかを考えていこうと思います。

システム構成

デプロイ

EFS+TransferFamilyの組み合わせで前述のデプロイはWordPressプラグインで行う&SFTP経由でファイルの更新ができるという要件をクリアしていきたいと思います。

Amazon Elastic File System (EFS)AWSが提供するフルマネージドなNFSストレージです。

WordPressプラグインでのデプロイをする&SFTP経由でもファイルを更新したいという要件があるので、EFSを使ってどのサーバーからのアクセスして、プラグイン経由でのデプロイをしても問題ないようにします。

ちなみにEFSでスループットモードをバーストモードにしている場合、クレジットが尽きるぐらいのスループットがあると完全に死ぬことになるのでご注意ください。

そして、クレジット枯渇を回避するためにプロビジョニングモードにするととてもお高いのご注意ください・・・(ツライ

AWS Transfer FamilyAWSが提供するSFTP、FTPS、FTP プロトコルを使用してS3やEFSとデータ転送できるようにするフルマネージドサービスです。

今回のSFTP経由でファイル更新の要件をこのTransferFamilyで実装していきます。

可用性&冗長性

次に、ALB+EC2+AutoScaling+RDSで冗長構成でスケールできるの要件をクリアしていきます。

また、RDS部分のスケールにはWordPressプラグインであるHyperDBを利用します。

ja.wordpress.org

これでWordPressのプログラムファイル群をすべてEFS上に置いて、各EC2サーバーからNFSマウントする形にし、スケールしてどのサーバーにアクセスしても問題がないようになりました。

構成図

全体のシステム構成は図としてはこんな感じになります。

システム構成

しかし、このままではとても遅くて使い物にならないので様々なキャッシュ機構を活用してスピードアップを図っていきます。  

キャッシュ戦略

というわけで以下キャッシュ機構を導入していきます。

  • PHP(OPcache)
  • Redis(ElastiCache)
  • CDN(Cloudflare)

PHP (OPcache)

PHP処理の高速化を実現する代表的な方法の一つにバイトコード(オペコード)をキャッシュする、所謂PHPアクセラレータを利用する方法があり、 そのPHPアクセラレータ機能を提供するのがOPcacheです。

OPcacheの導入方法は環境毎に異なるので割愛しますが、以下のようにopcache.enable => On => OnとなっていればOPcacheは有効になっています。

$ php -i | grep opcache
Additional .ini files parsed => /etc/php.d/10-opcache.ini,
opcache.blacklist_filename => /etc/php.d/opcache*.blacklist => /etc/php.d/opcache*.blacklist
opcache.consistency_checks => 0 => 0
opcache.dups_fix => Off => Off
opcache.enable => On => On
opcache.enable_cli => On => On
opcache.enable_file_override => Off => Off
opcache.error_log => no value => no value
opcache.file_cache => no value => no value
opcache.file_cache_consistency_checks => On => On
opcache.file_cache_only => Off => Off
opcache.file_update_protection => 2 => 2
opcache.force_restart_timeout => 180 => 180
opcache.huge_code_pages => Off => Off
opcache.interned_strings_buffer => 8 => 8
opcache.lockfile_path => /tmp => /tmp
opcache.log_verbosity_level => 1 => 1
opcache.max_accelerated_files => 10000 => 10000
opcache.max_file_size => 0 => 0
opcache.max_wasted_percentage => 5 => 5
opcache.memory_consumption => 128 => 128
opcache.opt_debug_level => 0 => 0
opcache.optimization_level => 0x7FFEBFFF => 0x7FFEBFFF
opcache.preferred_memory_model => no value => no value
opcache.preload => no value => no value
opcache.preload_user => no value => no value
opcache.protect_memory => Off => Off
opcache.restrict_api => no value => no value
opcache.revalidate_freq => 2 => 2
opcache.revalidate_path => Off => Off
opcache.save_comments => On => On
opcache.use_cwd => On => On
opcache.validate_permission => Off => Off
opcache.validate_root => Off => Off
opcache.validate_timestamps => On => On

細かいチューニングは環境毎に異なるため割愛しますが、一般的に推奨される設定について興味がある方は以下を参考にしてみてください。 まぁ、ほぼデフォルトで推奨設定になっていますがw

www.php.net

Redis(ElastiCache)

オブジェクトキャッシュとPHPセッションの保存先にRedisを利用するため、ElastiCacheでRedisを構築します。

オブジェクトキャッシュ

オブジェクトキャッシュには以下のWordPressプラグインを利用します。

ja.wordpress.org

このプラグインを利用することによりWordPressのオブジェクトキャッシュにより生成された値をキャッシュすることができ、同じオブジェクトに対して2回クエリを実行せずに、キャッシュされたオブジェクトを再利用できるので、DBの負荷を軽減し、ウェブサイトの応答時間を短縮させることができます。

設定としてはwp-config.phpに以下のようにエンドポイントを指定してあげるだけです。

define('WP_REDIS_HOST', '{Redisエンドポイント}');
define('WP_REDIS_MAXTTL', 3600);

PHPセッション

AutoScaling環境となるため、PHPセッションをRedisに保存&共有できるようにして可能性を高めたいのでphp-redisを利用します。

github.com

インストール方法については各環境毎に異なるため割愛しますが、基本的な設定としてはphp.iniに以下設定を入れるだけです。

session.save_handler = redis
session.save_path = "tcp://{Redisエンドポイント}:6379"

CDN(Cloudflare)

最後に弊社ではCDNにCloudflareを利用しているのでCloudflareのチューニングをしていきます。

キャッシュレベルはスタンダードのまま、以下の機能を有効化しました。

機能 概要
Mirage 画像の読み込みを高速化
Polish 画像のメタデータ除去&最適化によりダウンロード速度を改善させる
Rocket Loader Time to First Paint (TTFP)、Time to First Contentful Paint (TTFCP)、Time to First Meaningful Paint (TTFMP)、Document Loadのパフォーマンス向上
Auto Minify HTML/CSS/JavaScriptのサイズ縮小による転送量削減

詳細な説明は公式に委ねますが、基本的には上記設定を有効化するチューニングのみを実施しました。

Lighthouseの結果

前述のキャッシュ関連の設定を実装した状態でのLighthouseの結果は以下のようになりました。

Lighthouse結果

サーバーの台数を増やすことでスループットが伸びることも確認できたのでこれでProduction ReadyなWordPressシステムと言えるようになったのではないでしょうか!???

おわりに

今回EFSを使ったWordPressシステムを構築してみて、EFSはWordPressで冗長構成を取りたい場合には中々良い選択肢になり得るのかなと思いました。

以前は遅くて使いにくいイメージがありましたが、読み取りスループットが3倍になるアップデートもありCDNありきではありますが、Production ReadyなWordPressシステムのアーキテクチャの選択肢としては悪くないのではと現在は思っております。

aws.amazon.com

そしてまた大きなアップデートがあったのでこれはもうEFSっきゃないっしょという状況ですね。

www.itmedia.co.jp

本記事がProduction ReadyなWordPressシステム構築に挑戦しているエンジニア諸氏の参考になってくれると嬉しいです。

そんな弊社トラストバンクでは様々な職種で絶賛採用中なので気になった方は是非お気軽にご連絡くださいー!

www.wantedly.com

*1:Production Readyとは、サービスが本番トラフィックを任せられるほどの信頼性がある状態、その状態にするための考え方

テックブログはじめました。

はじめまして、トラストバンクのふるさとチョイス事業本部でSREテックリードをしている香西(カサイ)です。

この度、トラストバンクのサービス開発に携わるメンバーで技術や開発組織、カルチャーをお伝えするべくテックブログを開設することになりました🎉

記念すべき一本目となる本記事では以下について書いていきたいと思います!

トラストバンクについて

トラストバンクは「自立した持続可能な地域をつくる」というビジョンのもとに地域を元気にするためのさまざまな事業・サービスを展開しております。

代表的なサービスとしてはふるさとチョイスというふるさと納税サイトがあります。

www.furusato-tax.jp

その他にもICT技術による自治体業務の生産性向上を促すための自治体支援事業としてLoGoシリーズがあります。 サービスの詳細についてはパブリテック事業部が運営するオウンドメディアがあるので是非ご覧ください。

publitech.fun

また、実現したい事業や施策に合わせ、地域独自の地域通貨を設計できるプラットフォームサービスであるchiica

chiica.jp

地域内でつくられた住宅用太陽発電設備の卒FIT電力を、地域へ寄付できるプラットフォームサービスであるえねちょなど

www.energy-choice.jp

前述の通り、さまざまな事業、サービスを展開している会社となります。

なぜテックブログをはじめるのか

なぜテックブログをはじめるのか?ということですが、前述の通りトラストバンクは「自立した持続可能な地域をつくる」というビジョンのもとさまざな事業を展開している会社となります。

このビジョンを達成し続けるためのコアとなるのがICTのため、エンジニア組織の強化・拡大が急務となっており、以下の狙いのもとテックブログの発足を検討し、開設に至りました。

  • 社内外への情報発信
  • 外部への情報発信によるブランディング
  • アウトプットの習慣化

また、いままでトラストバンクの開発組織では社内外へのアウトプットをする文化、機会がほとんどなかったのですが、昨年ぐらいからTGIFを開催するようになったり、

qiita.com

アドベントカレンダーをやってみたりと少しづつ社内外へのアウトプットをする機会が作られる様になってきました。

qiita.com

しかし、継続的にアウトプットを行うための仕組みや場がなく、せっかくアウトプットの機運も高まり、令和も4年になったことだしこの良い流れを断つわけにはいかない!そうだ!テックブログを開設しよう!ということで企業のテックブログといえばはてなブログだろうという安易な判断で開設に至る、という感じでございます。

どんなことを書いていくのか

このブログでは特にジャンルを限定することなく、トラストバンクのサービス・事業開発に関わるメンバーが色々なことを書いてくれるようになるとよいなぁと思っていますが、主に以下のようなことを書いてもらえるとよいなぁと考えております。

  • 組織や採用、カルチャーについて
  • トラストバンクで採用している技術や興味のある技術分野について
  • 開発手法(TDD, DDD, スクラム等)について
  • 登壇、勉強会について

他にも色々とあると思いますが、なにより書いてくれる人を増やして持続的にアウトプットされていくことが大事かと思うのでそのあたりも啓蒙していけるように頑張っていきたいなぁ、と思っています。

誰が書くのか

このブログの筆者はエンジニアに限定しない想定です。

プロダクト開発、サービス開発、技術、組織に関するテーマであればこのテックブログでどんどん発信できればと思っているので、デザイナーやディレクターはたまたコーポレートなども巻き込んでこのテックブログを育てていけると良いなぁと思っています。

みんな書いてくれ〜!!

おわりに

そんなこんなでこれからトラストバンクテックブログでさまざまな情報発信をさせていただきたいと思っていますのでよろしくお願いしますー!

そんなトラストバンクでは色々な職種で絶賛採用中なので気になった方は是非お気軽にご連絡くださいー!

www.wantedly.com