Zenn
Open6

Headless-CMSを自作する

Stead08Stead08

とりあえず初期段階のディレクトリ構造を挙げておく

.
├── backend
│   ├── Cargo.lock
│   ├── Cargo.toml
│   ├── src
│   │   └── main.rs
│   └── target
│       ├── CACHEDIR.TAG
│       └── debug
└── frontend
    ├── README.md
    ├── components
    │   └── Button.tsx
    ├── deno.json
    ├── dev.ts
    ├── fresh.gen.ts
    ├── import_map.json
    ├── islands
    │   └── Counter.tsx
    ├── main.ts
    ├── routes
    │   ├── [name].tsx
    │   ├── api
    │   └── index.tsx
    ├── static
    │   ├── favicon.ico
    │   └── logo.svg
    └── twind.config.ts
Stead08Stead08

開発の順序的には基本バックエンド開発→フロントエンド開発の順でやっていこうと思う。
フロントはバックの処理をうまく表示するというの思想で。多分開発しながら方針は変わるだろうし、それはそれでいい勉強だと思ってやっていく。

プロダクトコンセプト

  • 各処理のコア部分はRustで記述する
  • フロントエンドもできるだけ軽量に動くものにする
  • サーバーレスで開発する

コンセプトをもとに技術選定

  • デプロイ先をバックエンドはShuttle, フロントエンドはdeno deployを採用
    • これでサーバーレスで運用できるはず。バックエンドもdenoランタイムを用いてTSで記述することもできなくはないが、個人的にRustを用いてバックエンド開発がしたいため、今回はスキップ
  • フロントエンドのフレームワークはFreshを採用。
    • 最近よく使っているフレームワークでdenoの公式フルスタックウェブフレームワークであることから軽量かつ開発が盛ん。
Stead08Stead08



サーバーサイドのユーザー認証機能の実装が終わった。
よくわからんバグにあったけど、クレートのバージョンを上げたら治った。
パスワードをハッシュ化して保存するという基本的なところから学べてよかった。
明日はバイトなので、バイト中はHeadless-CMSの根幹機能をどう構築か考えながらバイトする。

Stead08Stead08

使用技術一覧

  • 言語
    • Rust
    • TypeScript
  • フレームワーク
    • Fresh
    • Axum
  • データベース
    • PostgreSQL
  • ORM
    • SeaORM
  • フロント周り
    • Twind
    • wasmpack
    • deno
  • コンテナ
    • docker
  • デプロイ先
    • Shuttle
    • Deno Deploy
  • APIテスト
    • Insomnia
  • 開発支援
    • Github Copilot
    • WebStorm
    • Notion