Closed19

個人開発02：ノウハウやメモなど

NekoAllergyNekoAllergy

ひとまず概要

最初に

  • 個人的なメモをオープンにする試み
  • 間違っている点もあるかもなので、正確性は保証しない

技術スタック（開発状況によって変わります）

  • Next.js 15.5.3 + TypeScript
  • TailwindCSS 4 for styling
  • shadcn/ui for UI components
  • Material Icons (CDN)
  • Firebase Authentication & Firestore
  • Hono
  • Gemini AI API 統合
  • Cloudflare workers
  • レスポンシブデザイン
NekoAllergyNekoAllergy

Cloudflare Workers関連のメモ

概要

  • Cloudflare Workersを使ってみたい
  • 動機は安い＆早いらしいから
  • 個人開発の初期段階において安さは正義。ということで勉強も兼ねて使ってみたい。

メモ

  • cloudflareとnodejsの仕組みは根本的にいろいろ違う
  • そのため、これまで普通にNextjsで実装して機能して、デプロイできていた普通のことができない
  • 何がどう違うのか、何を変換する必要があるのかを調べる必要あり

Edge環境

  • 基本：https://zenn.dev/ak/articles/a2bd28a258b615
  • Cloudflare WorkersはV8 isolate環境をベースとしている
  • V8：Javascript実行エンジン。ChromeやNodejsでも使用されている。
  • つまりNodeと比較するなら、エンジンは同じだけど、「Isolate」と呼ばれる機能を使う点が異なる

isolate機能のコンテナとの違い

  • コンテナ
    • カーネルレベルでの分離技術
    • cgroups（リソース制限）とnamespaces（名前空間）を使用
    • プロセス、ファイルシステム、ネットワークをOS機能で分離
  • V8 Isolate（アプリケーションレベル）
    • JavaScript エンジン内部での分離技術
    • C++で書かれたV8エンジンが提供するプロセス内分離
    • 単一のプロセス内に複数の独立したオブジェクト空間とイベントループを作成

違いとかできないこと

  • NextjsのAPIルート（app/api）は使えない
    • API機能が必要な場合は、Cloudflare Functionsという別のサービスと併用する必要あり
    • Next.jsのAPI Routesは Node.jsランタイム を前提として設計されている
    • fs、http、cryptoなどのNode.js固有のAPIが使用可能
    • 一方、Cloudflare Workersは V8 isolateベース のエッジランタイムで動作
    • Node.jsのネイティブAPIが使用できないため、APIルートは使用不可
  • Nextjsの動的ページ
    • projects/[id]のような動的ページは変換が必要
    • 変換時に使用されるのが、「OpenNext Cloudflareアダプター」と呼ばれるnpmパッケージ
NekoAllergyNekoAllergy

09/28 やったこと

  • firebase authとfirestoreの設定と組み込み
  • 所有ドメインをcloudflareに移管
  • cloudflare調査
  • 曖昧だったPromise処理の調査
NekoAllergyNekoAllergy

メモ：GCPの謎課金

  • GCPに毎日107円ずつ課金されている理由がわかった
  • 以前CloudRunで設定した予約済み静的IPアドレス（RESERVED状態）が残ったままで、ずっと課金され続けていたっぽい↓
確認コマンド
$ gcloud compute addresses list
結果
NAME                   ADDRESS/RANGE   TYPE      PURPOSE  NETWORK  REGION  SUBNET  STATUS
simple-blog-global-ip  34.117.6.124    EXTERNAL                                    RESERVED
tech-master-global-ip  34.107.239.187  EXTERNAL                                    RESERVED
travelit-global-ip     34.149.78.137   EXTERNAL                                    RESERVED

  • 課金の欄をみても、compute engineとして計上されていたので、原因がわからなかった

  • なので、CloudRunはアクセス0でもこれくらい課金されてしまうものなんだと勝手に思ってしまっていた。。

  • 削除方法↓

削除
$ gcloud compute addresses delete simple-blog-global-ip --global

The following global addresses will be deleted:
 - [simple-blog-global-ip]

Do you want to continue (Y/n)?  Y

Deleted [https://www.googleapis.com/compute/v1/projects/pid-my-portfolio-project/global/addresses/simple-blog-global-ip].
再度リスト確認
$ gcloud compute addresses list                                 
Listed 0 items.
  • これで課金されない、はず、、？
NekoAllergyNekoAllergy

09/30やったこと

  • プロジェクト情報とシーン情報をfirebaseと連携
  • 仕事終わりは残業で疲れて死亡
  • gcpでの課金が正しく減っていることを確認
NekoAllergyNekoAllergy

10/1やったこと

  • shadcn io発見、めっちゃいい、mcp導入
  • loading表示の修正
  • firestore情報の整合性保つ
NekoAllergyNekoAllergy

メモ

UIに関しては、下手なことはやらずにshadcnにまかせる

UI

AIロジック

プロンプト

1

demoページを下記に沿って修正：

2

3

LPを下記のように修正：

4

ヘッダに現在プロジェクトを記載
メイン領域を広くとる
ヘッダは　https://www.shadcn.io/components/navbar/navbar-06　参考

5

ギャラリー画像を変更：

NekoAllergyNekoAllergy

10/2やったこと

  • firebase ai logicへの置き換え：nano bananaが使えず断念（リージョンの問題？）
  • shacn.ioのImageZoom実装
  • claude codeのリミットが来て断念...
NekoAllergyNekoAllergy

メモ

  • UI

    • Nextjsのloading.tsxに修正
    • lucide-reactに統一
    • 画像生成時のローディングをshadcn.ioのSpinnerのellipsisに修正
    • projectsページの各プロジェクトサムネにshadcn/uiの　<AspectRatio ratio={16 / 9}>　を適用

  • リファクタ

    • 型はすべてlib/typesに集約
    • lib/services/clientDataService.ts　と　apiService.tsを統合して、シンプルで見やすい形式にリファクタして。
    • apiService.tsのリファクタ。後方互換性とかを無くしてシンプルに。
    • import { toast } from 'sonner';って正しい？　@/components/ui/は不要なの？
    • projects/[id]/layout.tsx　必要？

  • projects/new/page.tsx

    • 新規プロジェクト作成を本番用に修正。
    • 実際にfirebaseと連携してプロジェクト作成できるように。
    • shadcn.ioのimage drop使用
    • shadcn/uiの　<AspectRatio ratio={16 / 9}>　を適用

  • 画像生成

    • ギャラリー画像はapple-cards-carouselにしてみる？
    • AIに入力する画像は、DnDでリファレンス欄に入れて分かるように。
    • 画像それぞれに命名/編集（人物1/背景1/その他1）
    • テキストで 「@person1 を」とか指示できるようにする？
    • 分かりやすいUIにしたい
    • 複数画像入力に対応。ひとつ前に生成した画像があれが無条件でリファレンス。

  • 画像保存

    • firebaseページでfirebase storageの検証
    • projects/newに派生
    • それ以外のページに派生

  • 使用クレジット

    • マイページに表示、userに紐づけ
    • 画像生成ごとにカウントアップ

  • 将来機能

    • project作成時のコンテ叩き作成のLLM壁打ち機能。　projects/[id]/llm　とかを設ける？
    • コンテ共有機能。URLで。
    • 閲覧ページを別に設ける？　projects/[id]/view

  • その他

    • chrome-devtool-mcp導入
NekoAllergyNekoAllergy

10/3やったこと

  • やることリスト洗い出し（上記めものとおり）
  • 華金飲み会🍺
NekoAllergyNekoAllergy

10/4やったこと

  • 画像のfirebase storage連携
  • 各種レイアウトやUI/UXの調整（ギャラリー画像16:9化、newページの変更、Spinner統一）
  • 処理部分（apiService.tsなど）のリファクタ
NekoAllergyNekoAllergy

10/6やったこと

  • プロジェクト対コンテの表示バグ修正
  • ヘッダ周りの修正
  • 使用クレジット機能実装
NekoAllergyNekoAllergy

10/12やったこと

  • 簡易プロンプトの作成
  • 各種スクリプト（gcloudセットアップ/cloud runデプロイ/ドメインマッピング/stripe設定）
  • cloud runデプロイ
  • 雰囲気を追加
NekoAllergyNekoAllergy

10/13やったこと

  • クレジット機能（表記、処理、上限、リセット）
  • LP修正
  • サポートページ実装
NekoAllergyNekoAllergy

10/14やったこと

  • お問い合わせフォームと管理者ページの追加
  • cloud runアプリをcloudflareへドメインマップ（途中）
このスクラップは25日前にクローズされました