---
title: "アプリケーションをデプロイする"
url: https://docs.catalyst.zoho.com/ja/tutorials/photo-store-app/nodejs/deploy-app/
description: "Stratusのバケットに画像をアップロードし、他の登録ユーザーとこれらの画像を共有するReactギャラリーアプリを構築します。AppSailでアプリをホストし、GitHubと同期してPipelinesを使用してアプリをデプロイします。"
last_updated: 2026-08-17T12:16:04Z
service: All Services
type: tutorial
related_links:
  - name: "Catalyst Stratus"
    url: /ja/cloud-scale/help/stratus/introduction/
  - name: "Catalyst Pipelines"
    url: /ja/pipelines/help/pipelines/introduction/
  - name: "Configure Pipelines Flow"
    url: /ja/pipelines/help/catalyst-pipelines.yaml/implementation/
  - name: "CLI Deploy Resources"
    url: /ja/cli/v1/serve-resources/introduction/
  - name: "Stratus Web SDK"
    url: /ja/sdk/web/v4/cloud-scale/stratus/overview/
  - name: "Stratus REST API"
    url: /ja/api/code-reference/cloud-scale/stratus/get-all-buckets/#GetAllBuckets
---

# アプリケーションをデプロイする

Catalystコンソールと必要なGitHubリポジトリの両方でアプリケーションをデプロイおよび管理するために、[Catalyst Pipelines](https://docs.catalyst.zoho.com/ja/pipelines/help/pipelines/introduction/)サービスを使用します。

Pipelinesサービスを使用すると、[Sharp](https://www.npmjs.com/package/sharp)のようなプラットフォーム依存パッケージを使用できます。クライアントでアップロードされた画像をサムネイルとして変換・表示するためにSharpパッケージが必要です。

CatalystはLinuxマシン上で動作するため、sharpパッケージを使用してCatalystでホストするには、Linux向けパッケージライブラリをインストールしてアプリケーションをデプロイする方法があります。あるいは、Catalyst Pipelinesサービスを使用して簡単にアプリケーションをデプロイでき、必要な依存関係はすべて自動的に処理されます。Pipelinesサービスを使用すると、GitHubリポジトリとCatalystコンソール間でアプリケーションファイルをシームレスに同期できます。

Pipelinesを使用してアプリケーションをデプロイするには：

1. コンソールのサイドバーにある**Pipelines icon**をクリックして、*Pipelines*サービスにアクセスします。
    ![catalyst_tutorials_photostore_stratus_pipelines_icons](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_pipelines_icons.webp)

2. **Create Pipelines**をクリックします。
    ![catalyst_tutorials_photostore_stratus_pipelines_create_pipeline](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_pipelines_create_pipeline.webp)

3. パイプラインの名前を「`PhotoStore-pipeline`」とし、統合ソースとして**GitHub**を選択します。
    ![catalyst_tutorials_photostore_stratus_name_github_sel](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_name_github_sel.webp)

> **情報:** GitHubを使用してPipelinesサービスのデモを行っています。要件に応じて、GitLabおよびBitBucketソースも使用できます。

4. ドロップダウンからGitHubアカウントを追加します。以前に追加していない場合は、**+Add Account**ボタンをクリックしてログイン手順に従い、GitHubアカウントを*Catalyst Pipelines*サービスに追加できます。
    ![catalyst_tutorials_photostore_stratus_sel_github_acc](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_sel_github_acc.webp)

5. 必要なGitHubの*Organization*と、アプリケーションファイルを管理するために先ほど作成したリポジトリを選択します。
    ![catalyst_tutorials_photostore_stratus_sel_github_acc_repo_sel](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_sel_github_acc_repo_sel.webp)

6. `catalyst-pipelines.yaml`ファイルの**code-view**に移動します。
    ![catalyst_tutorials_photostore_stratus_pipelines_yml_code_file_org](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_pipelines_yml_code_file_org.webp)

    **Builder**タブをクリックして、UIを使用して`.yaml`ファイルを設定することもできます。
    ![catalyst_tutorials_photostore_stratus_sel_github_acc_yaml_buildeR_file](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_sel_github_acc_yaml_buildeR_file.webp)

7. 以下のスニペットをコピーして貼り付け、[ステージ](https://docs.catalyst.zoho.com/ja/pipelines/help/catalyst-pipelines.yaml/build-the-pipeline/stages/)のシーケンスを定義し、[Pipelineのフローを設定](https://docs.catalyst.zoho.com/ja/pipelines/help/catalyst-pipelines.yaml/implementation/)します。

**catalyst-pipelines.yaml**

```xml
version: 1
jobs:
  deploy:
    steps:
      - cd photo-store-app
      - npm install
      - npm run build
      - cd ..
      - cd server
      - npm install
      - cd ..
      - cd scripts
      - npm install
      - cd ..
      - node ./scripts/filesHelper.js -c ./server/ ./build/server/
      - node ./scripts/filesHelper.js -c ./photo-store-app/build/ ./build/photo-store-app/
      - npm install -g zcatalyst-cli@beta
      - catalyst deploy
stages:
  - name: build
    jobs:
      - deploy

```

8. **Commit**をクリックしてPipelineを実行します。
    ![catalyst_tutorials_photostore_stratus_pipelines_yml_cmpltd](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_pipelines_yml_cmpltd.webp)

9. コミットメッセージを入力し、**Commit**をクリックします。
    ![catalyst_tutorials_photostore_stratus_pipelines_commit_msg](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_pipelines_commit_msg.webp)

概要セクションに移動し、パイプラインのステータスとその他の一般的な詳細が表示されます。
![catalyst_tutorials_photostore_stratus_pipelines_queued](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_pipelines_queued.webp)

このステップでPipelineが設定され、自動的に実行が開始されます。

### グローバル変数の追加

このPipelineに2つのGlobal Variablesを追加します。

* `CATALYST_TOKEN`: この変数は、ローカルCLIをPipelineに接続するために追加する必要があります。必要なトークンを生成する手順は以下に記載されています。

> **注:** Pipelineサービスを使用してCLIでデプロイする場合、この変数は必ず追加する必要があります。

* `CI`: 値を`False`に設定する必要があります。これにより、コードに警告があってもPipelineが失敗しないことが保証されます。

> **情報:** [Global Variablesの詳細を確認する](https://docs.catalyst.zoho.com/ja/pipelines/help/catalyst-pipelines.yaml/build-the-pipeline/variables/#global-variables)。

#### Catalystトークンの生成

ローカルシステムからPipelineにCatalyst CLIコマンドを実行できるようにするためのトークンを生成する必要があります。

トークンを生成するには：

1. CLIで以下のコマンドを実行します。

```sh
catalyst token:generate
```

![catalyst_tutorials_photostore_stratus_pipelines_token_gen](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_pipelines_token_gen.webp)

2. CLIに表示されたURLに移動し、CLIで生成された確認コードを入力して、**Verify**をクリックします。
    ![catalyst_tutorials_photostore_stratus_pipelines_token_entered](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_pipelines_token_entered.webp)

CLIが確認されると、トークンが生成されます。
![catalyst_tutorials_photostore_stratus_pipelines_tokens_completed](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_pipelines_tokens_completed.webp)

> **情報:** [トークン生成の詳細を確認する](https://docs.catalyst.zoho.com/ja/cli/v1/working-with-tokens/generate-token/)

次に、必要なグローバル変数の追加を開始しましょう。

Global Variablesを追加するには：

1. **Global Variables**をクリックします。
    ![catalyst_tutorials_photostore_stratus_pipelines_gv_hihglit](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_pipelines_gv_hihglit.webp)

2. キーとして`CATALYST_TOKEN`を入力し、値として生成されたトークンを入力します。**+ icon**をクリックして次のトークンを追加します。
    ![catalyst_tutorials_photostore_stratus_pipelines_tokens_gv_1](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_pipelines_tokens_gv_1.webp)

3. キーとして`CI`を入力し、値として`False`を入力します。**Save**をクリックして変数を追加します。
    ![catalyst_tutorials_photostore_stratus_pipelines_tokens_gv_2](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_pipelines_tokens_gv_2.webp)

必要な変数が追加されました。

実行されたパイプラインをクリックして、パイプラインのステータスを確認できます。
![catalyst_tutorials_photostore_stratus_pipelines_running_status](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_pipelines_running_status.webp)

**Advanced**タブをクリックして、プロセスの詳細を確認できます。
![catalyst_tutorials_photostore_stratus_pipelines_adv_processes](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_pipelines_adv_processes.webp)