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

はじめに

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

前提条件

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

プロジェクトの作成

始める前に、システムに Node.js と npm がインストールされていることを確認してください。まだお持ちでない場合は、公式の Node.js ウェブサイトからダウンロードできます。 Nuxt プロジェクトを作成するには、Nuxt CLI をインストールする必要があります。次のコマンドを実行します。

npx nuxi init my-nuxt-app

このコマンドは、my-nuxt-app フォルダに新しい Nuxt プロジェクトを初期化します。

依存関係のインストール

続いて、プロジェクトの依存関係をインストールします。

cd my-nuxt-app
npm install

プロジェクトの開発

依存関係のインストール後、次のコマンドでローカル開発サーバーを起動できます。

npm run dev

Nuxt はローカル開発サーバーを起動します。通常は http://localhost:3000 です。シンプルなページを作成するには、pages/index.vue ファイルを編集します。

index.vue

<template>
  <div>
    <h1>Hello from Nuxt!</h1>
  </div>
</template>

プロジェクトのビルド

Square Cloud にアップロードする前に、本番用ビルドを生成します。

npm run build

これにより、Nuxt サーバーの実行に必要な .output フォルダが作成されます。このフォルダには .output/server/index.mjs というパスに MAIN ファイルが含まれます。

デプロイ

プロジェクトファイルの準備ができたら、それらを Square Cloud にアップロードしてプロジェクトをホストできます。そのためには、すべてのプロジェクトファイルを含む ZIP ファイルを作成してください。

ダッシュボード経由

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

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

環境を設定

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

プロジェクトをデプロイ

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

CLI 経由

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

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

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

CLI をインストール

まず、環境に CLI がインストールされている必要があります。まだの場合は、ターミナルで次のコマンドを実行してください:

npm install -g @squarecloud/cli

すでにお持ちの場合は、更新することを推奨します。更新するには、ターミナルで次のコマンドを実行してください:

Windows
Linux, macOS, and WSL

squarecloud update

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

認証

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

squarecloud auth login

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

最後に、CLI を使用してアプリケーションを Square Cloud にデプロイするには、次のコマンドを実行する必要があります:

squarecloud upload

または、zip を手動で作成した場合は、次を使用できます:

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

その他のリソース

Nuxt の詳細については、公式の Nuxt ドキュメントこちらをご覧ください。

トラブルシューティング

カスタムドメイン

デフォルトの 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 を使用することを推奨します。

お問い合わせ

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

​はじめに

​前提条件

​プロジェクトの作成

​依存関係のインストール

​プロジェクトの開発

​プロジェクトのビルド

​デプロイ

​ダッシュボード経由

​CLI 経由