アニメイトラボ開発者ブログ

株式会社アニメイトラボの開発者ブログです


アニメイトラボ開発者ブログ

developer.animatelab.com


アニメイトタイムズのサーバー移管をしました

エンジニアのsugicyanです。
好きなAWSのサービスはCodeシリーズです。
アニメイトタイムズのサーバーをAWS環境に移管したので、挨拶をAWSっぽくしてみました。

www.animatetimes.com

サーバー移管自体は6/11(日)に実施したのですが、そこから安定稼働させるまでに1ヶ月くらいかかり、終わった後は燃え尽きたのかなかなか筆が進まずブログを書くのが遅くなってしまいました。

サーバー移管の際に個人的に意識したこと

旧環境ではインフラ面がブラックボックスで悩む事が多かったため、インフラ面の見える化を意識しました。
先に言ってしまうと技術面では、 Docker CloudFormation の採用によって多くの部分が可視化されました。
移管までの作業では気づきませんでしたが、終わったあと振り返ってみると技術検討時では考えていなかった部分でも良くなっている部分があり、やってよかったのと思いました。

新旧環境の違い

クラウド IDCF AWS
サーバー構成 シングル マルチ
OS CentOS 5 Debian 8 (jessie)
言語 php5.3 php5.6
メール postfix SendGrid
ファイルアップロード FTP 専用CMSの作成
画像配信 apache s3 + CloudFront

新環境で採用した主なAWSのサービス

  • ECS
  • CloudFormation
  • CodePipeline
  • CodeBuild
  • S3
  • CloudFront
  • ElastiCache(redis)
  • RDS(MySQL
  • ALB

移管理由

システム的な問題は、 CentOS 5 EOL php5.3 のサポート切れ です。
ですが、それ以上に シングルサーバー構成の限界 を感じていました。
障害が起きてもapacheの再起動などやれることがほとんどありません。
また、メンテナンスをしたくても全サービスを停止しなければならなくエンジニアだけでなく、ライターや編集者にも負担が大きかったです。

旧環境

f:id:sugicyan:20170810150254p:plain

1つの環境に以下5つのサーバーがそれぞれ prod dev 環境の2つを持っていて、計10サーバー動いていました。

  • pc
  • sp
  • mobile
  • licence
  • admin
  • admin(外部ライター用)

さらに

  • MySQL
  • 画像配信サーバー

も動いているような状態です。

新環境

f:id:sugicyan:20170810161448p:plain

今まで共存していたそれぞれのアプリケーションがスケールしやすい構成にしました。
管理画面も別サーバーに切り出したことでメンテナンス中も記事の作成/更新ができるようになっています。

移管中だからできること

システムの移管のための環境を構築しリリースするまでの間システムは止まってしまっても問題がないので、今まで手を付けられない下記項目を実施することができました。

  • 使われていないと思われていたデットコードを大幅に削除
  • 既存の放置されていたバグの改善

移管後に感じたこと

移管前はインフラ周りの設定などのドキュメントなどがなくブラックボックスでしたが、Docker・ CloudFormationの採用によりインフラ面が可視化された状態になりました。

  • Docker採用により dockerfile でインストールされているライブラリが明確になった
  • CloudFormationでインフラの可視化がされた
  • devやstgといった環境の複製が容易になった

ローカルで動作検証したいという理由でDockerを採用しました。
移管を終えてみると、ローカルで確認できるのも便利なのですが、それ以上にインストールされているライブラリが明確化されたのが大きいなと感じました。

逆にCloudFormationのテンプレートによるインフラの管理は良い点もあれば悪い点もあるなと感じるところもあります。
たとえば、セキュリティグループに許可するIPアドレスを1つ追加するにも5~10分程度掛かってしまいます。
ですが、そのデメリットを差し引いても、インフラのコード化をするということにはメリットが多いと感じ導入しています。
運用してみて感じることは、

  • 全てをCloudFormationで管理するよりは管理する範囲を適宜見直していくことが大切
  • 機能によっては DeletionPolicy: Retain の属性を付けて、CloudFormationで最初に構築して以降はCloudFormationの管理から外してあげることも必要
    • RedisやECSの管理周りは検証したりしていますが、まだベストな方法を見つけられていません

以上がレガシーな環境をAWS化する簡単な道のりでした。
アニメイトラボではこれからもアニメイトタイムズの改善を行い、よりよいメディアサイトを構築していくので、ご注目下さい。

NEW GAME!!のキャンペーンサイトにPWAを使ってみた

エンジニアのsugicyanです。

会社でNEW GAME!!楽しいですねって言ってたら、NEW GAME!!の仕事が来ました。
会社でPWAやってみたいですねって言ってたらPWAの仕事が来ました。

と、いうことでアニメイトタイムズで新しいキャンペーンページをリリースしました。 リリースしたキャンペーンページはコチラです。

TVアニメ『NEW GAME!!』×アニメイトタイムズコラボキャンペーン! www.animatetimes.com

昨年も実施させて頂いたキャンペーンのパワーアップ版になります。

前回実施の中から何点か改善した部分もありますが、今回一番力を入れた部分はProgressive Web Apps (PWA)の導入です。

PWAとは

簡単に言うと、ウェブアプリをネイティブアプリのように扱うための方法です。

Progressive Web Apps  |  Web  |  Google Developers

ウェブとアプリの両方の利点を兼ね備えたアプリです。ブラウザのタブで表示してすぐに利用することができ、インストールの必要はありません。使い続けてユーザーとの関係性が構築されていくにつれ、より強力なアプリとなります。不安定なネットワークでも迅速に起動し、関連性の高いプッシュ通知を送信することができます。また、ホーム画面にアイコンを表示することができ、トップレベルの全画面表示で読み込むことができます。*1

厳密にはPWAではない物もありますが、今回は

  • ホーム画面へアイコンの追加
  • ServiceWorkerによるキャッシュ
  • オフラインでの表示
  • push通知

を導入しています。

今回はリリースしたキャンペーンページを使って、PWAを体験できる方法を説明したいと思います。

PWAを体験するには

※ 今回試験的に導入しているので、まだまだ理解が及んでいない部分もあります。

十分に体験するにはAndroid端末が必要となります。 Android端末にて TVアニメ『NEW GAME!!』×アニメイトタイムズコラボキャンペーン! にアクセスしてください。

f:id:sugicyan:20170821202305p:plain

現在は 5分以上の間隔を開けて2回目以降にサイトを訪れた場合 にホーム画面に追加するかの確認が画面下から出てきます。
正直このあたりの仕様を詳しく追えていないので1回目でも出たといったことも起きるかも知れません。

f:id:sugicyan:20170821202322p:plain

追加ボタンを押すと、ホーム画面にアイコンが追加されます。

f:id:sugicyan:20170821202350p:plain

アイコンタップにて本キャンペーンページにアクセス可能です。
アイコンタップで起動した場合は、画面上に表示されるURLバーが無いことがわかると思います。

f:id:sugicyan:20170821202407p:plain

ホームに追加する通知が出ない・無視してしまった

一度ホーム画面に追加するという通知を逃してしまうと、以降はホームに追加するか聞かれることはなくなります。
その場合は、画面右上のメニューから「ホーム画面に追加」をタップしてください。
ここからホーム画面への追加が可能になります。

f:id:sugicyan:20170821203142p:plain

f:id:sugicyan:20170821203153p:plain

以上がPWAの説明となります。

最後になりますが、PWAをきっかけにこのサイトにたどり着いた人、アニメが好きな人など、一人でも多くの方にNEW GAME!!の事を知って頂けたらなと思います。

【フォトレポート】アニメイトラボが市ヶ谷に移転しました!

チーフ IT アーキテクト/開発部長の久松です。桜の咲くこの4月より、アニメイトラボのオフィスが市ヶ谷に移転しました。新オフィスの様子を、いつもより写真多め(※当社比)でレポートします!

f:id:karia:20170407190032p:plain

入口から会議室の方向を見渡した様子です。「PATH」と呼ばれる通路も広々としています。

f:id:karia:20170401153018j:plain

PATHのあちらこちらにカラフルな椅子が点在しています。

f:id:karia:20170407184850j:plain

1枚目の画像で奥に見えていたアニメイトラボのロゴは、この超単焦点プロジェクターで投影したものです。壁から20cmほど離すだけで大画面の投影が可能、Wi-Fi経由の投影も簡単です。すごーい。

※撮影のために一時的にイスの上に置いていますが、普段は安定した台の上に置いています。

f:id:karia:20170401153240j:plain

会議室は窓が大きく明るいです。青と黄色の椅子が交互に置かれています。

f:id:karia:20170401124915j:plain

ブラインドを下ろすと暖色系のライトが目立ちます。

f:id:karia:20170330165947j:plain

執務デスクにはどの配置でも刺さる電源タップ完備。

f:id:karia:20170407142640p:plain

オフィスの工事期間中は、普段は滅多に見られない何も無いオフィスを見学しに行ったり、

f:id:karia:20170401100655j:plain

天井裏を開けて工事している様子に立ち合うことも出来ました。

新オフィスのネットワーク構築については、別エントリにて公開したいと思います。こうご期待!

f:id:karia:20170330171222j:plain

市ヶ谷駅の周囲はオフィスや飲食店などが多く賑わっています。この日は市ヶ谷橋から見えた夕日が綺麗だったので思わずパチリ。

f:id:karia:20170407173841p:plain

今回の移転にあたり、沢山の方からオフィス移転のお祝いをいただきました。この画像はその一部で、冷蔵庫を埋め尽くすフルーツジュースの様子です。お祝いを送って頂いた皆様、本当にありがとうございます!!!!!

f:id:karia:20170403194255j:plain

移転後のアニメイトラボにも是非ご期待ください!!