TBD.
generative AI の時代では、GPT、Claude、Deepseek などの大規模言語モデル、Cursor や Trae などの開発ツールのおかげで、コード作成時に LLM を使用するにせよ、アプリに LLM を統合するにせよ、アプリを構築するハードルが大幅に下がっています。Web は優れたアプリ配布チャネルであり、数分で世界中のユーザーに自分の製品を届けることができます。そのため、Web アプリをいかに優雅に開発・デプロイし、最小限の認知負荷で最高の実践を実現するかが重要になってきています。
しかし実際のところ、今でも独立開発者の中には Vercel や Railway を知らず、EC2 のようなサーバーでデプロイを行っている人がいます。Tailwind + shadcn/ui のような、より流暢で柔軟性の高いコンポーネントライブラリを使用していない人もいます。多くの初心者はバックエンドが何なのかを理解しておらず、FastAPI のようなフレームワークを発見または試していないため、バックエンドは非常に複雑で難しいと思い込んでいます。
しかし、明らかにそうではありません。これらはすべて情報格差の問題に過ぎません。そこで、初心者の方々への参考として、短い記事を書きたいと思います。
パス選択と紹介
数多くの組み合わせの中から、以下のように推奨します：
- Web 開発：Next.js
- Web デプロイ：Vercel
- バックエンド開発：FastAPI
- バックエンド デプロイ：Railway
まず簡単に説明すると、Next.js は現在最も主流なフロントエンドフレームワークの 1 つです。ChatGPT や多くの AI Web アプリは Next.js で開発されています。非常に統合された開発フレームワークと対応するエコシステムを提供し、すぐに完全な Web サービスを起動できます。サーバーサイドレンダリング、SEO（検索エンジン最適化）、ルーティングシステムなどが標準で搭載されています。Next.js の背後には React.js があり、React や Vue のようなフロントエンド UI エンジンを使用する利点は、Web UI の開発モードを大幅に簡素化し、エコシステムが非常に豊富なことです。
Next.js の Web プロジェクトができたら、Vercel は数回のクリックで残りのすべてを処理してくれます。git リポジトリを通じて自動更新し、ドメイン、CDN、SSL 証明書、負荷分散、ログなどを処理し、Web サイトを世界中のサーバーにデプロイして、グローバルにアクセス可能で、決してダウンしないようにしてくれます。
バックエンドはフロントエンドと同様、好みが分かれる分野です。Next.js には API サーバーが組み込まれており、サーバーサイドレンダリングと非常にうまく統合できます。私も多くのプロジェクトで Next.js のバックエンドを直接使用していますが、初心者にとっては少し分かりにくく、原理を理解せずに使うのは難しい面があります。そのため、ここでは Python の FastAPI を使用してバックエンド開発を始めることをお勧めします。これも非常によく設計されたライブラリで、私が数多くの異なる言語のバックエンドライブラリを学んだ中で最も気に入っているものです。FastAPI は最もシンプルな方法で、初心者がバックエンド開発の基本原理を素早く理解できるよう支援します。
バックエンドのデプロイも同様に課題です。サーバーを借りて運用したり、クラウド関数を使用したりする従来のソリューションは、メインのビジネスロジック以外の開発に多大な時間と労力を必要とします。Railway はバックエンド界の Vercel であり、同様に非常にシンプルで使いやすいデプロイ方法を提供し、継続的インテグレーション/継続的デプロイメントを通じてバックエンドをグローバルにデプロイできます。
チュートリアル
以下にステップと詳細な解説を示します。
フロントエンド部分
- Node.js / npm のインストール
- yarn / pnpm / bun のインストール
- Next.js プロジェクトの作成
- Next.js プロジェクトを GitHub にアップロード
- Vercel で Next.js プロジェクトをデプロイ
バックエンド部分
- Python / uv のインストール
- プロジェクトの作成と FastAPI のインストール
- ブラウザと Apifox で API をテスト
- FastAPI プロジェクトを GitHub にアップロード
- Railway で FastAPI プロジェクトをデプロイ
- Next.js でバックエンドデータを使用してレンダリング
フロントエンド部分
1. Node.js / npm のインストール
Node.js はフロントエンド開発の JavaScript ランタイムで、npm は Node.js のパッケージマネージャーです。これらはフロントエンド開発に不可欠なツールです。
2. yarn / pnpm / bun のインストール
npm の依存関係のインストール速度が遅い、進捗表示が良くないなどの理由から、yarn / pnpm / bun という 3 つの代替品が市場に登場しました。これらはより優れたパフォーマンスや依存関係インストールのローカルキャッシュを持っており、ますます多くの人々がこれらのサードパーティパッケージマネージャーを選択しています。以下では pnpm を例として使用します。
3. Next.js プロジェクトの作成
まず、Next.js の公式スキャフォールドを使用してプロジェクトを作成します。
npx create-next-app@latest
プロジェクトは npm をパッケージマネージャーとして使用しているため、プロジェクト内の package-lock.json ファイルを削除し、pnpm で依存関係をインストールする必要があります。
pnpm install
インストールが完了したら、以下のコマンドでプロジェクトを起動します。
pnpm dev
4. Next.js プロジェクトを GitHub にアップロード
まず GitHub アカウントをお持ちでない場合は、GitHub 公式サイトでアカウントを登録し、プロジェクトの同期を管理するための GitHub Desktop をダウンロードします。
GitHub Desktop で GitHub アカウントにログインした後、File -> New Repository をクリックして新しいリポジトリを作成し、先ほど作成した Next.js プロジェクトを選択して、Publish repository をクリックしてプロジェクトを公開します。
5. Vercel で Next.js プロジェクトをデプロイ
まず、Vercel 公式サイトでアカウントを登録し、New Project をクリックして新しいプロジェクトを作成します。Import Git Repository を選択し、先ほど作成した GitHub リポジトリを選択して、Import をクリックしてプロジェクトをインポートします。
プロジェクトのインポートが完了すると、Vercel はフロントエンドプロジェクトのパッケージングを開始します。パッケージングが完了すると、Vercel は自動的にドメインを割り当てます。Settings -> Domains でドメインを変更できます。他の人が使用していない .vercel.app ドメインを指定できます。
バックエンド部分
1. Python / uv のインストール
バックエンドは Python + FastAPI で開発します。uv は新しい高性能 Python パッケージマネージャーで、Python バージョンのダウンロードと管理もサポートしているため、uv を使用して Python をインストールします。
2. プロジェクトの作成と FastAPI のインストール
FastAPI 公式サイトのガイドに従ってインストールします。
3. ブラウザと Apifox で API をテスト
FastAPI を起動後、ブラウザで http://localhost:3000 を開くと、先ほどの Python ファイルに記述した Hello, World! が表示されます。これは、ブラウザがドメインにアクセスする際に GET リクエストを送信し、FastAPI がそれを受け取って JSON オブジェクトを返し、ブラウザがその JSON オブジェクトを Hello, World! としてレンダリングするためです。
GET リクエスト以外の RESTFUL リクエストをデバッグするために、Apifox を使用して FastAPI で作成した API をテストできます。
Apifox で FastAPI の /openapi.json を自動インポートするように設定すれば、手動でインターフェースを作成する手間を省くことができます。
4. FastAPI プロジェクトを GitHub にアップロード
同様に、FastAPI プロジェクトを GitHub にアップロードして、Railway デプロイへの接続を準備します。
5. Railway で FastAPI プロジェクトをデプロイ
Railway は Python + FastAPI のテンプレートを提供しており、ワンクリックでデプロイできますが、uv とカスタムポートを使用しているため、Railway が正しくバックエンドコードをデプロイ・実行できるようにコードを修正する必要があります。
6. Next.js でバックエンドデータを使用してレンダリング
ローカルとオンラインでデプロイされたバックエンドができたら、Next.js でバックエンド API を呼び出して、サーバーサイドデータレンダリングを試すことができます。
クライアントサイドのデータレンダリングを重視する場合は、swc を使用して開発することができます。