> ## Documentation Index > Fetch the complete documentation index at: https://docs.squarecloud.app/llms.txt > Use this file to discover all available pages before exploring further. # Preact アプリケーションをホストする方法 > Square Cloud で Preact アプリケーションをデプロイする方法を学びましょう。 export const PortNote = ({lang}) => { if (lang == 'pt-br') { return Qual porta devo usar para o meu servidor?
Você deve usar a porta 80 para o seu servidor. A porta 80 é a porta padrão para tráfego HTTP; a Square Cloud a encaminha para 443 (HTTPS) para estabelecer uma conexão segura.
Certifique-se de configurá-la antes de compactar e enviar seu projeto. ; } return What port should I use for my server?
You should use port 80 for your server. Port 80 is the default port for HTTP traffic, which is handled by Square Cloud to route it to 443, HTTPS, for a secure connection.
Make sure to configure it before compressing and uploading your project. ; }; export const RecommendedPlan = ({lang, plan, tier, cpu, appType}) => { const url = `https://squarecloud.app/${lang}/pay?plan=${plan.toLowerCase()}&tier=${tier}`; if (lang == 'en') { return Wondering how much RAM and CPU your plan needs to host {appType}?
Don't worry, we're here to help. Our {plan} plan offers {tier}GB of RAM and {cpu}vCPU, which should be sufficient for most {appType}. However, if you are working on a larger project and seeking extra stability, we recommend considering our Pro plan. With additional resources, you can maintain stability even during demand spikes. To purchase, simply click here. ; } else { return Está se perguntando quanta RAM e CPU seu plano precisa para hospedar {appType}?
Não se preocupe, estamos aqui para ajudar. Nosso plano {plan} oferece {tier}GB de RAM e {cpu}vCPU, o que deve ser suficiente para a maioria dos {appType}. No entanto, se você estiver trabalhando em um projeto maior e precisar de mais estabilidade, recomendamos considerar nosso plano Pro. Com recursos adicionais, você pode manter a estabilidade mesmo durante picos de demanda. Para comprar, basta clicar aqui. ; } }; export const appType_0 = "a Preact application" ## はじめに Square Cloud で {appType_0} を開発してホストするには、構成と前提条件の体系的な手順に従うことが不可欠です。この技術ガイドでは、初期セットアップから本番環境へのデプロイまで、プロセス全体を解説します。 ### 前提条件 * **Square Cloud アカウント**: [登録ページ](https://squarecloud.app/ja/signup)からメールアドレスを使って登録します。 * **有効な有料プラン**: アプリケーションに専用リソースと最適化されたパフォーマンスを提供します。[利用可能なプラン](https://squarecloud.app/ja/pricing)を確認し、ニーズに最も適したものを選択してください。 ## プロジェクトの作成 始める前に、システムに **Node.js と npm** がインストールされていることを確認してください。 まだお持ちでない場合は、公式の [Node.js](https://nodejs.org/) ウェブサイトからダウンロードしてください。 ### CLI のインストール 新しい Preact プロジェクトを作成するには、**Preact CLI** を使用します。グローバルにインストールします。 ```bash theme={null} npm install -g preact-cli ``` ### プロジェクトの開発 新しい Preact プロジェクトを作成します。 ```bash theme={null} preact create default my-preact-app ``` 続いて依存関係をインストールします。 ```bash theme={null} cd my-preact-app npm install ``` 次のコマンドでローカル開発サーバーを起動します。 ```bash theme={null} npm run dev ``` Preact アプリは `http://localhost:8080`（または利用可能な別のポート）で起動します。 シンプルなコンポーネントを編集するには、次を変更します。 ``` src/components/app.js ``` 例: ```javascript app.js theme={null} export default function App() { return (

Hello from Preact!

); } ``` ## プロジェクトのビルド アップロードする前に、本番用ビルドを生成します。 ```bash theme={null} npm run build ``` Preact は最適化された静的ファイルを `build/` ディレクトリ内に出力します。 ## 本番サーバーの選択 Preact を本番環境で配信するにはサーバーが必要です。独自のサーバーを作成するか、既存のものを使用できます。 ### Express ライブラリ 静的プロジェクトを Square Cloud で配信するには、サーバーが静的ファイルを正しく配信できるようにしてください。Node.js と Express を使用する一般的な構成は次のとおりです。 ```javascript server.js theme={null} import express from 'express'; import path from 'path'; const app = express(); const distPath = path.join(import.meta.dirname, 'dist'); app.use(express.static(distPath)); // SPA fallback: serve index.html for any route not matched above app.use((req, res) => { res.sendFile(path.join(distPath, 'index.html')); }); app.listen(80, () => console.log('Server running on port 80')); ``` `dist` のパスパラメータをプロジェクトのビルドフォルダに合わせて調整してください。`build` や `dist` 内のフォルダにある場合は、そのパスを使用してください。 ### Serve ライブラリ #### Serve ライブラリのインストール `serve` ライブラリをインストールするには、ターミナルでプロジェクトのディレクトリに移動し、次のコマンドを実行します。 ```bash theme={null} npm install serve@14.2.3 ``` このコマンドは `serve` ライブラリのバージョン `14.2.3` をインストールします。最新バージョンをインストールしたい場合は、`@14.2.3` を省略できます。 #### 起動スクリプトの設定 `serve` ライブラリをインストールしたら、`serve` を使用するようにプロジェクトの起動スクリプトを設定する必要があります。これを行うには、プロジェクトの `package.json` ファイルを開き、`start:prod` という新しいスクリプトを追加します。 ```json theme={null} "scripts": { "start:prod": "serve -s dist -l 80", ... } ``` `start:prod` スクリプト内の `serve -s build -l 80` は次の処理を行います。 * `serve`: `serve` サーバーを起動するコマンドです。 * `-s dist`: `-s` オプションは `dist` ディレクトリをシングルページアプリケーションモードで配信します。これにより、見つからないすべてのリクエストが `index.html` にリダイレクトされます。`dist` ディレクトリは通常、`npm run build` を実行すると作成されます。 * `-l 80`: `-l` オプションに続けて `80` を指定すると、`serve` はポート 80 でリッスンします。ポート 80 は HTTP トラフィックのデフォルトポートです。 `dist` パラメータはプロジェクトのビルドフォルダに合わせて調整してください。`build` や `dist` 内のフォルダにある場合は、そのパスを使用してください。 ## デプロイ プロジェクトファイルの準備ができたら、それらを Square Cloud にアップロードしてプロジェクトをホストできます。 そのためには、すべてのプロジェクトファイルを含む ZIP ファイルを作成してください。 ### ダッシュボード経由 [アップロードページ](https://squarecloud.app/ja/dashboard/new)にアクセスし、プロジェクトの zip ファイルをアップロードします。 zip をアップロードした後、プロジェクトの名前、メインファイルまたはランタイム環境、その他の設定を構成する必要があります。\ ウェブプロジェクトをアップロードする場合は、必ず「Web Publication」を選択し、プロジェクトにサブドメインを設定してください。 最後に「Deploy」ボタンをクリックして、プロジェクトを Square Cloud にホストします。\ デプロイ後、ダッシュボードからプロジェクトのステータスとログを監視できます。 Square Cloud へのアプリケーションのアップロード ### CLI 経由 この方法を使用するには、プロジェクトのルートディレクトリに `squarecloud.app` という名前の設定ファイルを作成する必要があります。このファイルには、プロジェクトに必要な設定が含まれます。 squarecloud.app ファイルはアプリケーションを構成するために使用される設定ファイルであり、環境を定義するために使用されます。 まず、環境に CLI がインストールされている必要があります。まだの場合は、ターミナルで次のコマンドを実行してください: ``` npm install -g @squarecloud/cli ``` すでにお持ちの場合は、更新することを推奨します。更新するには、ターミナルで次のコマンドを実行してください: ```bash theme={null} squarecloud update ``` ```bash theme={null} curl -fsSL https://cli.squarecloud.app/install | bash ``` 次に、認証して他の CLI コマンドを使用するには、[こちら](https://squarecloud.app/ja/account/security)で「Request API Key」をクリックして認証キーを取得します。認証キーを取得したら、次のコマンドを実行してください: ```bash theme={null} squarecloud auth login ``` 最後に、CLI を使用してアプリケーションを Square Cloud にデプロイするには、次のコマンドを実行する必要があります: ```bash theme={null} squarecloud upload ``` または、zip を手動で作成した場合は、次を使用できます: ```bash theme={null} squarecloud upload --file ``` ## その他のリソース Preact の詳細については、公式ドキュメント[こちら](https://preactjs.com/guide/v10)をご覧ください。 ## トラブルシューティング ### カスタムドメイン デフォルトの 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** を使用することを推奨します。 ## お問い合わせ **技術的な問題**が解決しない場合は、**専門のサポートチーム**がお手伝いします。[**お問い合わせ**](https://squarecloud.app/ja/support)いただければ、どのような問題でも喜んで解決をサポートいたします。