--- title: "アプリケーションをテストする" url: https://docs.catalyst.zoho.com/ja/tutorials/photo-store-app/nodejs/test-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 Serve 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 CLIを使用してローカルサーバーで[アプリケーションをテスト](https://docs.catalyst.zoho.com/ja/cli/v1/serve-resources/introduction/)し、すべてが正常に動作するか確認できます。 Catalystプロジェクトをローカルで提供するには、プロジェクトディレクトリから以下のコマンドを実行します： ```sh catalyst serve ``` アプリケーションは通常、デフォルトポート`3001`で提供されます。 ![catalyst_tutorials_photostore_stratus_catalyst_serve](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_catalyst_serve.webp) > **注:** アプリケーションのホームページまたはサブページにアクセスするたびに、CLIはアクセスされたURLとHTTPリクエストメソッドのライブログを表示します。 ![catalyst_tutorials_photostore_stratus_catalyst_serve_init_2](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_catalyst_serve_init_2.webp) > **注:** [このステップ](https://docs.catalyst.zoho.com/ja/tutorials/photo-store-app/nodejs/config-appsail/#enable-bucket-cors)で説明したように、Bucket CORS機能を使用してlocalhostのURLをホワイトリストに登録していることを確認してください。 ブラウザでアプリケーションのlocalhost URLを開いて、PhotoStoreAppアプリケーションにアクセスできます。 ![catalyst_tutorials_photostore_stratus_pipelines_serve_cli__browser](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_pipelines_serve_cli__browser.webp) ### テストケース1: ログイン機能 アプリケーションの最初のページはログイン画面です。 ![catalyst_tutorials_photostore_stratus_login_screen](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_login_screen.webp) ログインプロセスが完了すると、アプリケーションに追加され、すべてのアプリケーション機能にアクセスできるようになります。 ![catalyst_tutorials_photostore_stratus_login_logged_on](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_login_logged_on.webp) *Authentication*コンポーネントにある[**User Management**](https://docs.catalyst.zoho.com/ja/cloud-scale/help/authentication/user-management/introduction/)機能を使用して、エンドユーザーのサインアップを管理できます。 ![catalyst_tutorials_photostore_stratus_auth_user_mgmt](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_auth_user_mgmt.webp) ### テストケース2: アップロード機能 **Upload**ボタンをクリックして、ローカルシステムからアプリケーションに画像をアップロードしてみることができます。 ![catalyst_tutorials_photostore_stratus_upload_hihg](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_upload_hihg.webp) ローカルシステムからファイルを選択したら、**Upload**をクリックします。 ![catalyst_tutorials_photostore_stratus_upload_pic](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_upload_pic.webp) 画像がバケットにアップロードされ、アプリケーションに表示されます。 ![catalyst_tutorials_photostore_stratus_uploaded_func](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_uploaded_func.webp) バケットでアップロードを確認できます。 ![catalyst_tutorials_photostore_stratus_objects_page](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_objects_page.webp) オブジェクトを表示するには、**Goto Preview**ボタンをクリックするか、**Object URL**を実行してオブジェクトを表示できます。 ![catalyst_tutorials_photostore_stratus_objects_objctURL](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_objects_objctURL.webp) ### テストケース3: 表示機能 **ハンバーガーメニュー**アイコンをクリックして、アップロードされた画像をリストビューで表示できます。 ![catalyst_tutorials_photostore_stratus_list_view](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_list_view.webp) **ハンバーガーアイコン**を再度使用して、表示をサムネイルに戻すことができます。 ![catalyst_tutorials_photostore_stratus_thumbnail_view](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_thumbnail_view.webp) 必要な画像をクリックして、元のサイズで表示することもできます。 ![catalyst_tutorials_photostore_stratus_og_view](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_og_view.webp) ### テストケース4: 削除とダウンロード機能 アップロードされた画像をダウンロードまたは削除するオプションがあります。 画像を削除するには、*リストビュー*で**削除アイコン**をクリックするか、*サムネイルビュー*で**省略記号アイコン**をクリックして**Delete**をクリックします。 ![catalyst_tutorials_photostore_stratus_del_view](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_del_view.webp) 画像が削除されます。 ![catalyst_tutorials_photostore_stratus_del_cmpltd](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_del_cmpltd.webp) 同様に、画像をダウンロードするには、*リストビュー*で**ダウンロードアイコン**をクリックするか、*サムネイルビュー*で**省略記号アイコン**をクリックして**Download**をクリックします。 ![catalyst_tutorials_photostore_stratus_download_sel](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_download_sel.webp) 必要な画像がローカルシステムにダウンロードされます。 ![catalyst_tutorials_photostore_stratus_downloaded_cmpltd](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_downloaded_cmpltd.webp) ### テストケース5: 共有機能 他の登録エンドユーザーと画像を共有することができます。 **共有**アイコンをクリックして、必要な画像を他の登録エンドユーザーと共有します。 ![catalyst_tutorials_photostore_stratus_share_func](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_share_func.webp) 登録ユーザーに**View**または**Edit**アクセスで画像を共有することもできます。 ![catalyst_tutorials_photostore_stratus_share_func_permis](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_share_func_permis.webp) **View Access**では、エンドユーザーは画像のダウンロードのみが許可されます。**Edit Access**では、エンドユーザーは画像の更新、削除、ダウンロードが許可されます。 画像をエンドユーザーに共有すると、そのエンドユーザーは共有された画像を自分のShared **Gallery**で表示できるようになります。 ![catalyst_tutorials_photostore_stratus_shared_gallery](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_shared_gallery.webp) **Manage Shared Details**セクションを使用して、画像のアクセスレベルを更新できます。 ![catalyst_tutorials_photostore_stratus_share_func_accesses](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_share_func_accesses.webp) **Access Type**ドロップダウンを使用して、必要な画像のアクセスレベルを更新し、**Update**をクリックして変更を反映します。 ![catalyst_tutorials_photostore_stratus_share_update_access](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_share_update_access.webp) **Revoke Access**トグルを使用し、**Update**をクリックして、必要な画像へのすべてのアクセスを削除することもできます。 ![catalyst_tutorials_photostore_stratus_share_revoke_access](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_share_revoke_access.webp) 共有ユーザーは、以前共有された画像を表示できなくなります。 このページで定義されているとおりにアプリケーションが動作している場合は、アプリケーションをデプロイできます。