--- title: "Slateテンプレートのデプロイ" url: https://docs.catalyst.zoho.com/ja/slate/help/git-integration/deploy-template/ description: "Slate Starterライブラリで利用可能なテンプレートを使用してフロントエンドWebアプリケーションを素早くデプロイする方法について説明します。" last_updated: 2026-08-17T12:16:04Z service: Slate type: general related_links: - name: "デプロイのプレビュー" url: /ja/slate/help/deployment-previews - name: "デプロイメントのキャッシュ" url: /ja/slate/help/cache - name: "Environment Variablesの設定" url: /ja/slate/help/environment-variables - name: "Custom Domain Mapping" url: /ja/slate/help/custom-domains - name: "デプロイメントの監視" url: /ja/slate/help/monitor-deployment - name: "失敗したデプロイの修正" url: /ja/slate/help/fix-failed-deployment - name: "デプロイメントのロールバック" url: /ja/slate/help/rollback-deployment --- # Slateテンプレートのデプロイ ### はじめに Catalyst Slateは、最小限のセットアップ作業でプロジェクトを素早く立ち上げて稼働させるために使用できる、既製のアプリケーションテンプレートを提供します。さまざまなユースケース向けのテンプレートが豊富に用意されており、[Next.js](https://nextjs.org/)、[Angular](https://angular.dev/)、[Astro](https://astro.build/)、[React](https://react.dev/)、[SolidJS](https://www.solidjs.com/)、[Preact](https://preactjs.com/)、[Svelte](https://svelte.dev/)、[Vue](https://vuejs.org/)、[Vite](https://vitejs.dev/)、[Nuxt](https://nuxt.com/)などのさまざまなクライアントフレームワークで構成されています。 SlateのStarter Templatesギャラリーから事前構築されたテンプレートを選択し、Slateを使用してデプロイするだけです。 Slateテンプレートの主な利点は以下のとおりです： * **セットアップ時間の短縮と開発への集中**： Slateテンプレートを使用すると、新しいプロジェクトのためにボイラープレートコードを繰り返しセットアップする必要がなくなり、時間を節約できます。最終的に、初期プロジェクトセットアップの構成ではなく、独自の機能の開発により多くの時間を費やすことができます。 * **迅速なデプロイメントと最小限の学習コスト**： Slateテンプレートを使用すると、わずか数回のクリックで完全に機能するアプリケーションをデプロイできます。新しい開発者は、さまざまなフレームワークを使用してさまざまなタイプのアプリケーションをセットアップおよび構成する方法を示す、よく構造化された事前構築プロジェクトから学ぶことができます。経験豊富な開発者は、Slateデプロイメントのベストプラクティスのリファレンス実装としてテンプレートを使用できます。 ### デプロイ手順 以下の手順に従ってSlateテンプレートを活用できます： 1. コンソールで**Catalyst Slate**サービスに移動します。**Starter Templates**セクションで、**Browse Templates**をクリックします。 ![slate-starter-template](https://catalyst-docs-development.zohostratus.in/images/help/slate/slate-starter-template.webp) 2. さまざまなユースケースとフレームワークのテンプレートを閲覧し、お好みのテンプレートを選択できます。 ![select-template-framework](https://catalyst-docs-development.zohostratus.in/images/help/slate/select-template-framework.webp) 3. **Create Deployment**ポップアップで、必要なGit providerを選択してアカウントを認証します。 選択したSlateテンプレートのsource codeが、統合されたGit accountの新しいリポジトリにプッシュされます。 ![template-create-deployment](https://catalyst-docs-development.zohostratus.in/images/help/slate/template-create-deployment.webp) 4. テンプレート名がSlateによってリポジトリ名として自動入力されます。必要に応じて編集できます。 任意のデプロイメント名を指定します。 ![template-repo-name](https://catalyst-docs-development.zohostratus.in/images/help/slate/template-repo-name.webp) 5. アプリケーションのフレームワークとNodeランタイムは、選択したテンプレートに基づいて自動的に入力されます。必要に応じてNodeランタイムを編集できます。 ![template-runtime](https://catalyst-docs-development.zohostratus.in/images/help/slate/template-runtime.webp) > **注意:** Node.jsランタイムを使用すると、Webブラウザの外部（サーバーやコンピューターなど）でJavaScriptコードを実行できます。JavaScriptにファイル、ネットワーク、その他のシステムツールへのアクセスを提供することで、Webサイトやアプリケーションの構築を支援します。 6. このデプロイ方法では、Git accountに新しいリポジトリが自動的に作成され、テンプレートコードがプッシュされます。 以下のスクリーンショットに示すように、ボタンを切り替えてprivate repositoryを作成できます。 ![template-private-repo](https://catalyst-docs-development.zohostratus.in/images/help/slate/template-private-repo.webp) 7. **Auto Deploy**を有効にすると、リポジトリにプッシュされたコードがSlateを使用して自動的にデプロイされます。 ![template-auto-deploy](https://catalyst-docs-development.zohostratus.in/images/help/slate/template-auto-deploy.webp) **Show Advanced Options**タブには、アプリケーションデプロイメントのoutput path、build command、およびstart commandが表示され、これらのフィールドは自動入力されます。 ![template-show-advanced](https://catalyst-docs-development.zohostratus.in/images/help/slate/template-show-advanced.webp) 8. **Deploy**をクリックしてアプリケーションをSlateにデプロイします。 > **注意:** * output pathは、アプリケーションが本番環境用にコンパイルまたはビルドされるディレクトリです。 * build commandは、development codeをproduction codeに変換するスクリプトです。 * install commandは、プロジェクトに必要なすべての依存関係を取得してインストールします。たとえば、各クライアントサイドフレームワークのinstall commandは以下のとおりです： * **React, Next.js, Vue, Angular, Svelte** → `npm install`または`yarn install` * **Astro** → `npm install`または`pnpm install` * **Vite** → `npm install`または`yarn install` * **SolidJS** → `npm install`または`pnpm install` デプロイメントが正常に完了しました。以下のスクリーンショットに示すように、デプロイメントの詳細ログを表示できます。 ![template-deploy-success](https://catalyst-docs-development.zohostratus.in/images/help/slate/template-deploy-success.webp) **Go to Manage**をクリックして、以下のスクリーンショットに示すデプロイメントの概要詳細を表示できます。**Preview**をクリックしてデプロイされたアプリケーションを表示します。 ![template-edit-url](https://catalyst-docs-development.zohostratus.in/images/help/slate/template-edit-url.webp) 上記のスクリーンショットに示すように、アプリケーションの生成された[access URL](https://docs.catalyst.zoho.com/ja/slate/help/slate-access-url)を取得できます。**Edit URL**をクリックしてURLを編集できます。 1. **Change**をクリックして、このデプロイメントの**Auto-Deploy**を無効にできます。 ![template-auto-deploy-disable](https://catalyst-docs-development.zohostratus.in/images/help/slate/template-auto-deploy-disable.webp) 2. デプロイメント名を入力し、**Disable**をクリックします。 ![template-disable-popup](https://catalyst-docs-development.zohostratus.in/images/help/slate/template-disable-popup.webp) **Sync Now**ボタンをクリックして、[最新のcommitを同期](https://docs.catalyst.zoho.com/ja/slate/help/fix-failed-deployment)できます。必要に応じて、生成されたSlate URLを[カスタムドメイン](https://docs.catalyst.zoho.com/ja/slate/help/custom-domains)にマッピングすることもできます。 左ペインの**History**タブに切り替えて、アプリケーションに対して行われたデプロイメントの一覧を表示できます。詳しくは[こちらのヘルプセクション](https://docs.catalyst.zoho.com/ja/slate/help/monitor-deployment)を参照してください。左ペインの**Configuration**タブに移動して、デプロイメントの[cacheを有効化](https://docs.catalyst.zoho.com/ja/slate/help/cache)できます。また、必要に応じて、デプロイメントに必要な[environment variables](https://docs.catalyst.zoho.com/ja/slate/help/environment-variables)を設定することもできます。