はじめに
Square Cloud で React Router アプリケーション (旧 Remix) を開発してホストするには、構成と前提条件の体系的な手順に従うことが不可欠です。この技術ガイドでは、初期セットアップから本番環境へのデプロイまで、プロセス全体を解説します。前提条件
- Square Cloud アカウント: 登録ページからメールアドレスを使って登録します。
- 有効なプラン: アプリケーションに専用リソースと最適化されたパフォーマンスを提供します。利用可能なプランを確認し、ニーズに最も適したものを選択してください。
Remix は React Router に統合されました。v7 以降の React Router のフレームワークモードは Remix v2 の後継です。新しいプロジェクトでは
create-remix の代わりに create-react-router を使用します。Remix v2 のプロジェクトをお持ちの場合は、既存の Remix v2 プロジェクトを参照してください。プロジェクトの作成
手元のマシンに Node.js 22.22 以降と npm が必要です。まだの場合は、Node.js 公式サイトからダウンロードしてください。公式の初期化ツールでプロジェクトを作成します。http://localhost:5173/ でリッスンします。ルートは app/routes.ts で宣言され、スターターはホームページを app/routes/home.tsx に割り当てています。このファイルの内容をシンプルな例に置き換えます。
app/routes/home.tsx
本番用にビルドする
build/ フォルダが作成されます。build/client には静的アセットが、build/server にはサーバーコードが格納されます。ビルドツール (@react-router/dev と Vite) は devDependencies であり、Square Cloud はこれらをインストールしないため、ビルドは手元のマシンで実行してください。
ポートとホスト
変更する必要はありません。スターターには本番用の Node.js サーバーである@react-router/serve と、それを実行する start スクリプトが含まれています。react-router-serve は、Square Cloud が 80 と 0.0.0.0 に設定する環境変数 PORT と HOST を読み込みます。
package.json
Square Cloud の設定
プロジェクトのルートにsquarecloud.app ファイルを作成します。
squarecloud.app
RUNTIME=nodejs は MAIN ファイルを必要とせずに Node.js ランタイムを選択し、START はデフォルトの起動コマンドを置き換えます。ダッシュボードからアップロードする場合も、同じ起動コマンドを設定してください。
ZIP に含めるもの
build/: 本番用のビルドです。package.json。squarecloud.app。
node_modules は含めないでください。Square Cloud が初回起動時に、@react-router/serve を含む dependencies をインストールします。
既存の Remix v2 プロジェクト
Remix v2 のプロジェクトも同じ方法でデプロイします。ローカルでnpm run build を実行し、START=npm run start をそのまま使います。この start スクリプトは @remix-run/serve を実行し、これも PORT と HOST を読み込みます。
remix-serve ./build/index.js を使用します。React Router に移行するには、公式のアップグレードガイドに従ってください。
デプロイと動作確認
ダッシュボード経由
1
アップロードページにアクセス
アップロードページにアクセスし、プロジェクトの zip ファイルをアップロードします。
2
環境を設定
zip をアップロードした後、プロジェクトの名前、メインファイルまたはランタイム環境、その他の設定を構成する必要があります。
ウェブプロジェクトをアップロードする場合は、必ず「Web Publication」を選択し、プロジェクトにサブドメインを設定してください。
ウェブプロジェクトをアップロードする場合は、必ず「Web Publication」を選択し、プロジェクトにサブドメインを設定してください。
3
プロジェクトをデプロイ
最後に「Deploy」ボタンをクリックして、プロジェクトを Square Cloud にホストします。
デプロイ後、ダッシュボードからプロジェクトのステータスとログを監視できます。
デプロイ後、ダッシュボードからプロジェクトのステータスとログを監視できます。
4
アプリが稼働していることを確認
最初のデプロイは、通常 1 分もかからずに完了します。ダッシュボードでアプリケーションのステータスが running になるのを待ち、起動時のエラーがないかログを確認してください。
ウェブサイトや API をデプロイした場合は、ブラウザで
ウェブサイトや API をデプロイした場合は、ブラウザで
https://<your-subdomain>.squareweb.app を開き、アプリケーションが応答することを確認してください。ボットをデプロイした場合は、コマンドを送信してオンラインになっていることを確認してください。
CLI 経由
この方法を使用するには、プロジェクトのルートにsquarecloud.app という名前の設定ファイルが必要です。このファイルは、アプリケーションの実行方法を Square Cloud に伝えます。
設定ファイルガイド
アプリケーションの環境を定義する
squarecloud.app 設定ファイルの作成方法を学びます。1
CLI をインストール
Square Cloud CLI をインストールします。すでにお持ちの場合は、同じコマンドを実行すると更新されます:
2
ログイン
次のコマンドを実行します。ブラウザが開くので、そこでログインを承認すれば CLI の準備は完了です。API キーをコピーする必要はありません。スクリプトや CI については、CLI の認証を参照してください。
3
プロジェクトをアップロード
プロジェクトのフォルダで次のコマンドを実行します。CLI は 自分で作成した zip をアップロードするには、
squarecloud.ignore に記載されたものを除いて現在のフォルダを zip にし、アップロードします:--file で指定します:4
アプリが稼働していることを確認
最初のデプロイは、通常 1 分もかからずに完了します。ターミナルから直接、アプリケーションのステータスとログを確認してください。ウェブサイトや API をデプロイした場合は、ブラウザで
https://<your-subdomain>.squareweb.app を開き、アプリケーションが応答することを確認してください。ボットをデプロイした場合は、コマンドを送信してオンラインになっていることを確認してください。
よくあるエラー
カスタムドメイン
デフォルトの URL
mysite.squareweb.app の代わりにカスタムドメイン（例: mysite.com）を使用するには、Standard プラン以上が必要です。デフォルトの URL は設定ファイルの SUBDOMAIN フィールドから決まります。独自ドメインを接続するには、独自ドメインの設定方法に従ってください。最小 RAM 要件
ウェブサイトと API は最小 512MB RAMです。これは静的ランタイムで静的ビルドを配信するには十分な量です。サーバー上でページをレンダリングするアプリ（Next.js、Nuxt、Angular SSR など）には、最低 1GB RAMを推奨します。より大規模なアプリケーションでは、メモリ不足でアプリケーションがクラッシュするのを防ぐため、より多くの RAM を割り当ててください。
このサイトが見つかりませんでした。
サブドメイン/ドメインが SUBDOMAIN フィールドまたはカスタムドメイン設定で構成されている内容と一致しているか確認してください。サイトをアップロードしたばかりの場合は、Square が初回アクセスを有効化するまで最大 60 秒お待ちください。
サイトの応答に時間がかかりすぎました…
サーバーはポート 80 とホスト 0.0.0.0 でリッスンする必要があります。Square Cloud はアプリケーションに環境変数 PORT（
80）と HOST（0.0.0.0）を設定します。別の値をハードコーディングせず、コードでこれらを読み込んでください。localhost や 127.0.0.1 だけでリッスンしているサーバーには、リクエストが届きません。次のステップ
環境変数
シークレットや設定をコードから切り離し、実行時に読み込みます。
カスタムドメイン
Standard プラン以上で、独自ドメインからアプリを配信します。
トラブルシューティング
起動しないアプリや応答しないサイトを修正します。