---
title: "プロジェクトの初期化"
url: https://docs.catalyst.zoho.com/ja/tutorials/photo-store-app/nodejs/init-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: "CLI Help Documentation "
    url: /ja/cli/v1/cli-command-reference/
  - name: "CLIからのリソース初期化"
    url: /ja/cli/v1/initialize-resources/introduction/
  - name: "プロジェクトディレクトリ構造"
    url: /ja/cli/v1/project-directory-structure/introduction/
  - name: "Catalyst AppSail"
    url: /ja/serverless/help/appsail/introduction/
  - name: "AppSailサービスの追加"
    url: /ja/cli/v1/add-appsail/
  - name: "Catalyst Multi-Orgnization Portal"
    url: /ja/getting-started/catalyst-organizations/#access-the-multi-org-portal
  - name: "Catalystツール"
    url: /ja/catalyst-extensions/vs-code-extension/introduction/
---

# プロジェクトの初期化

CLIからCatalystプロジェクトの作業を開始できます。最初のステップは、空のディレクトリでプロジェクトを初期化することです。これがプロジェクトのホームディレクトリとなり、すべてのプロジェクトファイルがここに保存されます。

詳細については、[プロジェクトディレクトリ構造のヘルプページ](https://docs.catalyst.zoho.com/ja/cli/v1/project-directory-structure/introduction/)を参照してください。プロジェクトの初期化の詳細については、[CLIヘルプドキュメント](https://docs.catalyst.zoho.com/ja/cli/v1/cli-command-reference/)を参照してください。

このアプリケーションでは、プロジェクトの初期化のみを行います。ファンクションやクライアントコンポーネントの初期化は行いません。

1. ローカルマシンにプロジェクト用のフォルダを作成し、ターミナルからそのフォルダに移動します。

2. そのディレクトリから以下のコマンドを実行してプロジェクトを初期化します：

```sh
catalyst init
```

**矢印キー**を使用してナビゲートし、お好みのポータルを選択して**Enter**をクリックします。アカウントに関連付けられた他の組織がない場合、デフォルトが自動的に選択されます。
![catalyst_tutorials_photostore_cli_project_init](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_cli_project_init.webp)

> **Info:** [Catalystのマルチ組織ポータル機能について詳しく学ぶ](https://docs.catalyst.zoho.com/ja/getting-started/catalyst-organizations/#access-the-multi-org-portal)

。

3. CLIがCatalystプロジェクトをディレクトリに関連付けるよう求めます。先ほどコンソールから作成したプロジェクトに関連付けます。リストから**PhotoStoreApp**を選択し、**Enter**をクリックします。
    ![catalyst_tutorials_photostore_cli_proj_sel](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_cli_proj_sel.webp)

4. 何も選択せずに**Enter**を押します。
    ![catalyst_tutorials_photostore_cli_compont_sel](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_cli_compont_sel.webp)

    プロジェクトが初期化され、[`catalyst.json`](https://docs.catalyst.zoho.com/ja/cli/v1/project-directory-structure/catalyst-json/)ファイルが作成されます。
    ![catalyst_tutorials_photostore_cli_init_cmpltd](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_cli_init_cmpltd.webp)

5. 以下のCLIコマンドを実行して、プロジェクトディレクトリにAppSailサービスを初期化します：

```sh
catalyst appsail:add
```

> **Note:** このチュートリアルでは、AppSailサービスを初期化するための代替[Catalyst CLIコマンド](https://docs.catalyst.zoho.com/ja/cli/v1/cli-command-reference/#commands)を紹介するために、`add`コマンドを使用しています。

6. CLIが[Catalyst-Managed Runtime](https://docs.catalyst.zoho.com/ja/serverless/help/appsail/catalyst-managed-runtimes/key-concepts/)と[Docker Image](https://docs.catalyst.zoho.com/ja/serverless/help/appsail/custom-runtimes/container-registry-services/)のどちらかを選択するよう求めます。Catalyst-Managed Runtimeの1つからこのプロジェクトを作成しているため、**Catalyst-Managed Runtime**を選択して**Enter**をクリックします。
![catalyst_alien_city_cli_appsail_setup_start](https://catalyst-docs-development.zohostratus.in/images/tutorials/alien-city-appsail-express/aliencity-appsail-selection.webp)

7. AppSailサービスの名前として「`photo-store-app`」と入力します。
    ![catalyst_tutorials_photostore_cli_appsail_init](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_cli_appsail_init.webp)

8. ビルドパスとして「`.`」を入力し、AppSailサービスのファンクションスタックとして*Node.js*の最新ランタイムを選択します。
    ![catalyst_tutorials_photostore_cli_appsail_func_stack](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_cli_appsail_func_stack.webp)

    プロジェクト用にAppSailサービスが初期化されます。
    ![catalyst_tutorials_photostore_cli_appsail_completed](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_cli_appsail_completed.webp)

9. クライアントをReact Webアプリとして初期化するために、以下のコマンドを実行します：

```sh
npx create-react-app photo-store-app
```

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

クライアントがReact Webアプリとして初期化されます。
![catalyst_tutorials_photostore_cli_react_app_completed](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_cli_react_app_completed.webp)

アプリケーションのクライアントとバックエンドが初期化され、要件に合わせて設定する準備が整いました。

10. `PhotostoreApp/photo-store-app`ディレクトリで以下のコマンドを実行します。
    ![catalyst_tutorials_photostore_stratus_npm_start_appsail_set_up](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_npm_start_appsail_set_up.webp)

    これは、プロジェクトがlocalhostでエラーなく提供されていることを確認するためです。
    ![catalyst_tutorials_photostore_app_init_compiled_success](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_app_init_compiled_success.webp)

    現在のプロジェクトディレクトリは以下のように表示されるはずです：
    ![catalyst_tutorials_photostore_stratus_first_dir_struct_1](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_first_dir_struct_1.webp)

AppSailサービスがアプリケーション用に初期化されました。