はじめに
最近、RustとNextjsを学習したくて簡単な日報管理アプリを作ってみました。
まだ完成というわけではないですが、備忘録的な目的で共有しようかなと思います。
現時点ではまだインフラ含め、叩き台を作ったといった感じです。
途中経過でもちょくちょくアウトプットして開発が続けられるようにする目的で投稿します。
目次
機能概要
基本的な認証機能と日報の新規登録・編集・削除機能があります。
ログイン画面は以下のようになっています。
まだshadcnをそのまま使ったUIしかないですが。
メールアドレスとパスワードでの認証に加えて、GithubでのOAuth認証機能も実装しました。
ログインしたら左サイドバーに作成した日報一覧が年月日で表示されます。
サイドバーの月をクリックしたら展開して日が表示され、日をクリックすると右側のコンテンツ領域に日報が表示されます。
日報はそのまま編集できるようになっており、markdown形式で編集可能です。
もちろん、コードハイライトも書くことが可能となっています。
使用技術
| カテゴリ | 技術 |
|---|---|
| フロントエンド | Next.js, TypeScript, Tailwind, Prisma, Authjs, tiptap |
| バックエンド | Rust, Axum, sqlx |
| データベース | Supabase (PostgreSQL) |
| インフラ | Vercel, Cloud Run, Artifact Registry, Cloud Build |
| CI/CD | GitHub Actions |
構成
以下の構成でデプロイしました。
- フロントエンド
デプロイ先はVercelでNextjsを使ってフロントを作っています。
ちなみにデザインパターンはFSDを採用しています。
(参考) https://feature-sliced.github.io/documentation/ja/
認証周りはAuthjsで作りました。
PrismaでSupabaseの認証データを操作します。
Prismaは基本的にバックエンド側(sqlx)で作ったschemaの取り込みをするようにしており、prisma側でschemaを作成して反映することはしていません。
エディター機能はtiptapを使用して実装しています。
(参考) https://tiptap.dev/
- バックエンド
API側はAxum(Rust)を使っています。
CloudRunでRustを動かしています。
リポジトリにpushされたらGithub ActionsでCI/CDで以下が回ります。
- Cloud Build (コンテナイメージ作成)
- Artifact Registry (コンテナイメージ管理)
- CloudRun (API)
DBスキーマ
テーブルは以下で構成されています。
DBと連携するadapterとしてPrismaを使用しています。
以下はAuthjsのデフォルトの指定モデルとなっています。
また、今回はjwt方式を使っているのでsessionsはありません。
verification_tokensは現時点では使っていないのですが、ないとエラーが発生したので追加しています。
- reports: 日報
- users: ユーザー情報
- accounts: 外部プロバイダーの認証情報
- verification_tokens: 認証用トークン
(参考) https://authjs.dev/getting-started/adapters/prisma
終わりに
NextjsとRustで日報管理ツールを作ってみました。
作り込みはまだまだ足りていないので、これからデザイン部分ももう少し凝ったものにしていこうと思います。
ちゃんとこういうのを最後まで完成させるという経験がないので、しっかり最後まで完成させてちょくちょく進捗的なものを投稿しようかなと思います。