Skip to main content

はじめに

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

前提条件

  • Square Cloud アカウント: 登録ページからメールアドレスを使って登録します。
  • 有効なプラン: アプリケーションに専用リソースと最適化されたパフォーマンスを提供します。利用可能なプランを確認し、ニーズに最も適したものを選択してください。
このガイドは静的ランタイムまたは Node.js ランタイムで動作します。2026 年 9 月に Node.js 24 上の Vite 8 でテストしました。

プロジェクトの作成

手元のマシンに Node.js と npm が必要です。まだの場合は、Node.js 公式サイトからダウンロードしてください。公式の初期化ツールでプロジェクトを作成します。
my-vite-app はプロジェクトのフォルダです。--template でフレームワークを選びます。vanilla、vue、react、preact、lit、svelte、solid、qwik があり、それぞれに react-ts のような -ts で終わる TypeScript 版があります。-- は、オプションを npm ではなく初期化ツールに渡すためのものです。--template を省略すると、初期化ツールがフレームワークと種類を尋ねます。 次に、依存関係をインストールします。

本番用にビルドする

Vite は本番用のファイルを dist/ フォルダに書き込みます。Square Cloud での配信に vite preview は使わないでください。これはビルドをローカルでプレビューするためのもので、本番用サーバーではありません。

配信方法を選ぶ

Vite のビルドは静的サイトです。どのウェブサーバーでも配信できる HTML、CSS、JavaScript のファイルで構成されています。次のいずれかの方法を選んでください。
静的ランタイムは、Square Cloud が管理するウェブサーバーでビルドのファイルを配信します。Node.js プロセスは動かないため、サーバーサイドのコードがないサイトを最も軽くホストできる方法です。
1

サイトをビルドする

npm run build を実行します。出力は dist フォルダに書き込まれます。
2

クライアントサイドのルートを維持する

アプリがリロードなしにブラウザ内でページを切り替える (クライアントサイドルーティング) 場合は、dist/index.html を vite.html にリネームします。静的ランタイムはファイルではないすべてのパスに vite.html を返すため、/about のようなルートを再読み込みしてもアプリが読み込まれます。ページごとに HTML ファイルがあるサイトは index.html のままにします。この場合、存在しないパスには 404.html が返されます。詳しくは静的ランタイムがファイルを配信する仕組みを参照してください。
3

設定ファイルを追加する

dist の中に squarecloud.app ファイルを作成します。HTML ファイルを指す MAIN を指定すると、静的ランタイムが選択されます。
squarecloud.app
index.html のままにした場合は MAIN=index.html を使用します。ウェブサイトの最小メモリは 512 MB です。ダッシュボードからアップロードする場合は、これらの値を入力すると自動でファイルが作成されます。
4

ビルド出力を ZIP にする

フォルダそのものではなく dist の中身を ZIP にし、squarecloud.app が ZIP のルートに来るようにします。CLI を使う場合は、dist の中で squarecloud upload を実行します。
ZIP に含めたものはすべてサイト上で公開されます。アップロードするのはビルド出力だけにし、ソースコードや .env ファイルは絶対に含めないでください。
多くのビルドツールは、ビルドのたびに dist を空にします。フレームワークがそのままビルドにコピーするフォルダ (Vite ベースのプロジェクトでは public/) に squarecloud.app のコピーを置いておくか、ビルドのたびに最後の 3 つの手順を繰り返してください。

デプロイと動作確認

選んだ方法で説明した ZIP を作成し、アップロードします。

ダッシュボード経由

1

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

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

環境を設定

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

プロジェクトをデプロイ

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

アプリが稼働していることを確認

最初のデプロイは、通常 1 分もかからずに完了します。ダッシュボードでアプリケーションのステータスが running になるのを待ち、起動時のエラーがないかログを確認してください。
ウェブサイトや 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 は squarecloud.ignore に記載されたものを除いて現在のフォルダを zip にし、アップロードします:
自分で作成した 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 だけでリッスンしているサーバーには、リクエストが届きません。

ルートを再読み込みすると 404 になる

アプリがクライアントサイドルーティングを使っていて、サーバーがそのルートを知りません。静的ランタイムでは、index.html を vite.html にリネームしてください。上記の Express と serve の方法は、存在しないパスにすでに index.html を返します。

次のステップ

環境変数

シークレットや設定をコードから切り離し、実行時に読み込みます。

カスタムドメイン

Standard プラン以上で、独自ドメインからアプリを配信します。

トラブルシューティング

起動しないアプリや応答しないサイトを修正します。
Vite の詳細は公式の Vite ドキュメントを参照してください。

お問い合わせ

技術的な問題が解決しない場合は、専門のサポートチームがお手伝いします。お問い合わせいただければ、どのような問題でも喜んで解決をサポートいたします。サポートの質の高さも、開発者が Google と Trustpilot で Square Cloud に402 件のレビューで 4.9/5という評価をつけている理由の 1 つです。