メインコンテンツへスキップ

​
はじめに

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

​
前提条件

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

​
プロジェクトの作成

始める前に、システムに Node.js と npm がインストールされていることを確認してください。 まだお持ちでない場合は、Node.js 公式サイトからダウンロードできます。 新しい Vite プロジェクトを作成するには、次のコマンドを実行します: 
npm create vite@latest my-vite-app
上記のコマンドで、my-vite-app は新しいプロジェクトの名前です。任意の名前に置き換えてください。デフォルトでは、このコマンドは JavaScript を使用した Vite プロジェクトをセットアップします。

​
特定のテンプレートの選択

Vite ではプロジェクトに対してさまざまなテンプレートを選択できます。新しいプロジェクトを作成する際、--template オプションを使用して希望のテンプレートを指定できます。以下はいくつかの例です: react、vue、lit などのテンプレートを選択します。 
npm create vite@latest my-vite-app --template [template]
ニーズに最も合ったテンプレートを選び、必要に応じてプロジェクト名を調整してください。

​
JavaScript と TypeScript の違いを理解する

JavaScript を選択すると、Vite はデフォルトの JavaScript 設定でプロジェクトを構成します。一方、TypeScript を選択すると、Vite は tsconfig.json ファイルの生成を含む TypeScript 設定でプロジェクトを構成します。

​
プロジェクトのビルド

本番環境にアップロードする前に、Vite ビルドを使用して本番用の成果物を生成します: 
npm run build
本番バージョンをローカルで配信するには（デプロイ環境でのテストに便利です）、vite preview コマンドを使用し、アプリケーションをすべてのインターフェースとポート 80 で公開することをお勧めします: 
npx vite preview --host 0.0.0.0 --port 80
package.json にスクリプトを追加して簡略化することもできます: 
{
	"scripts": {
		"build": "vite build",
		"preview": "vite preview --host 0.0.0.0 --port 80"
	}
}
注意: 一部のシステムでは、ポート 80 に特別な権限が必要です。制限がある場合は、別のポート（例: 8080）を使用し、ホスト/サービス側でマッピングしてください。

​
本番サーバーの選択

本番環境では、基本的に2つの選択肢があります:
  • 静的 HTML/CSS ランタイムを使用する場合は、index.html を vite.html にリネームするだけです。
  • vite preview 自体を使用する（本番動作のテストや、Node プロセスを直接実行するコンテナで便利です）。

​
HTML/CSS ランタイム

静的ランタイムを選択する場合は、ビルドを生成し（npm run build）、dist/ の内容を Square Cloud に送信する圧縮 zip ファイルにコピーします。 ランタイムが初期ファイルを Vite アプリケーションとして正しく認識し、適切なアセット処理を行えるように、index.html を vite.html にリネームすることを忘れないでください。

​
本番環境（またはコンテナ）での vite preview の使用

vite preview は、vite build で生成されたファイルを本番用静的サーバーと同様の動作で配信します。アプリケーションをネットワークに公開するには（例えば Square Cloud 上のコンテナ内で）、次を使用します: 
npx vite preview --host 0.0.0.0 --port 80
これにより、プロセスがすべてのインターフェース（0.0.0.0）とポート 80 でリッスンするようになります。

​
preview オプションを含む vite.config.js の例

import { defineConfig } from 'vite'

export default defineConfig({
	preview: {
		host: '0.0.0.0',
		port: 80,
		strictPort: true
	}
})

​
デプロイ

プロジェクトファイルの準備が完了したら、それらを Square Cloud に送信してプロジェクトをホストできます。 これを行うには、すべてのプロジェクトファイルを含む ZIP ファイルを作成します。

​
ダッシュボード経由

1

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

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

環境を設定

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

プロジェクトをデプロイ

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

​
CLI 経由

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

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

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

CLI をインストール

まず、環境に CLI がインストールされている必要があります。まだの場合は、ターミナルで次のコマンドを実行してください:
npm install -g @squarecloud/cli
すでにお持ちの場合は、更新することを推奨します。更新するには、ターミナルで次のコマンドを実行してください:
squarecloud update
2

認証

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

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

最後に、CLI を使用してアプリケーションを Square Cloud にデプロイするには、次のコマンドを実行する必要があります:
squarecloud upload
または、zip を手動で作成した場合は、次を使用できます:
squarecloud upload --file <path/to/zip>

​
その他のリソース

Vite とそのツールに関する詳細情報は、Vite 公式ドキュメントをご覧ください。Vite を最大限に活用するための詳細なガイド、チュートリアル、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 を使用することを推奨します。

​
お問い合わせ

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