> ## Documentation Index
> Fetch the complete documentation index at: https://docs.base44.com/llms.txt
> Use this file to discover all available pages before exploring further.

# ローカル開発のセットアップ

> Base44 開発サーバーをセットアップし、フロントエンドを接続する

ローカル開発では、2 つのプロセスを並行して実行します。Base44 開発サーバーがバックエンドを処理し、通常のフロントエンド開発サーバーが UI を実行します。フロントエンドは SDK を介してローカルバックエンドと通信します。

## 前提条件

プロジェクトにバックエンド関数がある場合、それらをローカルで実行するために [Deno](https://docs.deno.com/runtime/getting_started/installation/) をインストールする必要があります。

## フロントエンドクライアントを構成する

プロジェクトに SDK を使用するフロントエンドがある場合、リクエストを送信する場所を指示する必要があります。デフォルトでは、SDK は Base44 のホスト型バックエンドにリクエストを送信します。代わりにローカル開発サーバーを使用するには、開発モードで実行する際にクライアント構成に `serverUrl` を渡します。本番環境では、SDK がデフォルトを使用するように `serverUrl` を省略してください。

このアプローチは、コードが開発環境で実行されているかどうかを検出し、条件付きで `serverUrl` をローカル開発サーバーに向けるよう設定するものです。ほとんどのフレームワークは、これを確認する組み込みの方法を提供しています。

<Steps>
  <Step title="開発モードを検出">
    環境に合わせたパターンを使用してください:

    <CodeGroup>
      ```javascript Vite theme={null}
      const isDev = import.meta.env.DEV;
      ```

      ```javascript Node.js, Webpack, Next.js theme={null}
      const isDev = process.env.NODE_ENV !== "production";
      ```

      ```javascript React Native theme={null}
      const isDev = __DEV__;
      ```

      ```javascript Deno theme={null}
      const isDev = Deno.env.get("DENO_ENV") !== "production";
      ```
    </CodeGroup>
  </Step>

  <Step title="serverUrl を条件付きで渡す">
    クライアントを作成する際に、開発時のみ `serverUrl` を含めます:

    ```javascript theme={null}
    import { createClient } from "@base44/sdk";

    const base44 = createClient({
      appId: "your-app-id",
      ...(isDev && { serverUrl: "http://localhost:4400" }),
    });
    ```

    * 開発時は `isDev` が `true` となり、SDK は `localhost:4400` にリクエストを送信します
    * 本番ビルドでは `isDev` が `false`、`serverUrl` は省略され、SDK はデフォルトの Base44 バックエンドを使用します
  </Step>
</Steps>

## 開発サーバーを実行する

ローカルで開発するたびに、並行して実行する 2 つのターミナルが必要です。

<Steps>
  <Step title="バックエンドを起動">
    1 つのターミナルで、プロジェクトディレクトリから [`dev`](/developers/references/cli/commands/dev) を実行します:

    ```bash theme={null}
    base44 dev
    ```

    これにより、`http://localhost:4400` でローカルバックエンドが起動します。
  </Step>

  <Step title="フロントエンドを起動">
    2 つ目のターミナルで、通常どおりにフロントエンド開発サーバーを起動します。例えば Vite の場合:

    ```bash theme={null}
    npm run dev
    ```

    フロントエンドからのすべての SDK 呼び出しが、ローカル Base44 開発サーバーに送信されるようになります。
  </Step>
</Steps>

## 関連項目

* [Local development overview](/developers/backend/overview/local-dev/local-development-overview): ローカルで何が実行され、何が転送され、どのように機能するか
* [`dev`](/developers/references/cli/commands/dev): フラグ付きの CLI コマンドリファレンス
* [`serverUrl`](/developers/references/sdk/docs/functions/createClient): SDK クライアント設定

<Note>このページは AI を使用して翻訳されました。最も正確で最新の情報については、[英語版](/) を参照してください。 </Note>