Remix アプリケーションをホストする方法

はじめに

Square Cloud でを開発してホストするには、構成と前提条件の体系的な手順に従うことが不可欠です。この技術ガイドでは、初期セットアップから本番環境へのデプロイまで、プロセス全体を解説します。

前提条件

Square Cloud アカウント: 登録ページからメールアドレスを使って登録します。
有効な有料プラン: アプリケーションに専用リソースと最適化されたパフォーマンスを提供します。利用可能なプランを確認し、ニーズに最も適したものを選択してください。

プロジェクトの作成

始める前に、システムに Node.js (>= 20) と npm がインストールされていることを確認してください。まだお持ちでない場合は、公式の Node.js ウェブサイトからダウンロードしてください。

Remix CLI のインストール

Remix アプリケーションを作成・管理するには、Remix CLI をグローバルにインストールします:

npm install -g create-remix

プロジェクトの開発

次のコマンドで新しい Remix プロジェクトを作成します:

create-remix myapp

希望するデプロイターゲットを選択してください。
Square Cloud には Node.js server オプションを推奨します。作成後、プロジェクトに移動して依存関係をインストールします:

cd myapp 
npm install

開発サーバーを起動します:

npm run dev

通常、これによりアプリケーションが http://localhost:5173/ で起動します。

基本的なルートの例

Remix のルートはファイルベースです。app/routes/_index.tsx におけるルートのシンプルな例を以下に示します:

export default function Index() {
  return <h1>Hello World from Remix!</h1>;
}

プロジェクトのビルド

アップロード前に本番用の出力をビルドします:

npm run build

本番サーバーの選択

Remix を本番環境で配信するにはサーバーが必要です。独自に作成することも、既存のものを利用することもできます。

Remix serve

Remix のウェブサーバーを使って配信できます。dist フォルダを指定して remix-serve コマンドを実行することで行えます。以下の例を確認してください:

npx remix-serve remix-serve build/index.js

デプロイ

プロジェクトファイルの準備ができたら、Square Cloud にアップロードしてプロジェクトをホストできます。そのためには、すべてのプロジェクトファイルを含む ZIP ファイルを作成します。

ダッシュボード経由

アップロードページにアクセス

アップロードページにアクセスし、プロジェクトの zip ファイルをアップロードします。

環境を設定

zip をアップロードした後、プロジェクトの名前、メインファイルまたはランタイム環境、その他の設定を構成する必要があります。
ウェブプロジェクトをアップロードする場合は、必ず「Web Publication」を選択し、プロジェクトにサブドメインを設定してください。

プロジェクトをデプロイ

最後に「Deploy」ボタンをクリックして、プロジェクトを Square Cloud にホストします。
デプロイ後、ダッシュボードからプロジェクトのステータスとログを監視できます。

CLI 経由

この方法を使用するには、プロジェクトのルートディレクトリに squarecloud.app という名前の設定ファイルを作成する必要があります。このファイルには、プロジェクトに必要な設定が含まれます。

詳細はこちら: Square Cloud の設定ファイルの作成方法。

squarecloud.app ファイルはアプリケーションを構成するために使用される設定ファイルであり、環境を定義するために使用されます。

CLI をインストール

まず、環境に CLI がインストールされている必要があります。まだの場合は、ターミナルで次のコマンドを実行してください:

npm install -g @squarecloud/cli

すでにお持ちの場合は、更新することを推奨します。更新するには、ターミナルで次のコマンドを実行してください:

Windows
Linux, macOS, and WSL

squarecloud update

curl -fsSL https://cli.squarecloud.app/install | bash

認証

次に、認証して他の CLI コマンドを使用するには、こちらで「Request API Key」をクリックして認証キーを取得します。認証キーを取得したら、次のコマンドを実行してください:

squarecloud auth login

プロジェクトをアップロード

最後に、CLI を使用してアプリケーションを Square Cloud にデプロイするには、次のコマンドを実行する必要があります:

squarecloud upload

または、zip を手動で作成した場合は、次を使用できます:

squarecloud upload --file <path/to/zip>

追加リソース

Remix の詳細については、公式ドキュメントをこちらで確認してください。包括的なガイド、チュートリアル、API リファレンス、ベストプラクティスが含まれています。

トラブルシューティング

カスタムドメイン

デフォルトの URL mysite.squareweb.app の代わりにカスタムドメイン（例: mysite.com）を使用するには、Standard プラン以上が必要です。サブドメインは設定ファイルの SUBDOMAIN フィールドで定義します。

最小 RAM 要件

シンプルなウェブサイト/API の場合は最小 512MB RAMです。フレームワーク（Next.JS、React、Vue、Angular など）を使用するサイトでは、常に最低 1GB RAMを推奨します。より大規模なアプリケーションでは、メモリ不足でアプリケーションがクラッシュするのを防ぐため、より多くの RAM を割り当ててください。

このサイトが見つかりませんでした。

サブドメイン/ドメインが SUBDOMAIN フィールドまたはカスタムドメイン設定で構成されている内容と一致しているか確認してください。サイトをアップロードしたばかりの場合は、Square が初回アクセスを有効化するまで最大 60 秒お待ちください。

サイトの応答に時間がかかりすぎました…

アプリケーションでポート 80 とホスト 0.0.0.0 を正しく設定しているか確認してください。Square の強制環境変数である .env ファイルの PORT と HOST を使用することを推奨します。

お問い合わせ

技術的な問題が解決しない場合は、専門のサポートチームがお手伝いします。お問い合わせいただければ、どのような問題でも喜んで解決をサポートいたします。

​はじめに

​前提条件

​プロジェクトの作成

​Remix CLI のインストール

​プロジェクトの開発

​基本的なルートの例

​プロジェクトのビルド

​本番サーバーの選択

​Remix serve

​デプロイ

​ダッシュボード経由

​CLI 経由