Inkdropサーバレス化計画

Inkdropサーバレス化計画

Inkdropサーバレス化計画

サーバレスアーキテクチャが自分の中で急に熱い。運用もうやりとうない。業界での知見もぼちぼち出揃ってる感じがあるので自分でも挑戦してみたい。MarkdownノートアプリのInkdropを題材にしてやってみる。

サーバレスアーキテクチャとは、その名の通りサーバが無いアーキテクチャのこと。ここでのサーバとは、apacheやnginxなどのサーバプロセスから、LinuxマシンなどのVMを含めたコンピュータを指す。これらを自分で運用する必要がない。まじかよ。

じゃあどうやって提供するのかというと、サーバの代わりにHTTP(S)に応答したりイベントに反応するサービスを使う。処理を行うプログラムは、APIや機能単位で別々にデプロイしたものを使う。これらのプログラムが予め設定した条件で駆動する。つまり、今まで自分でサーバにやらせていたことを、サービス側でやってもらうということ。

メリットは主に3つある。まずスケールの心配が要らない。サービスが勝手に負荷に合わせてリソースを調整してくれるから。次に、コストを最小限に抑えられる。使われていないサーバの稼働時間にお金を払う必要がないから。そして、アプリケーションの本質的な部分の作業に集中できる。監視をがんばったり運用で悩んだりしなくていいから。

デメリットは主に開発手法がまだまだ発展途上なこと。ここ数年で提唱されているアーキテクチャなので、まだまだみんな手探り感がある。あと、ローカルで開発ができない。サーバを手元で動かせないので。でもこの辺は慣れなんじゃないかと思っている。まぁやってみないと分からない。

今のInkdropはherokuで運用されている。データベースはCouchDBで、EC2で運用している。図にすると以下のような感じ。

よくあるクラサバモデル。本当はJSやCSSなどの配信にCDN噛ませたりとかしてるけど省略。これでも満足してるんだけど、オーバスペック気味な点がある。Inkdropは主にクライアントアプリから使うもので、細かなデータ処理はそっちでやっている。だから、ウェブアプリのサーバサイドはほとんど何もしていない。現状のサーバサイドはユーザ認証とか支払い入力などが主な役割。

フロントエンドはReact製のSingle Page Application(以下SPA)。Universalに作っているのでサーバサイドレンダリングに対応している。が、Googleボットに人間が気を遣い頭を悩ませるのはおかしいので、サーバサイドレンダリングはやめてもいいかなと思っている。SEOはサーチエンジンががんばるべきであって人間ががんばるものではない。

このアーキテクチャで、EC2で運用しているCouchDBはどうがんばっても変えられない。ここが運用のボトルネックなのに笑。サーバレス化にあたってDynamoDBなどに乗り換えるのが理想だけど、CouchDBを選んだ理由はクライアント側のPouchDBとの同期機能が優れている点だから仕方ない。Cloudantは重すぎて使い物にならないからDaaSという選択肢は無い。とはいえアプリの性質上、不特定多数による急なアクセス集中の心配は無いので楽観視してる。

https://testmysite.io/ で速度チェックしてみた。スコアが驚きの低さ笑

herokuのリージョンがアメリカなので、これはネットワークのせい。でも一応いろんな国の人が使っているサービスなので、アメリカ以外でも速いに越したことはない。

具体的にサーバレス化する際に使用するサービスで、検討しているのは以下の三つ:

ところで、TJ Holowaychuk はサーバレスアーキテクチャを推している一人で、AWS Lambda用の補助ツールApexも開発している。この人が提供しているApex pingもサーバレスなので、手本にしようと思って調査してみた結果、上記の構成が浮かび上がった。これらを使用した場合のアーキテクチャ図は以下の通り。

検討中のアーキテクチャ

ブラウザはNetlifyのCDNからウェブアプリをダウンロードする。このウェブアプリがAjaxでAPI GatewayのAPIを呼び出すという流れ。CDN経由なので読み込み速度のボトルネック改善が見込まれる。

それぞれ軽く触ってみて、実現可能性があることを確認した。

初めて使ったけど、これはただのCDNではなかった。詳細は公式ページを見て欲しい。自分の中でアツいと思ったのは以下の機能:

  • デプロイの反映が速い。CloudFrontだとキャッシュの無効化に時間がかかる。
  • herokuみたいなgitベースの運用フローができる。Netlify上でビルド処理もやってくれる。
  • SSL対応とカスタムドメインが無料。
  • Pre-renderingに対応している。つまり、サーバサイドレンダリングに非対応なサイトでも、Googleボットに対しては予めレンダリングしたHTMLを返すことができる。ただし有料。
  • API Proxyingに対応している。CORSの設定が要らない。ただし有料。

これを使えば、無料でSSL対応の静的サイトが立ち上げられる。早速自分のホームページも乗り換えてみた: https://www.craftz.dog/ GitHub Pagesよりも性能が良い。

Lambda上ではnode 6.10が動かせる。しかしasync/awaitはnode 7.6からじゃないと使えない。だからbabelが必要となる。めんどい・・。apexでwebpackを使う例があるので参考になりそう。

たぶん開発はほとんどリニューアルみたいになりそう。でも、言語は同じjsなので再利用できる部分は多そう。ついでにデザインも刷新しようかな。AWSに慣れているので学習コストはそこまで大きくないと思われる。

見込めるメリットとしてはまずサイトの読み込みスピードが速くなること。主に負荷を気にしなければならないところがデータベースだけになること。サーバ代はもともと安いのでそんなに変わらなさそう。

以上、サーバレス化に向けての調査記録でした。

Read more

Claude Codeをtmuxのポップアップウィンドウで継続的に走らせる方法

Claude Codeをtmuxのポップアップウィンドウで継続的に走らせる方法

💡本記事は英語ブログの日本語訳です。 どうも、TAKUYAです。 AIコーディングでは専らClaude Codeを使っています。最初はtmuxでターミナルの右側にペインを分割して使っていたのですが、幅が狭すぎてメッセージやdiffがまともに表示できず、使いづらかったです。 <Prefix>+zでペインを最大化すればいいのですが、毎回やるのは面倒でした。 そこで、ポップアップウィンドウでClaude Codeを起動するようにしました。キーバインドを押せばセッションが開き、閉じてもバックグラウンドで動き続けるので、すぐに再開できます。 この記事では、それを実現するためのtmuxの設定方法を紹介します。 動画で見る(英語): ポップアップウィンドウはサブプロセスを維持できない tmuxのdisplay-popupコマンドを使うとポップアップウィンドウを表示でき、ちょっとしたツールにすぐアクセスするのに便利です。 僕はlazygitでgitの状態をサッと確認するのに使っています: bind -r g display-popup -d '#{pane_current_path}'

By Takuya Matsuyama
Keychron K2 HEを無刻印化する手順

Keychron K2 HEを無刻印化する手順

どうもTAKUYAです。KeychronさんにK2 HEをお願いしたら音速で送ってくれたので、無刻印化してみました。どうやったのか過程をシェアします。 Unboxing 上はKeychron Q1です。これは3年間ぐらい使ってきました。キーキャップが若干くたびれていますね。でも問題なく今まで使えていました。そろそろ飽きてきたので新しいキーボードを試したいと思い、前から気になっていたK2 HEを試すことにしました(写真下)。 Amazon | 【国内正規品】Keychron K2 HE ラピッドトリガー ワイヤレス カスタムキーボード、ホールエフェクトGateronダブルレール・マグネットスイッチ、2.4GHz・Bluetooth無線対応、QMKプログラム可能、アルミ+ウッドフレーム、USレイアウト、RGBライト、Mac Windows Linux対応 (ブラック) | Keychron | パソコン用キーボード 通販【国内正規品】Keychron K2 HE ラピッドトリガー ワイヤレス カスタムキーボード、ホールエフェクトGateronダブルレール・マグネットスイッチ、

By Takuya Matsuyama
ノート駆動AIコーディング術の提案

ノート駆動AIコーディング術の提案

どうもTAKUYAです。みなさんはAIエージェントを普段のコーディングで活用されていますか。ちょっと面白いワークフローを思いついたのでシェアします。それは、ノート駆動のエージェンティック・コーディング・ワークフローです。最近Claude Codeのプランモードを使っていたら、ターミナル内で生成されたプランを読むのが辛かったんです。それで、じゃあMarkdownノートアプリであるInkdropをプランの保存先バックエンドとして使えば解決するんじゃないかと思って、 試してみました。こちらがそのデモです(英語): こちらがClaude Codeの設定ファイル群です: GitHub - inkdropapp/note-driven-agentic-coding-workflow at devas.lifeComplete Claude Code configuration collection - agents, skills, hooks, commands, rules, MCPs. Battle-tested configs from an Anthropic hackathon w

By Takuya Matsuyama
2025年個人開発活動の振り返り

2025年個人開発活動の振り返り

どうもTAKUYAです。もう1月も半ばに差し掛かっているけど、2025年の自分の活動の振り返りをしたい。去年を一言で言うなら、本厄を満喫した年だった。 厄年とは、人生の節目にあたって、体調不良や災難が起こりやすいと経験的に言われる年齢のこと。数え年で42歳、確かにもう若さに任せた事は出来ないなと痛感した年だった。(ところであなたの国ではこのような年はありますか?) 夏に体調を崩して2~3ヶ月動けなくなった 暖かくなり花粉が飛び出した頃に、持病のアトピーが悪化しだして、まともに生活出来なくなってしまった。酷さで言うと、2019年に脱ステした時と同じぐらい。 脱ステに無事成功したから、この地獄は二度と味わうことはないだろうと高を括っていたが、まさか7年後にまた味わうとは思わなかった。当時の独身時代と違い、妻も子供もいる中で、周りに多大な迷惑をかける事となった。夏の子供との思い出が全く無い。悲しい。 現在はQoLもほとんど元の状態まで復活できた。写真を撮って症状の変化を記録したので、機会があればシェアしたい。食事療法など色々試したが、結局歩くのが一番自分に効いた。それ以来、一日一万歩

By Takuya Matsuyama