web-app-builder

Web アプリビルダー

自動 SSL とカスタムサブドメインを利用して、Web アプリをクラウドに構築・デプロイできます。

---

対応フレームワーク

フレームワーク	ビルドコマンド	出力ディレクトリ	備考
React (Vite)	npm run build	dist/	SPA、_redirects が必要
React (CRA)	npm run build	build/	SPA、_redirects が必要
Vue (Vite)	npm run build	dist/	SPA、_redirects が必要
Astro	npm run build	dist/	デフォルトで静的
Next.js (static)	npm run build	out/	output: 'export' が必要
Vanilla HTML	なし	.	HTML/CSS/JS ファイルのみ
Svelte	npm run build	build/	SPA、_redirects が必要

サーバーレスバックエンドのサポート

種類	場所	アクセス URL
Netlify Functions	netlify/functions/	/.netlify/functions/{name}
Edge Functions	netlify/edge-functions/	netlify.toml で設定

---

行うべきこと

1. デプロイ前に必ずビルドする - まずフレームワークのビルドコマンドを実行してください
2. ルートに index.html を含める - これはエントリーポイントであり、必須です
3. SPA には _redirects を追加する - React/Vue アプリでは、クライアントサイドルーティングに必要です
4. 相対パスを使用する - すべてのアセットパスは相対パスにしてください（/assets/ ではなく ./assets/）
5. まずローカルでテストする - デプロイ前にビルドをプレビューしてください
6. ビルドサイズを小さく保つ - 画像を最適化し、コードを圧縮してください

行ってはいけないこと

1. node_modules/ をデプロイしない - ビルド出力のみをデプロイしてください
2. ソースファイルをデプロイしない - src/ ではなく dist/ をデプロイしてください
3. localhost の URL をハードコードしない - 相対パスまたは環境変数を使用してください
4. .env ファイルを含めない - シークレットには Netlify の環境変数を使用してください
5. ビルド手順を省略しない - 生のソースは動作しません
6. サーバーサイドレンダリングを使用しない - 静的エクスポートのみがサポートされています（SSR は不可）

---

ビルド方法

React (Vite)

# Install dependencies
npm install

# Build for production
npm run build

# Output: dist/

SPA のルーティング用に _redirects を追加します：

echo "/*    /index.html   200" > dist/_redirects

React (Create React App)

npm install
npm run build

# Output: build/

_redirects を追加します：

echo "/*    /index.html   200" > build/_redirects

Vue (Vite)

npm install
npm run build

# Output: dist/

_redirects を追加します：

echo "/*    /index.html   200" > dist/_redirects

Astro

npm install
npm run build

# Output: dist/

Astro は静的 HTML ページを生成するため、_redirects は不要です。

Next.js (静的エクスポート)

まず、next.config.js を設定します：

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',  // Required for static export
  images: {
    unoptimized: true  // Required for static export
  }
}

module.exports = nextConfig

次にビルドします：

npm install
npm run build

# Output: out/

Vanilla HTML/CSS/JS

ビルドは不要です。次のファイルがあることを確認してください：

project/
├── index.html    # Required
├── style.css
└── script.js

Svelte (SvelteKit)

静的出力用に svelte.config.js を設定します：

import adapter from '@sveltejs/adapter-static';

export default {
  kit: {
    adapter: adapter({
      pages: 'build',
      assets: 'build',
      fallback: 'index.html'  // For SPA mode
    })
  }
};

次にビルドします：

npm install
npm run build

# Output: build/

---

デプロイ方法

ステップ 1：アップロード URL を取得する

curl -X POST https://api.rebyte.ai/api/data/netlify/get-upload-url \
  -H "Content-Type: application/json" \
  -d '{"taskId": "my-app"}'

レスポンス：

{
  "deployId": "my-app-x7k2",
  "uploadUrl": "https://storage.googleapis.com/...",
  "expiresIn": 3600
}

次の手順で使用するため、deployId と uploadUrl を保存します。

ステップ 2：ビルド出力から ZIP を作成する

# For Vite (React/Vue)
cd dist && zip -r ../site.zip . && cd ..

# For Create React App
cd build && zip -r ../site.zip . && cd ..

# For Next.js static
cd out && zip -r ../site.zip . && cd ..

# For Astro
cd dist && zip -r ../site.zip . && cd ..

ステップ 3：ZIP をアップロードする

curl -X PUT "${uploadUrl}" \
  -H "Content-Type: application/zip" \
  --data-binary @site.zip

ステップ 4：デプロイする

curl -X POST https://api.rebyte.ai/api/data/netlify/deploy \
  -H "Content-Type: application/json" \
  -d '{"deployId": "my-app-x7k2"}'

レスポンス：

{
  "deployId": "my-app-x7k2",
  "url": "https://my-app-x7k2.rebyte.pro",
  "status": "deployed"
}

サイトが公開されました！ SSL は 1～2 分で有効になります。

---

ビルドとデプロイの完全なスクリプト

#!/bin/bash
set -e

# Configuration
PROJECT_DIR="."
BUILD_CMD="npm run build"
BUILD_OUTPUT="dist"
TASK_ID="my-app-$(date +%s)"
API_URL="https://api.rebyte.ai/api/data/netlify"

# Step 1: Build
echo "Building project..."
cd "$PROJECT_DIR"
npm install
$BUILD_CMD

# Add SPA redirects if needed (for React/Vue)
echo "/*    /index.html   200" > "$BUILD_OUTPUT/_redirects"

# Step 2: Get upload URL
echo "Getting upload URL..."
RESPONSE=$(curl -s -X POST "$API_URL/get-upload-url" \
  -H "Content-Type: application/json" \
  -d "{\"taskId\": \"$TASK_ID\"}")

DEPLOY_ID=$(echo $RESPONSE | jq -r '.deployId')
UPLOAD_URL=$(echo $RESPONSE | jq -r '.uploadUrl')

# Step 3: Create ZIP
echo "Creating ZIP..."
cd "$BUILD_OUTPUT"
zip -r /tmp/site.zip .
cd ..

# Step 4: Upload
echo "Uploading..."
curl -s -X PUT "$UPLOAD_URL" \
  -H "Content-Type: application/zip" \
  --data-binary @/tmp/site.zip

# Step 5: Deploy
echo "Deploying..."
RESULT=$(curl -s -X POST "$API_URL/deploy" \
  -H "Content-Type: application/json" \
  -d "{\"deployId\": \"$DEPLOY_ID\"}")

SITE_URL=$(echo $RESULT | jq -r '.url')

echo ""
echo "========================================="
echo "Deployed successfully!"
echo "URL: $SITE_URL"
echo "========================================="

---

Python の完全な例

import requests
import zipfile
import os
import subprocess

API_URL = "https://api.rebyte.ai/api/data/netlify"

def build_and_deploy(
    project_dir: str,
    build_cmd: str = "npm run build",
    build_output: str = "dist",
    task_id: str = None,
    is_spa: bool = True
) -> str:
    """
    Build and deploy a web app.

    Args:
        project_dir: Path to project root
        build_cmd: Build command (e.g., "npm run build")
        build_output: Build output directory (e.g., "dist", "build", "out")
        task_id: Unique deployment ID (auto-generated if not provided)
        is_spa: Whether to add SPA redirects (for React/Vue)

    Returns:
        Deployed site URL
    """
    import time

    if task_id is None:
        task_id = f"app-{int(time.time())}"

    # Step 1: Install dependencies
    print("Installing dependencies...")
    subprocess.run(["npm", "install"], cwd=project_dir, check=True)

    # Step 2: Build
    print(f"Building with: {build_cmd}")
    subprocess.run(build_cmd.split(), cwd=project_dir, check=True)

    build_path = os.path.join(project_dir, build_output)

    # Step 3: Add SPA redirects if needed
    if is_spa:
        redirects_path = os.path.join(build_path, "_redirects")
        with open(redirects_path, "w") as f:
            f.write("/*    /index.html   200\n")
        print("Added _redirects for SPA routing")

    # Step 4: Get upload URL
    print("Getting upload URL...")
    response = requests.post(
        f"{API_URL}/get-upload-url",
        json={"taskId": task_id}
    )
    response.raise_for_status()
    data = response.json()
    deploy_id = data["deployId"]
    upload_url = data["uploadUrl"]

    # Step 5: Create ZIP
    print("Creating ZIP...")
    zip_path = "/tmp/site.zip"
    with zipfile.ZipFile(zip_path, 'w', zipfile.ZIP_DEFLATED) as zipf:
        for root, dirs, files in os.walk(build_path):
            for file in files:
                file_path = os.path.join(root, file)
                arcname = os.path.relpath(file_path, build_path)
                zipf.write(file_path, arcname)

    print(f"ZIP size: {os.path.getsize(zip_path)} bytes")

    # Step 6: Upload
    print("Uploading...")
    with open(zip_path, 'rb') as f:
        response = requests.put(
            upload_url,
            data=f,
            headers={"Content-Type": "application/zip"}
        )
    response.raise_for_status()

    # Step 7: Deploy
    print("Deploying...")
    response = requests.post(
        f"{API_URL}/deploy",
        json={"deployId": deploy_id}
    )
    response.raise_for_status()
    result = response.json()

    site_url = result["url"]
    print(f"\nDeployed! URL: {site_url}")

    return site_url


# Example usage for different frameworks
if __name__ == "__main__":
    # React (Vite)
    url = build_and_deploy(
        project_dir="./my-react-app",
        build_cmd="npm run build",
        build_output="dist",
        is_spa=True
    )

    # # Astro (not a SPA)
    # url = build_and_deploy(
    #     project_dir="./my-astro-site",
    #     build_cmd="npm run build",
    #     build_output="dist",
    #     is_spa=False
    # )

    # # Next.js static export
    # url = build_and_deploy(
    #     project_dir="./my-next-app",
    #     build_cmd="npm run build",
    #     build_output="out",
    #     is_spa=False
    # )

---

サーバーレス関数の追加

Netlify Functions を使用して、バックエンド API エンドポイントを作成します。

ディレクトリ構成

project/
├── dist/                    # Frontend build output
├── netlify/
│   └── functions/
│       └── api.js           # Serverless function
└── netlify.toml             # Configuration

関数の例

netlify/functions/api.js:

export default async (request, context) => {
  const url = new URL(request.url);
  const path = url.pathname.replace('/.netlify/functions/api', '');

  // GET /api/hello
  if (request.method === 'GET' && path === '/hello') {
    return Response.json({ message: 'Hello World!' });
  }

  // POST /api/data
  if (request.method === 'POST' && path === '/data') {
    const body = await request.json();
    return Response.json({ received: body });
  }

  return new Response('Not Found', { status: 404 });
};

export const config = {
  path: "/api/*"
};

設定

netlify.toml:

[build]
  publish = "dist"
  functions = "netlify/functions"

[[redirects]]
  from = "/api/*"
  to = "/.netlify/functions/api/:splat"
  status = 200

関数とともにデプロイする

ZIP に netlify/ フォルダーを含めます：

# Build frontend
npm run build

# Create ZIP with both frontend and functions
zip -r site.zip dist/ netlify/ netlify.toml

API には https://your-site.rebyte.pro/api/hello からアクセスできます。

---

SPA ルーティングの設定

シングルページアプリケーション（React、Vue、Svelte）では、クライアントサイドルーティングに特別な設定が必要です。

オプション 1：_redirects ファイル

ビルド出力に _redirects を作成します：

/*    /index.html   200

オプション 2：netlify.toml

プロジェクトのルートに netlify.toml を作成します：

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

---

API リファレンス

アップロード URL の取得

POST https://api.rebyte.ai/api/data/netlify/get-upload-url

パラメーター	型	必須	説明
taskId	string	はい	デプロイを識別する一意の ID

デプロイ

POST https://api.rebyte.ai/api/data/netlify/deploy

パラメーター	型	必須	説明
deployId	string	はい	get-upload-url から取得したデプロイ ID

ステータスの確認

POST https://api.rebyte.ai/api/data/netlify/status

パラメーター	型	必須	説明
deployId	string	はい	デプロイ ID

サイトの削除

POST https://api.rebyte.ai/api/data/netlify/delete

パラメーター	型	必須	説明
deployId	string	はい	デプロイ ID

---

トラブルシューティング

デプロイ後に「ページが見つかりません」と表示される

• index.html が ZIP のルートにあることを確認してください
• SPA の場合は、_redirects ファイルを追加してください

ルートが機能しない（更新時に 404 が発生する）

• _redirects ファイルを追加してください：/* /index.html 200

アセットが読み込まれない

• 相対パス（/assets/ ではなく ./assets/）を使用してください
• ブラウザーのコンソールで 404 エラーを確認してください

ビルドに失敗する

• まず npm install を実行してください
• package.json で正しいビルドスクリプトが指定されているか確認してください
• Node.js のバージョンに互換性があることを確認してください

関数が機能しない

• 関数は netlify/functions/ に配置する必要があります
• ZIP に netlify.toml を含めてください
• 管理 URL で関数のログを確認してください

---

制限

リソース	制限
ZIP サイズ	100MB
アップロード URL の有効期限	1 時間
関数の実行時間	10 秒
関数のメモリー	1024 MB