【実践】ローカルPCでの開発と Xserver へのデプロイ手順 (Next.js + FastAPI)

ローカルPCでの開発と Xserver へのデプロイ手順 (Next.js + FastAPI)
1. ローカル開発環境のセットアップ
2. Xserver のサブドメイン設定
3. Next.js を Xserver にデプロイ
4. FastAPI を VPS or AWS Lambda にデプロイ
5. フロントエンドとバックエンドの接続
6. 自動デプロイ (GitHub Actions)
7. まとめ
次のステップ

ローカルPCでの開発と Xserver へのデプロイ手順 (Next.js + FastAPI)

あなたの開発環境で、フロントエンド (Next.js SSG) を Xserver のサブドメイン に、バックエンド (FastAPI) を 外部 VPS または AWS Lambda にデプロイする方法を詳細に説明します。

1. ローカル開発環境のセットアップ

① 必要なツールをインストール

まず、開発に必要なツールを準備します。

Node.js 18.x 以上（Next.js の実行環境）
Python 3.9+（FastAPI の実行環境）
PostgreSQL（DB サーバー）
VS Code（開発環境）
Xserver の管理画面にログイン

Windows の場合（WSL を使う）

WSL (Windows Subsystem for Linux) を有効化して、Ubuntu をインストールすると開発しやすい。

wsl --install

② Next.js プロジェクトを作成

mkdir ai-blog-writer
cd ai-blog-writer
npx create-next-app@latest frontend

開発用サーバーを起動

cd frontend
npm install
npm run dev

→ http://localhost:3000 でアクセス

③ FastAPI プロジェクトを作成

cd ..
mkdir backend
cd backend
python -m venv venv
source venv/bin/activate  # Windows の場合: venv\Scripts\activate
pip install fastapi uvicorn psycopg2

`main.py` を作成

from fastapi import FastAPI

app = FastAPI()

@app.get("/")
def read_root():
    return {"message": "Hello from FastAPI!"}

ローカルサーバーを起動

uvicorn main:app --reload --host 0.0.0.0 --port 8000

→ http://localhost:8000 で FastAPI にアクセス

2. Xserver のサブドメイン設定

① サブドメインを追加

Xserver の管理画面 にログイン
「サーバー管理」→「ドメイン」→「サブドメイン設定」
ai.neumannlab.online を追加
public_html/ai/ が作成される

3. Next.js を Xserver にデプロイ

① Next.js を静的サイト化

Xserver は Node.js を直接動かせない ので、Next.js を SSG（Static Site Generation）で出力する。

cd frontend
npm run build
npm run export

→ out/ フォルダが作成される

② SFTP で Xserver にアップロード

Xserver の SFTP 情報 を確認
- 「サーバーパネル」→「FTPアカウント設定」
- ftp.neumannlab.online
- ユーザー名・パスワードを確認
SFTP クライアントでアップロード
- FileZilla や WinSCP で public_html/ai/ に out/ の中身をアップロード

→ https://ai.neumannlab.online にアクセスし、Next.js が表示されるか確認。

4. FastAPI を VPS or AWS Lambda にデプロイ

VPS (推奨)

Ubuntu サーバーを準備
FastAPI をデプロイ

scp -r backend/ user@your-vps:/home/user/backend
ssh user@your-vps
cd backend
pip install -r requirements.txt
uvicorn main:app --host 0.0.0.0 --port 8000 --reload

nginx でリバースプロキシ
- ai.neumannlab.online から API を backend.neumannlab.online にルーティング

AWS Lambda (Serverless)

AWS API Gateway + Lambda を設定
FastAPI をデプロイ
Lambda のエンドポイントを Next.js に接続

5. フロントエンドとバックエンドの接続

Next.js 側の .env.local に API の URL を設定

NEXT_PUBLIC_API_URL=https://backend.neumannlab.online

そして fetch でデータ取得：

const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/`);
const data = await res.json();
console.log(data);

6. 自動デプロイ (GitHub Actions)

Xserver には FTP しか使えない ため、GitHub Actions で自動デプロイする。

name: Deploy to Xserver

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: Install Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18

      - name: Build Next.js
        run: |
          npm install
          npm run build
          npm run export

      - name: Deploy via FTP
        uses: SamKirkland/FTP-Deploy-Action@v4.3.4
        with:
          server: ftp.neumannlab.online
          username: ${{ secrets.XSERVER_USER }}
          password: ${{ secrets.XSERVER_PASS }}
          local-dir: ./out/
          server-dir: /public_html/ai/

GitHub Secrets に Xserver の FTP ユーザーとパスワードを登録すれば、自動デプロイが可能。

7. まとめ

✅ ローカル開発

Next.js (SSG) を http://localhost:3000
FastAPI を http://localhost:8000

✅ Xserver にデプロイ

ai.neumannlab.online に Next.js (SSG)
backend.neumannlab.online に FastAPI (VPS or AWS)

✅ 自動デプロイ (GitHub Actions + FTP)

main ブランチに push すると Xserver にデプロイ

次のステップ

FastAPI に PostgreSQL 接続 を追加
Next.js で 記事の投稿・表示機能 を作成
WordPress の API から記事を取得する機能を追加

これで、Xserver + VPS で AI Blog Writer を開発・デプロイできます！ 🚀