タンパク質シミュレーションのデモを大学祭でした話

概要

大学祭でタンパク質シミュレーションのデモをした時の技術について記録に残しています。

タンパク質シミュレーションの詳細は分子動力学シミュレーションを参考にして欲しいのですが、簡単に言えば、運動方程式F=maを原子ひとつひとつで数値的に計算することで、原子の集合体としてのタンパク質の性質を調べることができる手法になります。

また、タンパク質は20種類のアミノ酸が紐のようにつながってできていて、紐が曲がりくねって構造をとることで機能を持っています。そのため、タンパク質は20種類のアミノ酸の配列で表現できます。

今回は、そんなタンパク質シミュレーションを身近に感じて欲しいという思いで、web上でアミノ酸の配列を作成して作ったタンパク質の動きを動画で観察できるサービスを作成しました。

使用した技術

• frontend
• backend
• gromacs
• その他

の4つに分けて紹介します
gromacsは上記のタンパク質シミュレーションをGPUを使うことで高速に行えるプログラムです。

frontend

React Router

React Router v7を利用しました。

他の候補にはNext.jsとRemixがありました。Next.jsは以前チュートリアルをやったことがあるのですが、多機能で高度なことをできる一方で学習コストが高いため学生が片手間でするには難しく、RemixやReact RouterはWeb標準を学ぶのに良いらしいのでNext.jsは採用しませんでした。
また、Remixは最近React Routerと合流したので正直どちらでも良かったのですが、以前Remixを使ったので今度はReact Routerにしようという単純な理由で決めました。
また、RemixはReact Routerに移行することを推奨しているらしいので今後もReact Routerを利用しようと思っています。

感想としては、下に挙げたようなLoaders→Component→Actionのサイクルがわかりやすく、clientで実行するcomponentと、サーバーで実行するloaders/actionで書きやすかったです。

Mantine

React UI libraryはMantineを選びました。
UI libraryは色々あるので、自分の好きなものを選ぶと良いと思います。

NGL

NGLはweb上でタンパク質の描画をすることができます。

backend

pythonで書きました

FastAPI

FlaskとFastAPIを比較したのですが、以前Flaskを利用したことがあるので、今回はFastAPIにしました。
自動でAPIドキュメントを生成してくれる点が魅力的でした。

詳細な説明は【Python】FastAPI vs Flask: 負荷試験による性能比較を参照してください。

celery

Celeryは非同期タスクキューイングライブラリです。
大まかには、下の2つのプロセスが存在しており、Main processがタスクの作成をして、Worker processが重い計算を実行します。

• Main process
• Worker process

今回は、frontend/backendを置くサーバーと計算用サーバーを分けたので、celeryを使うことで簡単に2つのサーバーを連携できました。

また、celeryのモニタリングツールであるceleryも導入しました。

SQL Model

SQL ModelはSQL alchemyのラッパーで、より簡単に扱えるようになっています。
FastAPIの作者が制作しているので、FastAPIとの連携も簡単です。
sqlite.dbをbackendのローカルディレクトリに作成して、スコア等を保存していました。

gromacs

dockerfileを使ってgromacs環境を作成して、計算用サーバーが複数台になっても簡単に同じ環境を使えるようにしました。
結局計算用サーバーは1台だけですが、それでもdockerにすることで必要なパッケージが変更になっても簡単に修正できました。

その他

minio

計算結果のうち重いファイルを保存するためにminioを利用しました。

upstash

redis等を提供しています。2日間で$2程度の課金でした。
最初はredisをローカルで提供していたのですが、cloudflareを使ってアクセスしている関係でポートの指定がうまくできず、解決する時間もなかったので適当に契約しました。

github aciton

全てのコードを1つのレポジトリに入れて、github runnerを使うことでpushするだけで全てのサーバーに自動でデプロイするようにしました。

サーバーは2つあり、両方とも私物を利用しました。

• CPUサーバー
  • frontend
  • backend
  • minio
• GPUサーバー
  • gromacs

github self hosted runnerをCPUサーバーとGPUサーバーに導入すると良かったです。
また、frontend/backkend/gromacs全てdockerのコンテナとして起動していたため、GPUサーバーでbuildしてghcr.ioにpushしてから、CPUサーバーとGPUサーバーでpullしてdocker compose up -dで起動しました。

cursor

最近、cursorが学生に1年無料のキャンペーンをしていたので、せっかくなのでcursorでAIに開発してもらいました。

基本的に、cursorに書いてもらう→プロンプトで修正→それでも無理なら手で修正の順でやればいい感じにできました。

特にfrontendの見た目を作る部分は、私がfrontendに不慣れなところがあってcursorがかなり強かったです。