Preact アプリケーションをホストする方法

​

はじめに

​

前提条件

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

​

プロジェクトの作成

​

CLI のインストール

npm install -g preact-cli

​

プロジェクトの開発

preact create default my-preact-app

cd my-preact-app
npm install

npm run dev

src/components/app.js

export default function App() {
  return (
    <div>
      <h1>Hello from Preact!</h1>
    </div>
  );
}

​

プロジェクトのビルド

npm run build

​

本番サーバーの選択

​

Express ライブラリ

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'));

​

Serve ライブラリ

​

Serve ライブラリのインストール

npm install serve@14.2.3

​

起動スクリプトの設定

"scripts": {
  "start:prod": "serve -s dist -l 80",
  ...
}

• serve: serve サーバーを起動するコマンドです。
• -s dist: -s オプションは dist ディレクトリをシングルページアプリケーションモードで配信します。これにより、見つからないすべてのリクエストが index.html にリダイレクトされます。dist ディレクトリは通常、npm run build を実行すると作成されます。
• -l 80: -l オプションに続けて 80 を指定すると、serve はポート 80 でリッスンします。ポート 80 は HTTP トラフィックのデフォルトポートです。

​

デプロイ

​

ダッシュボード経由

1

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

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

2

環境を設定

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

3

プロジェクトをデプロイ

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

​

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> 

​

その他のリソース

​

トラブルシューティング

​

お問い合わせ