サービスプラットフォームチームで SRE を担当している id:masayosu です。 先月からですが Hatena Developer Blog にて SRE 連載を始めました。先月の記事は はてなブログの DB を RDS for MySQL 8.0 にアップグレードした話 - Hatena Developer Blog です。 毎月はてなの SRE が交代でブログ記事を書きますのでお楽しみに。 この記事は2024年2月の SRE 連載の記事です。 はてなの EKS 利用について 私が所属するサービスプラットフォームチームでは EKS の運用を続けており、先日 Kubernetes 1.23 から 1.28 へのアップグレードを完了しました。 私のチームは少人数で形成されているのですが、担当しているサービスは大小様々あり EKS クラスター上では数十個のサービスが稼働しています。 少

やあ！id:cockscombです。日々の生活に役立つちょっとした知識を紹介していきます。最近は、Apple WatchやPixel Watchみたいな、ナントカWatchのリリースが多いですね。でも今日紹介するのは、WatchはWatchでも、Docker Compose Watchです。 Docker Composeは、複数のコンテナを扱った開発に用いる道具で、コンテナを活用した開発では当たり前に使われている。そのDocker Composeに、ファイルの変更を監視してコンテナの再構成を行わせるのが、Docker Compose Watchだ。Docker Compose 2.22以降で利用できる。最新のDocker Desktopにも付属している。 ホットリロードとコンテナ開発 Docker Compose Watchがどういうものかを説明する前に、Next.jsのホットリロードにつ

2022年9月7日（水）に、 Hatena Engineer Seminar #21 をオンライン開催しました。ご参加いただいたみなさま、ありがとうございました。 このエントリーでは、当日のアーカイブ動画や公開資料をご紹介します。 Hatena Engineer Seminar #21 について 発表概要と資料 GraphQLを使い続けて気づいたこと 〜マンガノでの活用事例から〜 - by id:miki_bene Perl でも GraphQL が使いたい - by id:nakaoka3 マルチテナントで GraphQL を使う際の工夫 - by id:mizdra GraphQLでフロントエンドとバックエンドを分離する - by id:magaming はてなが作るマンガアプリのGraphQL導入から活用 ～ コミックDAYSからGigaViewer for Appsへ～ - by

マンガメディア開発チームの id:mizdra です。半年ほど前から「フロントエンドエキスパート」という肩書きをもらい、社内でフロントエンドの啓蒙活動をしています。具体的にどんな活動をしているかについては、社内のポッドキャストで少し話しましたので、興味があれば聞いてみてください。 developer.hatenastaff.com 最近、私はReactを採用する社内プロダクトでのCSSの書き方を検討していました。最終的にそのプロダクトでは、CSS Modulesを採用するに至りました。しかしその過程で、CSS Modulesのメンテナンス体制に対して懸念があり、将来的な存続を危ぶむ声が界隈にあることを知りました。 ただし、実際にメンテナンス体制について調べてみたところ、万全ではないものの引き続きメンテナンスがされていて、使用もできることが分かりました。そこで、今回はCSS Modulesに

こんにちは。id:shiba_yu36です。MackerelチームでWebアプリケーションエンジニアをしています。最近の開発合宿で、id:syou6162やid:polamjagと一緒に、社内の全チームの開発パフォーマンスを表す指標をGitHubのPull Requestから可視化し、開発チームの改善に活かせるようにしました。今回はその紹介をします。 説明するサンプルコードは、次のレポジトリで公開しているので参考にしてください。ここではGitHubのhatenaオーガニゼーションで集計していますが、forkして少し手直しすれば、別のオーガニゼーションの集計も可能になっています。 hatena/pull-request-analysis-sample 開発チームの改善におけるいくつかの課題感 開発チームのパフォーマンス指標に何を使うか 4つの指標のうち何からまず集計するか 変更のリードタイム

こんにちは, Mackerel 開発チーム アプリケーションエンジニアの id:susisu です. 現在 Mackerel では, Web コンソール画面の開発に使用しているフレームワークを, これまで使用してきた AngularJS から React へ移行することを中心とした, フロントエンド開発の刷新プロジェクトを行っています. このプロジェクトの立ち上げについては以前 Hatena Engineer Seminar で発表しましたが, そこでは時間の都合もあり, 技術的側面についてはあまり深く掘り下げることは出来ませんでした. ということでこの記事では, より技術的な面にフォーカスしてプロジェクトの内容をご紹介できればと思います. "React化" プロジェクトについて Mackerel の開発は 2014 年ごろから始まりましたが, フロントエンドのフレームワークとしては当初か

こんにちは。MackerelチームSREのid:heleeenです。 Mackerelでは、2020年10月14日に計画メンテナンスを実施しました。今回は告知ブログに記載の通り、Mackerelが利用しているRedisをAmazon ElastiCache for Redis（以下、ElastiCache）へ移行しました。 本記事では、この10月の計画停止の裏側を紹介します。 どのようにElastiCacheへ移行するか 大半のRedisを無停止で移行 最後はElastiCacheへのオンライン移行を使用 メンテナンスに向けたさまざまな準備 メンテナンス手順書のチーム内レビュー メンテンス実施中の役割分担 なぜタイムキーパーが必要になったのか リモートで停止メンテナンスを実施する方法 検証環境を利用して事前にリハーサルも実施 Redisを安全に効率よく切り替えるために 参照するRedisを

はてなブログでSREをやっているid:cohalzです。 2019年12月頃からid:utgwkkやid:onkとともに、はてなブログにおけるキャッシュ周りの改善を行いました。その結果、次のような成果が得られました。 ブログ記事のキャッシュヒット率が、1日平均で8％から58％に向上 アプリケーションサーバの台数を、以前の半数以下に削減 DBに届くリクエスト数が、以前の3分の2まで減少 レスポンスタイムの平均が、以前の8割まで減少 この記事では、実際にどういった改善を行ったのか、その際に気をつけたことや大変だったことを紹介します。 はてなブログがVarnishを導入した経緯と課題 開発合宿をきっかけに問題が明らかになる 進め方をまず考える ホストのメモリをできるだけたくさん利用する メモリを積んだホストでなぜかレイテンシが悪化 キャッシュが分散しないようVaryヘッダを使う デバイス情報を適

はてなブックマークチームのid:taraoです。はてなブックマークでは、以前はオンプレミスなElasticsearchクラスタを運用していましたが、AWS上にAmazon Elasticsearch Serviceのクラスタを構築して切り替えました。この切り替えではクラスタの再構築に限らず、アップグレードやマッピングの変更にも使える一般的な方法を採用しました。 この記事では、その具体的な方法を紹介します。 一般的な方法を採用したい目的と背景 検討したクラスタ再構築や切り替えの方法 1. ローリングアップグレード 2. スナップショット・リストア 3. クラスタ横断レプリケーション 4. Reindex API 5. アプリケーションコードによる再インデキシング 目的・条件による取りうる方法のまとめ 採用した再インデキシング手法の詳細 ダブルライトをどのように実現するか 非同期ダブルライトの

こんにちは。毎年のAppleとGoogleからのお達しのおかげで、開発環境やライブラリのアップデートが大好きな id:ikesyo です。普段はiOS・Androidのモバイルアプリ開発を主にしています。 はてなでは先日、はてな社内で使用しているRenovateの設定プリセットをGitHubで公開しました！ はてな社で使用しているRenovateの共通設定をまとめたリポジトリを公開しました！https://t.co/2mgZNQ3pxw RenovateのShareable Config Presetsという機能を活用しています。— Sho Ikeda (@ikesyo) 2020年6月12日 リポジトリはこちらです。 Renovateについて Renovateについて簡単に説明すると、様々なプログラミング言語やツールに対応したライブラリ・依存性の自動アップデートサービス（もしくはツール）

東京でウェブオペレーションエンジニアをしている id:dekokun です。 本記事ではAWSでELBを使用してHTTP/2 or SPDYを運用する上で直面する問題としてのクライアントのIPアドレスが分からなくなる問題の紹介を行い、その後に解決策としてのPROXY protocolの紹介・PROXY protocolの設定方法について記載します。 この記事は先日公開しましたAWS EC2でのHTTP/2 or SPDY導入方法 - Hatena Developer Blog (以下、"前回の記事"と呼びます) の続編となります。 ELBのTCPモードにおける問題点 解決策としてのPROXY protocol PROXY protocolが必要となる技術的背景及びPROXY protocolの動作 ELB + nginx構成でのPROXY protocolの設定方法 ELBの設定 ngin

東京でウェブオペレーションエンジニアをしている id:dekokun です。 ここ数年、HTTP/2 or SPDYが話題ですよね。nginxが1.9.5からSPDY対応を切ってHTTP/2の設定ができるようになったり、はてなでも以下ブログにも記載されているように、SPDY or HTTP/2も積極的に導入していっています。 developer.hatenastaff.com 先日、AWSの環境にてSPDYを導入したのですが、導入していくまでにはやはり若干の苦労がありました。そこで、SPDY or HTTP/2をどのように導入していったか及びそこで起きた問題点の解決策等をまとめようと思います。 なお、この記事では"HTTP/2 or SPDY"と書いていますが、SPDYはHTTP/2にその座を譲ろうとしている立場となっています。具体的には、今年の5月にChromeがSPDYのサポートを切る

こんにちは、アプリケーションエンジニアの id:nanto_vi です。先日行われた Hatena Engineer Seminar #4 で、「TypeScript で実現する MVP アーキテクチャパターン」と題する発表を行いました。当日は皆様ご清聴いただき、また懇親会でも活発な質疑をいただきありがとうございました。 内容としては、TypeScript を用いたクライアントサイド Web プログラミングの話、及び既存の JavaScript フレームワークを採用せず、MVP (Model-View-Presenter) アーキテクチャパターンにのっとり開発を進めた事例の紹介となります。以下に発表資料を加筆修正して公開するのでご参照ください。 自己紹介 id:nanto_vi (外山真) アプリケーションエンジニア JavaScript、Perl アジェンダ 少年ジャンプルーキーでの T