はじめに
Square Cloud で Vue アプリケーション を開発してホストするには、構成と前提条件の体系的な手順に従うことが不可欠です。この技術ガイドでは、初期セットアップから本番環境へのデプロイまで、プロセス全体を解説します。前提条件
- Square Cloud アカウント: 登録ページからメールアドレスを使って登録します。
- 有効なプラン: アプリケーションに専用リソースと最適化されたパフォーマンスを提供します。利用可能なプランを確認し、ニーズに最も適したものを選択してください。
プロジェクトの作成
手元のマシンに Node.js と npm が必要です。まだの場合は、Node.js 公式サイトからダウンロードしてください。公式の初期化ツールcreate-vue でプロジェクトを作成します。
本番用にビルドする
create-vue プロジェクトのビルドツールである Vite が、本番用のファイルを dist/ フォルダに書き込みます。
配信方法を選ぶ
このようにビルドした Vue アプリは静的サイトです。どのウェブサーバーでも配信できる HTML、CSS、JavaScript のファイルで構成されています。次のいずれかの方法を選んでください。- 静的ランタイム (推奨)
- Express サーバー
- serve パッケージ
静的ランタイムは、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 を作成し、アップロードします。ダッシュボード経由
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 だけでリッスンしているサーバーには、リクエストが届きません。ルートを再読み込みすると 404 になる
アプリが history モードの Vue Router を使っていて、サーバーがそのルートを知りません。静的ランタイムでは、index.html を vite.html にリネームしてください。上記の Express と serve の方法は、存在しないパスにすでに index.html を返します。
次のステップ
環境変数
シークレットや設定をコードから切り離し、実行時に読み込みます。
カスタムドメイン
Standard プラン以上で、独自ドメインからアプリを配信します。
トラブルシューティング
起動しないアプリや応答しないサイトを修正します。

