Skip to main content

はじめに

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

前提条件

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

プロジェクトの作成

手元のマシンに Node.js と npm が必要です。まだの場合は、Node.js 公式サイトからダウンロードしてください。nuxi init に代わる公式の初期化ツールでプロジェクトを作成します。
初期化ツールがテンプレートとパッケージマネージャーを尋ね、依存関係をインストールします。プロジェクトのフォルダに移動し、開発サーバーを起動します。
開発サーバーは http://localhost:3000 でリッスンします。app/app.vue を編集するとホームページを変更でき、ファイルベースのルーティングを使うには app/pages/index.vue を作成します。

本番用にビルドする

Nuxt は Nitro でスタンドアロンの Node.js サーバーを .output フォルダにビルドします。エントリーファイルは .output/server/index.mjs で、.output/server には独自の依存関係が含まれています。

ポートとホスト

Nuxt で変更する必要はありません。Nitro サーバーは、Square Cloud が 80 と 0.0.0.0 に設定する環境変数 PORT と HOST を読み込みます。

Square Cloud の設定

プロジェクトのルートに squarecloud.app ファイルを作成し、MAIN で Nitro サーバーを指定します。
squarecloud.app
Square Cloud は node .output/server/index.mjs でこれを起動します。ダッシュボードからアップロードする場合も、同じメインファイルを設定してください。

ZIP に含めるもの

  • .output/: 本番用のビルドです。
  • package.json、nuxt.config.ts、ソースフォルダ (app/、public/ など、プロジェクトにあるもの): 初回起動時に Square Cloud は npm install を実行し、Nuxt プロジェクトの postinstall スクリプト (nuxt prepare) がこれらを必要とします。
  • squarecloud.app。
node_modules と .nuxt は含めないでください。これらはサーバー上で再生成されます。

サーバーの代わりに静的生成を使う

すべてのページをビルド時に生成できる場合は、npm run build の代わりに npm run generate を実行します。Nuxt は静的サイトを .output/public に書き出し、静的ランタイムが Node.js プロセスなしでこれを配信します。 静的ランタイムは、Square Cloud が管理するウェブサーバーでビルドのファイルを配信します。Node.js プロセスは動かないため、サーバーサイドのコードがないサイトを最も軽くホストできる方法です。
1

サイトをビルドする

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

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

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

設定ファイルを追加する

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

ビルド出力を ZIP にする

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

デプロイと動作確認

ダッシュボード経由

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 だけでリッスンしているサーバーには、リクエストが届きません。

Cannot find module .output/server/index.mjs

ZIP にビルドが含まれていません。npm run build を実行し、.output フォルダが ZIP のルートに squarecloud.app と並んでいることを確認してください。

次のステップ

環境変数

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

カスタムドメイン

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

トラブルシューティング

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

お問い合わせ

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