portal shit!

ブログを Docker 化して AWS ECS で運用するようにした。

なぜ Docker 化したか

• 仕事で Docker を使う機会が増え知見がたまってきた
• 仕事では Production 投入はできていないので個人ブログで Production 投入して知見を得ておきたかった

どうやったか

ローカルセットアップ編

• Dockerfile & docker-compose.yml を作成した
  • Alpine Linux を使ってなるべくイメージを小さくする
• Gem::LoadError 問題
  • Lokka の Gemfile には動的な読み込みを行っている部分があるため、 Dockerfile で単純に COPY するだけでは Gem::LoadError になってしまう。
    • Lokka のプラグインは Gem 化されておらずリポジトリ内に含める形式
    • プラグイン側で必要な gem はプラグイン内に Gemfile を配置して宣言する形式
    • Lokka 本体の Gemfile には Dir["public/plugin/lokka-*/Gemfile"].each {|path| eval(open(path) {|f| f.read }) } のようなコードがあって強引に eval で内容を取り込んでいる
  • 対策
    • Gemfile.docker を用意する
    • Gemfile.docker を生成するためのシェルスクリプトを用意して実行する
    • Dockerfile の COPY は以下のようにする
    • COPY Gemfile.docker /app/Gemfile
• 他、 MySQL のコンテナを追加して手元でアプリが起動するところまでは確認済み

Production セットアップ編

• ECR にリポジトリを作成し image を push （公式のチュートリアル通りにやればできる）
• ECS にサービスやターゲットグループ、タスクの作成なども指示通りに行う
  • 土台となる EC2 インスタンスは手動で作るのではなく、 ECS の画面でポチポチやると勝手に作られる
  • 詳細コンテナ設定でエントリポイントを入力する欄に、 Dockerfile と同じように文字列で書いていたらコンテナが起動せずハマった
    • カンマ区切りで書かないといけないらしい
    • puma を起動したかったら bundle exec puma ではなく、 bundle,exec,puma というように書かないといけない
• 諸々設定を済ませたらロードバランサー（ ALB ）を EC2 のパネルで作成してターゲットに Docker コンテナが動いている EC2 インスタンスを指定する
  • ECS の用語やサービス構成に慣れるのに時間がかかるが、歯を食いしばってがんばるしかない
• DB に関しては RDS を使うことにした
  • 稼働中の VPS サーバーで mysqldump -ufoo -p db_name | mysql -ubar -p db_name -h foo.bar.ap-northeast-1.rds.amazonaws.com みたいな感じで雑に流し込んで移行する
• ECS は VPC でしか使えないので、 VPC に慣れてない人は VPC に慣れるところから頑張るしかない
• セキュリティグループの設定なども必要になるので頑張って下さい
• Nginx を利用しないので SSL の復号を ALB で行う必要がある
  • ACM で無料で証明書を発行できるのを知らず、 Let's Encrypt の証明書を取り込んで使う
• ここまでで一旦公開

運用して気づいた問題点

• サイトが 503 や 504 になる
  • Docker コンテナがすぐ死ぬ
  • ALB から切り離されることしばしば
  • VPS 時代は Nginx に静的ファイルの配信をまかせていたが、 Nginx を挟まなくなったので puma が担当することになりアプリの負荷が高まったのではと推察
    • CloudFront を挟んでいい感じにキャッシュしてもらい、静的ファイルの配信は CloudFront にまかせることに

CloudFront 導入編

• ALB で使っているのとは別に SSL 証明書を取得する必要がある
  • CloudFront <-> ALB 間の通信を HTTPS で行うため
  • Route53 で ALB に割り当てている A レコードをサブドメイン付きの別のものに変更
  • ALB 用にはワイルドカード証明書を使う（無料で証明書取得できる ACM 最高）
  • Let's Encrypt の証明書を使うのはやめ、ルートドメインの証明書も ACM で取得して CloudFront に設定
• 動的コンテンツ（ HTML など）はキャッシュしないようにしないといけない
  
  • 当初、設定がうまくいっておらず、以下のような問題が発生
    • POST, PUT, DELETE できない
    • Cookie が origin に転送されずセッションが維持できない
    • クエリストリングが無視されてしまい、ページ検索などができない

所感

• 体感的にサイトの読み込みがチョッパヤになった
• CloudFront 導入したが、まだ 503 にはなる
  • そもそもインスタンスを良いやつに変えないとダメなのかもしれない
  • タスク数を増やしてクラスタリングするなどいろいろ試してみる
    • クラスタリングするためには Cookie セッションではなく Redis や Memcached などをセッションストレージに使う必要が出てくる…
• Deploy だるい問題
  • cap deploy しなくなり、イメージをビルドして push する感じになる
    • Alpine Linux でもそこそこイメージサイズはでかくなるので貧弱な回線では docker push にめっちゃ時間かかる
  • ECS 側でもサービスを更新するなどの作業が発生
    • Blue / Green Deployment できるがポチポチ作業が発生するのがだるい
    • Rails を運用する場合は migration なども発生するのでうまいことやる必要あり
  • git commit しなくても作りかけのコードの状態で docker-compose build してしまいがちになり、リポジトリのコードと動いてるコンテナイメージの間に差分が発生してしまいそう
    • ちゃんと CircleCI などを導入してイメージのビルドとプッシュは CI サービスでやる、というような運用にしないと破綻しそう
• 手順書問題
  • こんな風にブログを書いて雑な手順書を作成するようではいけない。 Terraform 化しないと破滅する。
• Lokka は CMS for Cloud です
  • git push heroku master するだけで使えることが売りの Lokka を AWS のガチな構成で運用するという皮肉
• お金高い
  • 毎月 3000 円くらいかかる感じになりそう。 VPS は年払いで 16000 円くらいなのでだいぶ高い。払えなくなったら VPS に戻しそう。

謝辞

r7kamura さんの amakan Docker 化の一連の記事と Classmethod 社の ECS 関連の記事には大変お世話になりました。

• amakanの開発環境をDockerに移行した - ✘╹◡╹✘
• amakanの本番環境をDockerに移行した - ✘╹◡╹✘
• Amazon ECSのELB構成パターンまとめ(ALB対応) ｜ Developers.IO
• CloudFrontとELB間をSSLで通信させる ｜ Developers.IO

Archive ページに React Router を導入して、年を切り換えたときにページ遷移なしで表示を切り替えられるようにした。あわせてカテゴリ一覧を表示して記事を絞り込み表示するようにした。

React はこれまで cdnjs からダウンロードしていて JSX の変換は Babel の browser.js を使ってブラウザーで行っていたけど JS の開発環境もちょびっとだけモダンにして npm モジュールをインストールして手元でいろいろやるようにした。一枚のスクリプトに書いていたコードはコンポーネントごとに分割して browserify で連結するようにした。 React を自前で配信するとファイルサイズも結構無視できない感じになったので minify なんかもするようにした。

F/E の情報収集、きらきらネームが多くて調べるのにかなり時間がかかった。 npm モジュールの名前とそれが何をやるためのものなのかがすぐに分からない。じいちゃんばあちゃんが横文字を覚えられないのに似てる。 Ruby もきらきらネーム gem は多いけど寿命が長いのである程度触ってれば覚えられる。 JS はライブラリの寿命が 1 年くらいだから雨後のたけのこのようにどんどん新しいやつが出てきて全然覚えられない。自分が高齢化してきてるだけで若い人だったらすんなり頭に入ってくるんだろうか。

fish が流行ってるっぽいので移行してみた。 peco を使えるようにしたらほぼ問題ない感じで使えてビックリ。 ~/.zshrc 長くなってきてたし捨てられそう。よかった。

ちょっと触ってみた感じ、設定ファイルの配置場所が ~/.config/fish/ であること、 PATH の通し方が特殊であること、環境変数に値を入れるときは env FOO=bar のように env 付きでやらないと怒られることが変わってるなと思ったが、 fish スクリプトの文法が Ruby っぽくて書きやすい・読みやすいのはとてもよい。公式ページにある "Sane Scripting" の項目が面白かった。

合同勉強会 in 福岡という勉強会があって、 Nulab の人やクラスメソッドの人たちが福岡に来て発表するということだったので行ってみたいと思ったけど参加者枠が埋まってたので LT 枠で申し込んで行ってみた。まえブログに書いた BitBar の話をした。

合同勉強会 in 福岡 (2017/02/11 13:00〜)

# 合同勉強会 in 福岡 合同勉強会 in 福岡は、福岡県で勤務している、もしくはゆかりのあるエンジニア達による合同勉強会です。 # どんな勉強会？ モバイルアプリケーション、フロントエンド、それらを支えるバックエンド、インフラ、データ分析に精通したエンジニア達が日頃の業務で得たノウハウや興味のあることをセッション形式で話します。 # 開催要項 ※当日は荒天が予想されています！交通機関麻痺や積雪によっては中止する可能性もあります。その際はお知らせメールとtwitter ハッシュタグ #gbfukuoka にてご連絡いたします。 ## 日時 2017/02/11(土) 13...

connpass.com

以前一緒に仕事していた Rudolph Miller 先輩がインタビューで「勉強会は勉強しに行くところじゃなくて自分が普段勉強してることが合ってるか確認しに行くところ」みたいなことを言ってたけど、今回は普段勉強してないことがありありとなった感じでやばいなと思った。皆さん AWS とか Azure とか Terraform とかに詳しすぎる。きしだなおきさんの機械学習についての発表とかさっぱりわからなかった。平川 剛一さんの Server-side Swift の話は面白かった。 Server-side Swift の開発、 Apple じゃなくて IBM が主導しているそう。ぼちぼち Web フレームワークなんかもできてきてるみたい。

LT は皆さんレベルが高く、ネタに走りつつも技術的に高度な内容で自分の LT が一番しょぼかった。発表もうちょいうまくなりたい。

Vim で Markdown を編集するとき、 vim-quickrun を使って Marked でプレビューするようにしてる。これが便利で体に染みついてるので、 Deckset で表示する用の Markdown スライドを Vim で編集しているときに一発で Deckset を開いてプレビューできたら便利だなと思ったので以下のようにしてみた。

1. ファイルのパスに slides が含まれていたら filetype を markdown.slide にする
2. そんで ft=markdown.slide のときは vim-quickrun で Deckset にファイルをプレビューできるようにする

こんな感じ。

au Bufread,BufNewFile /*/slides/*.markdown set filetype=markdown.slide
let g:quickrun_config['markdown.slide'] = {
      \ 'outputter' : 'null',
      \ 'command'   : 'open',
      \ 'cmdopt'    : '-a',
      \ 'args'      : 'Deckset',
      \ 'exec'      : '%c %o %a %s',
      \ }

便利。

GitHub - thinca/vim-quickrun: Run commands quickly.

Run commands quickly. Contribute to thinca/vim-quickrun development by creating an account on GitHub.

github.com

Marked 2 - Smarter tools for smarter writers

Marked is a Markdown preview with an elegant and powerful set of tools for all writers.

marked2app.com

Deckset for macOS and iOS: Presentations from Markdown in No Time

Write down your thoughts in your favourite text editor, and Deckset will turn them into beautiful presentations.

www.deckset.com

puma はメモリ食い

puma にして喜んでたけど二時間後くらいに NewRelic で様子を見てみたらメモリ 90% 以上消費してて swap ファイルもめっちゃでかいのができてて暴発一歩手前になってた。

一旦 puma をシングルモードからクラスターモードに変えて puma_worker_killer を導入し、 worker を定期的に再起動するようにした。ただ restart 後のメモリ増加傾向は変わらない。

引き続き NewRelic で様子を見ていると Python2 が一番メモリを食っている。このブログは Syntax Highlighting に Python の Pygments を pygments.rb 越しに使っている。これまで unicorn の worker プロセス 2 個で動かしていたときには最大でも Python のプロセスは 2 個で事足りてたけど、 puma にして 16 スレッド（ puma のデフォルト）が起ち上がるので、 16 個の Python プロセスが起動していたっぽい。

これは意味ないなということで以前利用したことがあった Pygments の Ruby 移植版である rouge に変えてみることにした。こちらは Ruby なのでスレッドが別プロセスを起動してメモリ爆発ということにはならないと思われる。

puma_worker_killer と Pygments 置き換え後半日様子を見たが、これでメモリ消費量爆発ということはなくなった。

sidekiq でスレッドを増やしたときにも似たようなことを経験したけど、 Ruby から外部のプロセスを起動するようなプログラムを書いているときにマルチスレッドで処理をさせると、 Ruby のプロセスは増えなくても外部のプロセスがめっちゃ増えてそのせいでメモリあっぷあっぷになったり CPU の使用率が高まったりする。マルチスレッドプログラミングのご利用は計画的に。

異なるワーカー間でセッションを継続できない？

puma をクラスターモードにしたことで別の問題も発生した。なんとセッション情報が異なるプロセス間で共有されていないっぽい。なのでログインしてすぐに再ログインを求められるようになった。これは不便。原因を調査するには時間がかかりそうだったのでシングルモードに戻してみることにする。

まとめ

1. デフォルトの 16 スレッドでは puma は unicorn に比べてメモリを沢山消費する可能性がある
2. Ruby から外部のプロセスを起動するような処理に注意
3. puma のクラスターモード（ master worker モデル）でセッション情報がリセットされる問題に遭遇

追記

セッション情報が異なるプロセス間で共有されていない

これはちゃんと設定があって、 puma.rb に preload_app! を記述すればよかった。

If you're running in Clustered Mode you can optionally choose to preload your application before starting up the workers. This is necessary in order to take advantage of the Copy on Write feature introduced in MRI Ruby 2.0. To do this simply specify the --preload flag in invocation:

# CLI invocation
$ puma -t 8:32 -w 3 --preload

If you're using a configuration file, use the preload_app! method, and be sure to specify your config file's location with the -C flag:

$ puma -C config/puma.rb

# config/puma.rb
threads 8,32
workers 3
preload_app!

-- https://github.com/puma/puma#clustered-mode

これでプロセス間でセッション情報が共有されるようになった。

ブログの管理画面にファイルアップロード機能をつけてみた。 GitHub の Issue みたいにドラッグアンドドロップでアップロードしてくれる。こんな感じ。

いまのところ埋め込みフォーマットは Markdown にしか対応してない。

Lokka は heroku とか PaaS を使うことを前提に作られているのでファイルをアップロードする機能が提供されてこなかった（ heroku は永続的なファイル書き込みができない）。 heroku で動かしている人でも使えるように Amazon S3 に上げるようにしてみた。 AWS のアカウント作成とかが必要なのでレンタルサーバーに設置してある WordPress にファイルアップロードするのに比べたら敷居が高いけど、設定するのは1回だけだし全くアップロードする手立てがなかったこれまでに比べたら劇的に快適になるはず。自分で使ってみたけどめっちゃ便利になった。

ファイルアップロード、ちゃんと作るなら Paperclip みたいにファイルのチェックを厳密に行なわないと危ないと思うけど、管理画面から上げるの前提なのでチェックなしで雑にアップロードできるようになっている。 AWS の token 系の設定画面を作ったら Lokka 本体に Pull Request 出します。

なお一つ前の記事でアプリケーションサーバーを puma に変更 - portal shit!というのを書いたけど、このファイルアップロード機能がうまく動かなかったので unicorn を捨てたのだった（ pow で動かしている環境や bundle exec rackup して WEBRick で起動しているサーバーではちゃんとアップロードできる）。なぜか unicorn で multipart/form-data な POST リクエストを rack アプリケーションに適切に渡すことができず EOFError が発生してしまう。

"EOFError: bad content body" for multipart form requests · Issue #903 · rack/rack

On a multipart form where users can submit profile information like a profile picture upload we're getting occasional "EOFError: bad content body" errors. They come mostly from mobile devices. Thes...

github.com

仕事で unicorn で動いてるサーバーにファイルアップロードする仕組み入れたことは何度かあるけどこんなエラーになったことはなかったのになぁ。謎い。