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

# React

> Reactアプリケーションのデプロイガイドです。

***

## 事前準備と確認事項

<AccordionGroup>
  <Accordion title="対応Node.jsバージョン" defaultOpen={true}>
    * **8, 10, 12, 14, 16, 18, 20**
  </Accordion>
</AccordionGroup>

<Warning>
  プロジェクト設定ファイル（package.json、.nvmrcなど）に記載されたNode.jsバージョンとデプロイ設定時に選択したバージョンが一致しない場合、ビルドや実行時エラーが発生する可能性があります。
</Warning>

## テンプレートとリポジトリの選択

<Frame>
  <img className="block rounded-md" src="https://files.cloudtype.io/ale-docs/developers/images/ja/react_02.png" />
</Frame>

> ダッシュボードの <Icon icon="circle-plus" iconType="solid" size={15} color="2396F1" /> または `⌘ + K` で生成されるデプロイモーダルで **Web application** テンプレートを選択し、続くドロップダウンメニューから連携されたGitHubアカウントのリポジトリを選択するか、[Git URLタブでGitリポジトリURLを入力してください。](/ja/developers/private-repo)

## デプロイ設定値を入力

> 次の各項目にサービスをデプロイするための設定値を入力してください。

<AccordionGroup>
  <Accordion title="基本項目">
    * **Build Variables**: Reactプロジェクトビルド時に含めるべき変数
    * **Docbase**: ビルド成果物の対象ディレクトリ
    * [Rewrites: プロキシのためのパスとURL](/ja/developers/reverseproxy)
    * **Node.js バージョン**
    * **Build Command**: Reactプロジェクトビルドコマンド
    * **Single Page Application**: シングルページアプリケーションの有無
    * [Health Check](/ja/developers/zero-downtime-deployment): コンテナの状態を検証するエンドポイント
  </Accordion>

  <Accordion title="詳細オプション">
    * **Install command**: コンテナイメージビルド時に含めるべき変数
    * **.npmrc**: npmパッケージレジストリのパス、プロキシなどの設定
    * **Index page**: インデックスページのファイル名
  </Accordion>
</AccordionGroup>

<Tip>
  エールは別途のNginx設定なしで、デプロイ設定時のRewritesフィールド値入力を通じて、リバースプロキシが動作するよう機能を提供しています。詳細は[Reverse Proxyページ](/ja/developers/reverseproxy)をご参照ください。
</Tip>

## リソース設定とデプロイ

<Frame>
  <img className="block rounded-md" src="https://files.cloudtype.io/ale-docs/developers/images/ja/08_04.png" />
</Frame>

* **リソースタイプ** : [オンデマンドとスポットリソース](/ja/developers/resource#on-demand-spot) から選択

* **CPU**：サービスで利用可能なvCPUの上限を設定。最小構成時は0.1 vCPUを割り当て

* **メモリ** : サービスが使用するメモリリソースの最大値を設定

* [レプリカ](/ja/developers/replica)：設定した数に応じサービスを水平スケーリングし、負荷分散と可用性確保

* **デプロイ** : `デプロイ`をクリック

<Info>
  デプロイが完了したらプレビュードメインを通じてブラウザでウェブページを確認したり、APIツールを使用してリクエストを送信できます。
</Info>

<Tip>
  リソース制限によりデプロイできない場合は、[スペースとリソースの管理ページ](/ja/operations/spaces#%E3%83%AA%E3%82%BD%E3%83%BC%E3%82%B9%E3%81%AE%E4%BB%98%E4%B8%8E)を参照してスペースにリソースを追加してください。
</Tip>

***

[React Docs](https://ja.react.dev/learn)