今後のAdventar

メリークリスマス!Adventarを支える技術 Advent Calendar 2019 の25日目、最終日です。 最終日は今後の Adventar をどうしていきたいかについて技術編と機能編に分けて書こうと思います。 技術編 細かく直したいところはいっぱいありますが、大きめトピック…

Adventar の技術変革の歴史

Adventarを支える技術 Advent Calendar 2019 の24日目です。 今日はこれまで Adventar が利用してきた技術がどのように変わってきたのかを書こうと思います。 2012年 リリースした年です。最初は Ruby と Rails を勉強したいと思い、何かいいサービスの題材…

サービスをオープンソースにする

Adventarを支える技術 Advent Calendar 2019 の23日目です。 今年から Adventar はオープンソースにしました。 ツールやライブラリ、言語などのソフトウェアであれば今の時代オープンソースというのは山程ありますが、サービスがオープンソースというのはそ…

細かすぎて伝わらない UI の工夫

Adventarを支える技術 Advent Calendar 2019 の22日目です。 さすがにネタ切れ気味なので、UI 系の細かいネタを投下します。 ユーザーアイコンが404のときにフォールバック Adventar では Twitter などのソーシャルログインを使っていて、ユーザーのアイコン…

View のモバイル対応

Adventarを支える技術 Advent Calendar 2019 の21日目です。 このご時世には信じがたい話ですが、去年まで Adventar はスマホで見ると PC View を縮小するだけで、スマホでは非常に使いづらいサービスでした。今年のシステムリニューアルでは機能追加したり…

Bugsnagを利用したエラートラッキング

Adventarを支える技術 Advent Calendar 2019 の20日目です。 今日はエラートラッキングについて書きます。 Bugsnag エラートラッキングのサービスは色々あって、有名なのは Sentry や Airbrake あたりでしょうか。今回は Bugsnag というサービスを利用しまし…

SSR の CDN によるキャッシュ戦略

Adventarを支える技術 Advent Calendar 2019 の19日目です。 今日は Server Side Redering (以下 SSR) した結果を CDN でキャッシュする戦略について書きます。SSR の概要については以下にも概要を書いたので一読しておくとよりわかりやすいと思います。 上…

インフラコストの最適化

Adventarを支える技術 Advent Calendar 2019 の18日目です。 昨日の記事で実際にかかっているコストを紹介しましたが、今日はコストを最適化するためにやったことを書きます。 Lambda を活用とスペックの調整 昨日の記事を見ても分かる通り、ECS などと比べ…

Adventar のインフラコスト

Adventarを支える技術 Advent Calendar 2019 の17日目です。 Adventar の運用コストが、何にどのぐらいかかっているかを書きます。AWS 以外は無料のサービスしか利用していないので、かかっているのは 100% AWS のコストです。AWS の構成については先日書い…

Adventar のインフラ概要

Adventarを支える技術 Advent Calendar 2019 の16日目です。 今年の Adventar のインフラはほとんど AWS を使って構築しています。AWS 以外だと、 Firebase Authentication や Bugsnag などのサービスも使っていますが、今回は AWS の構成について説明します…

schemalex による DB のスキーマ管理

Adventarを支える技術 Advent Calendar 2019 の15日目です。 今日は DB のスキーマ管理について書きます。 Rails の DB マイグレーションと Ridgepole Adventar は昨年まで Rails で作っていて、DB の マイグレーションも Rails デフォルトの機能を使ってい…

Lambda を使った画像のリサイズサーバー

Adventarを支える技術 Advent Calendar 2019 の14日目です。 今日は Lambda , API Gateway, CloudFront などを使って、画像のリサイズサーバーを作る話を書きます。 Adventar における画像のリサイズ Adventar は記事を投稿した際に、記事の関連画像を取って…

Lambda と CloudWatch Events を利用した定期ジョブを Serverless で管理する

Adventarを支える技術 Advent Calendar 2019 の13日目です。 今日は定期ジョブの実行について書きます。定期ジョブというのは cron とかで定期的にプログラムを実行するやつのことです。 実行するプログラム Adventar では、定期ジョブは一つだけしかなくて…

ecs-cli を利用したAPI サーバーのデプロイ

Adventarを支える技術 Advent Calendar 2019 の12日目です。 今日は API サーバーのデプロイについて書きます。 API サーバーは、4日目の記事 でも書いたように、gRPC のサーバーをたてています。この API サーバーは、Amazon ECS, Fargate を利用してホスト…

フロントエンドのデプロイ

Adventarを支える技術 Advent Calendar 2019 の11日目です。 今日はフロントエンドのデプロイについて書きます。フロントエンドの構成は昨日の記事で書いたとおり、一部を Lambda で SSR していて、静的コンテンツは S3 で配信しています。 なので、S3 と La…

Server Side Rendering の技術概要

Adventarを支える技術 Advent Calendar 2019 の10日目です。 今日は Adventar の Server Side Rendering(以下 SSR)している技術構成について書きます。 インフラ構成 まず、先日の記事に書いたように、Adventar ではすべてのページを SSR しているのではな…

Adventar における Server Side Rendering の導入

Adventarを支える技術 Advent Calendar 2019 の9日目です。 Adventar のフロントエンドは Nuxt.js で SPA な構成ですが、一部で Server Side Rendering(以下 SSR)をおこなっています。今日は SSR をする理由や Adventar での導入方法について書きます。 な…

Firebase Authentication の苦労話

Adventarを支える技術 Advent Calendar 2019 の8日目です。 今日は Firebase Authentication で苦労した点や工夫した点について書きます。 ログインの判定が遅い問題 Firebase Authentication を使って、現在のセッションがログインしているかどうかを検出す…

Firebase Authentication を利用した認証

Adventarを支える技術 Advent Calendar 2019 の7日目です。 今日は Firebase Authentication 認証について書きます。 選定理由 まず、なぜ今回 Firebase Authentication を利用することに決めたかを説明します。検討した選択肢としては Firebase Authenticat…

envoy の gRPC proxy に関する便利機能

Adventarを支える技術 Advent Calendar 2019 の6日目です。 今日は envoy の gRPC に関する便利機能について紹介しようと思います。 gRPC-Web proxy 4日目の記事でも書きましたが、今回は gRPC-Web の proxy レイヤーとして envoy を利用しています。envoy …

gRPC-Web と Server Side Rendering の苦労話

Adventarを支える技術 Advent Calendar 2019 の5日目です。 今日は gRPC-Web 導入にあたって最も苦労した Server Side Rendering(以降は SSR と書きます)の話を書きます。 前提条件 初日の記事 に書いたとおり、今回の Adventar のシステム変更の目的に、 …

gRPC-Web を利用したクライアント・サーバー間の通信

Adventarを支える技術 Advent Calendar 2019 の4日目です。 今日は gRPC-Web について書きます。 gRPC-Web とは gRPC-Web は今年の10月に GA になったプロトコルで、今回の Adventar システムリニューアルでは絶対に gRPC-Web を production で使ってみる、…

Nuxt.js によるフロントエンドの構築

Adventarを支える技術 Advent Calendar 2019 の3日目です。 今日はフロントエンドのフレームワークとして採用した Nuxt.js について感想を書こうと思います。 個人的には Vue.js よりも React のほうが好きなので、最初は Next.js を検討しましたが、ルーテ…

Adventar をローカルで開発する

Adventarを支える技術 Advent Calendar 2019 の2日目です。 Adventar はオープンソースでコードを公開しているので、誰でも環境を再現することができます。ただ、システムがそこそこ複雑で、ドキュメントなども全然書いていないので、たぶんリポジトリを見て…

Adventar 2019 の技術構成概要

Adventar を支える技術 Advent Calendar 2019 の1日目です。 Adventar はサービスを開始した2012年以来、Rails を利用してサービスを提供してきました。今年はそのシステムを一から設計し直し、以下のような技術要素を使って実装しました。 Nuxt.js による S…

Nginx で grpc-web の proxy

Envoy より Nginx のほうが慣れているので Nginx を使いたい。一応公式でも Docker でビルドできるようになってるけど、無駄にサイズがでかい(2GB超え)しコンパイルオプションがいじりたいので alpine でビルドできるようにしてみた。 https://github.com/…

navigator.sendBeacon で Content-Type を指定したい

計測用のリクエストみたいな小さいリクエストを投げるためのnavigator.sendBeaconっていうAPIがあって、fetchやXHRと違ってunload時でもリクエストが送信されるのが保証されるのが売りらしい。メジャーなブラウザには実装されつつある。 Navigator.sendBeaco…

npm scripts のコマンドライン引数は sh で展開される

package.jsonに "scripts": { "lint": "eslint src/**/*.{js,jsx}" } と書いた場合、npm run lintやyarn run lintは、このコマンドをシェルを通して実行する。このときデフォルトではshが使われる。例えばmacOSだとshはbashなので、bashがsrc/**/*.{js,jsx}…

Railsのネストしたネームスペースのautoload

こんな感じのコードがあったとして # app/models/user.rb class User end # app/models/admin/user.rb module Admin class User end end # app/controllers/admin/first_controller.rb class Admin::FirstController def index p User end end # app/control…

SmartHRの体験入社にいってきた

tech.smarthr.jp 人事制度として興味あるし、他の会社で働いてみることにも興味があったので発表された直後に反射的に応募したところ、きていいよ(意訳)と返事をもらったのでほいほいと行ってきた。 一日のコースで、こんな感じのことをやってきた。 午前…