Vite アプリケーションのホスティング方法

​

はじめに

​

前提条件

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

​

プロジェクトの作成

npm create vite@latest my-vite-app

​

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

npm create vite@latest my-vite-app --template [template]

​

JavaScript と TypeScript の違いを理解する

​

プロジェクトのビルド

npm run build

npx vite preview --host 0.0.0.0 --port 80

{
	"scripts": {
		"build": "vite build",
		"preview": "vite preview --host 0.0.0.0 --port 80"
	}
}

​

本番サーバーの選択

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

​

HTML/CSS ランタイム

​

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

npx vite preview --host 0.0.0.0 --port 80

​

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

import { defineConfig } from 'vite'

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

​

デプロイ

​

ダッシュボード経由

1

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

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

2

環境を設定

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

3

プロジェクトをデプロイ

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

4

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

最初のデプロイは、通常 1 分もかからずに完了します。ダッシュボードでアプリケーションのステータスが running になるのを待ち、起動時のエラーがないかログを確認してください。
ウェブサイトや API をデプロイした場合は、ブラウザで https://<your-subdomain>.squareweb.app を開き、アプリケーションが応答することを確認してください。ボットをデプロイした場合は、コマンドを送信してオンラインになっていることを確認してください。

アプリが起動しませんか？よくある原因と修正方法はトラブルシューティングガイドを参照してください。

​

CLI 経由

npm install -g @squarecloud/cli

squarecloud update

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

squarecloud auth login

squarecloud upload 

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

squarecloud app status
squarecloud app logs

​

トラブルシューティング

​

追加リソース

​

お問い合わせ