WebSocketの扱うサービスでは、長時間のコネクション、再接続処理、プロキシ、ロードバランサなど、インフラの面で多くの問題を抱えがちです。弊社のサービス「pixiv」の9周年企画でも、この問題に直面しました。 実際にそこで構築したインフラの事例をもとに、本運用に使えるWebSocketサーバの構成について、pixivインフラ部の南川からご紹介します。 * 9周年企画 “黒歴史”をロケットで宇宙に飛ばす pixiv黒歴史 そもそも WebSocket とは？ WebSocketはTCP上で動く双方向通信のための通信規格です。 Webページの読み込みで行われているような、クライアントがサーバにデータを要求し、サーバはクライアントにレスポンスを返すというHTTPの通信ルールとは違います。サーバと長時間コネクションを確立し、Socketのようにデータのやり取りを行います。そして、コネクションを

こんにちは、@harukasanです。ピクシブでは3年以上にわたってHTTPサーバにnginxを採用しています。これらのノウハウが詰まった「nginx実践入門」が1/16(土)、技術評論社から発売されることになりました。 この記事では本書からピクシブで良く使われているnginxのテクニックについてかいつまんで紹介します。 すべてのリクエストを受け止めるnginx ピクシブのたくさんあるサービス（pixiv、pixiv Spotlight、pixivコミック、ピクシブ百科事典……）のどこかにHTTPリクエストを投げると、複数台あるフロントサーバのどれかに届きます。実際にアプリケーションを処理するのはフロントサーバの裏側にいるアプリケーションサーバです。これらのサーバにはPHPだったり、Ruby on RailsだったりPlay/Scalaだったりいろんなアプリケーションがデプロイされています

みなさんはじめまして、ピクシブのフロントエンドエンジニア id:koharusugiura です。 JavaScript を用いた開発を行う際に jQuery や React、vue.js といったライブラリーを使う方は多いでしょう。これらのライブラリーは共通して DOM を扱うライブラリーとなります。 DOM についての説明は長くなるのでここでは省きますが、簡単に説明すると HTML や XML の構造を表現するための仕様です。DOM は JavaScript のためだけにある仕様ではなく、 Java や Python など、多くの言語に対応する仕様です。 前述した各ライブラリーは多くのウェブブラウザー間の差異を吸収してくれるため、非常に便利なものです。しかし、その機能の豊富さからライブラリー自体のサイズは大きく、ウェブブラウザーで読み込むファイルの数や合計の容量が増えてしまいます。状況

この記事は ピクシブ株式会社 Advent Calendar 2015 10日目の記事です。 qiita.com こんにちは。Androidアプリエンジニアのいとおちゃんです。 高校生の頃からアルバイトとしてピクシブに入社してから4年目になりました。昨年は若手アルバイトと名乗っていましたが、気づいたらもう大学生です。最近はpixivマンガアプリの開発をしています。 今回はAndroidアプリ開発の話ではなく、個人的に最もアツいと感じているLet's Encryptを使ってnginxでHTTP/2サーバを立てる話をします。 Let’s Encryptを使おう Let's Encryptを利用すると、無料で認証されたSSL証明書を簡単に発行することができ、ここ最近話題を集めています。今月、Let's EncryptはようやくPublic Betaになりました。そこで、まさに今が旬ともいえるLe

モバイルアプリエンジニアの@__chocomelonです。 DroidKaigiで発表してきました。 先週DroidKaigiという、エンジニアが主役のAndroidカンファレンスが行われました。 DroidKaigi、本当にためになる発表ばかりで、楽しかったです。発表資料のまとめやToggeterのまとめを見るだけでも良い知見が得られるかと思います。 私も『アプリの企画、プロトタイプからリリースに至るまで』というタイトルで発表させていただきました。詳しい内容はspeakerdeckの資料になります。 資料 speakerdeck.com 概要 ピクシブでは最近pixivマンガというアプリを公開しました。ピクシブでは新しいアプリを作る機会が多くはなかったので、良い所、悪い所含めて企画からリリースに至るまでに得られた知見を共有します。 ブレインストーミング エンジニア2人とディレクター1人の

インフラチームの @catatsuy です． 去年非エンジニアの新卒にプログラミング研修というのをやりました． 非エンジニアの新卒にプログラミング研修を行いました - pixiv inside [archive] 縁あってこの研修の内容を書籍化しました． pixivエンジニアが教えるプログラミング入門 (星海社新書) 作者:金子 達哉星海社Amazon Amazon では 2015/03/26 に発売されるそうです． 非エンジニア向けということで手軽に手に取れるように技術書ではなく新書として星海社さんから発売されます．内容は実際にやったプログラミング研修を同じく実際に Mac 上で動く画像投稿掲示板を作ってもらうという内容です．実際に作る画像投稿掲示板のコードは以下に公開しています． catatsuy/sinatra_keijiban 以下の様な読者が対象読者であることを本書の『はじめに』

メリークリスマス。@edvakfです。 以前にpixivの開発・デプロイ環境の変遷（2014年春版）という記事を書いたのですが、その後もpixivのデプロイ環境は変化し続けています。 今日はpixivで使っているpployというツールについて、半分社内向け資料のつもりで無駄に詳しく書いてみたいと思います。ちょうど年末だし「社内属人コードのドキュメント充実化デイ」をやりたいよねーって話をしていたところでもありますし。 一度社内で行ったプレゼンから抜粋した8ページだけの小さなスライドも公開したので忙しい方はどうぞ。 pployとは デプロイといえばcapistranoやminaなどのスクリプトを手動で実行している人もいると思いますが、pployはcapistranoなどの代替ツールではなく、サーバー上でcapistranoなどを実行するためのウェブアプリケーションです（webistranoの代

この記事はピクシブ株式会社Advent Calendar 12/10の記事です。 こんにちは、インフラチームの@harukasanです。 さて、今日はpixivで使用しているサムネイル変換サーバについて紹介しようと思います。 pixivにはたくさんのサムネイルがある pixivにはうんざりするほどたくさんの種類のサムネイルがあります。 これは対応しているプラットフォームが多く、また画面毎にもサイズが異なるからです。 PC版であるwww.pixiv.netだけでも10種類以上のサムネイルが使用されています。 また、サムネイルにはアスペクト比を固定したものと、スクエアにクロップした2種類があります。 (Ugoira Tech Talks: Ugoku Backendより) 従来の方法ではこれらのサムネイルをアップロード時に生成していたため、サムネイル生成を非同期化するなどして対応していました。

"古きよき時代から来ました、真面目なSE、真面目にSE" 広告系技術兼pixivの開発マネジメント担当 @bash0C7です。 今回は『Webアプリエンジニア養成読本』の話をします。 Webアプリエンジニア養成読本[しくみ、開発、環境構築・運用…全体像を最新知識で最初から! ] (Software Design plus) 作者: 和田裕介,石田絢一(uzulla),すがわらまさのり,斎藤祐一郎出版社/メーカー: 技術評論社発売日: 2014/03/11メディア: 大型本この商品を含むブログ (3件) を見る こちらの本ををいただきました。ありがとうございます。 第一印象 まず一回目読んでみて、下記が印象に残りました。 まるっとカバー 書かれているような分野を全部わかっていると仕事が捗るなと思いました。 現実的なチェックシート 背表紙裏のチェックシートがあるのですが、多すぎず少なすぎず現実