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

​
はじめに

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

​
前提条件

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

​
プロジェクトの作成

始める前に、システムに Node.js と npm がインストールされていることを確認してください。まだお持ちでない場合は、公式の Node.js ウェブサイトからダウンロードできます。 新しい Next.js プロジェクトを作成するには、次のコマンドを実行します。 
npx create-next-app@latest my-app
このコマンドで、my-app は新しいプロジェクトの名前です。my-app はプロジェクトに付けたい任意の名前に置き換えることができます。npx コマンドは Node.js のパッケージマネージャーである npm に付属するツールです。プロジェクト内にローカルにインストールされている、または npm レジストリ上にリモートで利用可能な Node.js パッケージを実行するために使用します。 create-next-app は npm レジストリで利用可能なパッケージで、新しい Next.js プロジェクトを自動的にセットアップします。プロジェクトディレクトリの作成、必要な依存関係のインストール、基本ファイルの設定といった初期セットアップをすべて処理します。 @latest は、create-next-app パッケージの最新バージョンを使用したいことを指定するタグです。これにより、常に最新のバージョンを使用でき、その結果として最新の機能にアクセスできるようになります。

​
ポート 80 の設定

ポート 80 は HTTP トラフィックのデフォルトポートです。Square Cloud で Next.js ウェブサイトをホストするには、ポート 80 の使用を設定することが不可欠です。Next.js では、起動スクリプトに -p 80 パラメータを設定することで、ウェブサイトがこのポートで正しく実行されるようにできます。
package.json
{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start -p 80",
    "lint": "next lint"
  },
  "dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "next": "14.1.0"
  },
  "devDependencies": {
    "autoprefixer": "^10.0.1",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "eslint": "^8",
    "eslint-config-next": "14.1.0"
  }
}

​
プロジェクトのビルド

アップロードする前に本番用の出力をビルドします。 
npm run build
これにより本番用の next バンドルが生成されます。.next フォルダが生成されます。

​
デプロイ

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

​
ダッシュボード経由

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>

​
その他のリソース

Next.js とそのツールの詳細については、公式の Next.js ドキュメントをご覧ください。 そこには、Next.js を最大限に活用するのに役立つ詳細なガイド、チュートリアル、API ドキュメントがあります。

​
CI/CD

プロジェクトの更新を容易にする GitHub Action を提供しています。詳細はこちらをご覧ください。
次のようなワークフローを作成できます。 
name: "Deploy Nextjs app"
on:
  push:
    tags:
      - "v*"
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22

      - name: Install dependencies
        run: npm install

      - name: Build website
        run: npm run build && chmod -R 777 .next next.config.ts package.json

      - name: Add website to zip
        run: zip -r project.zip package.json .next next.config.ts public -x ".next/cache/*"

      - name: Deploy on Square Cloud
        uses: squarecloudofc/github-action@v2
        with:
          command: commit --file project.zip ${{ secrets.SQUARECLOUD_APP_ID }} 
          token: '${{ secrets.SQUARE_CLOUD_TOKEN }}'

​
トラブルシューティング

​
カスタムドメイン

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

​
お問い合わせ

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