---
title: "AppSailサービスの設定"
url: https://docs.catalyst.zoho.com/ja/tutorials/photo-store-app/nodejs/config-appsail/
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 AppSail"
    url: /ja/serverless/help/appsail/introduction/
  - name: "Catalyst Pipelines"
    url: /ja/pipelines/help/pipelines/introduction/
  - name: "リソースの提供"
    url: /ja/cli/v1/serve-resources/introduction/
  - name: "リソースのデプロイ"
    url: /ja/cli/v1/deploy-resources/introduction/
---

# AppSailサービスの設定

[AppSail](https://docs.catalyst.zoho.com/ja/serverless/help/appsail/introduction/)サービスをコンソールにデプロイする前に、以下のファイルとコードをプロジェクトディレクトリに追加する必要があります：

- プロジェクトのルートディレクトリに`server`という名前のフォルダを作成し、その中に以下のファイルを作成します：
    - `index.js`: このファイルは、コンパイル済みのReactファイルを提供するプロキシサーバーとして機能します。
- `scripts`という名前のフォルダを作成し、以下のファイルを追加します：
    - `filesHelper.js`: このファイルは、`server`および`photo-store-app`ディレクトリからAppSailのビルドパスにファイルをコピーするために使用されます。
- プロジェクトのルートディレクトリに`build`という名前のフォルダを作成します。このフォルダにはクライアントのコンパイル済みReactファイルが含まれます。アプリケーションを起動するためのビルドパスとしてこのフォルダを指定する必要があります。buildディレクトリ内に以下のフォルダを作成します。
    - `server`
    - `photo-store-app`

アプリケーションのディレクトリは以下のように表示されるはずです：
![catalyst_tutorials_photostore_stratus_second_dir_struct](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_second_dir_struct.webp)

次に、`PhotoStoreApp/server/`ディレクトリに移動し、以下の手順を実行します：

1. ターミナルから以下のCLIコマンドを実行します：

```sh
npm init
```

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

2. HTTPリクエストとレスポンスを処理するために*Express*パッケージをインストールする以下のコマンドを実行します。

```sh
npm install express --save
```

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

これにより、`PhotoStoreApp/server`ディレクトリに`node_modules`フォルダも作成されます。

3. `PhotoStoreApp/server/`ディレクトリにある`index.js`ファイルに以下のコードを追加します。

**index.js**

```js
'use strict';
const express = require('express');
const path = require('path');
const app = express();
const appDir = path.join(__dirname, '../photo-store-app');
const port = process.env.X_ZOHO_CATALYST_LISTEN_PORT || 9000;
app.get('/', function (req, res) {
	res.sendFile(path.join(appDir));
});
app.use(express.static(appDir));
app.listen(port, () => {
	console.log(`Example app listening on port ${port}`);
});

```

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

> **Note:** Catalystが設定したポートをリッスンするために、環境変数「`X_ZOHO_CATALYST_LISTEN_PORT`」を使用する必要があります。

4. 次に、`PhotoStoreApp/scripts`ディレクトリにある`scripts`フォルダに移動し、以下のコマンドを実行します：

```sh
npm init
```

デフォルト値を入力してください。このコマンドにより`package.json`ファイルが作成されます。
![catalyst_tutorials_photostore_stratus_npm_start_appsail_scripts_npminit](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_npm_start_appsail_scripts_npminit.webp)

5. `scripts`フォルダで以下のコマンドを実行して、必要なパッケージをインストールします：

```sh
npm install path util fs
```

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

このコマンドにより、以下のパッケージがインストールされます：
- `path`: このパッケージは、ファイルおよびディレクトリパスを処理するために使用されます。
- `util`: このパッケージは、`promisify`、`inherits`などのユーティリティを使用するために必要です。
- `fs`: このパッケージは、ファイルシステム操作を実装するために必要です。

6. 以下のコードをコピーして、`PhotoStoreApp/scripts`ディレクトリにある`filesHelper.js`ファイルに貼り付けます。

**filesHelper.js**

```js
const Path = require('path');
const { promisify } = require('util');
const Fs = require('fs');
const readdir = promisify(Fs.readdir);
const stat = promisify(Fs.stat);
const copyFile = promisify(Fs.copyFile);
const mkdir = promisify(Fs.mkdir);
const unlink = promisify(Fs.unlink);
const rmdir = promisify(Fs.rmdir);
if (process.argv.length < 4) {
	console.error('Usage: node copyAndDelete.js [-c|-d] <sourcePath> <destinationPath>');
	process.exit(1);
}
const operation = process.argv[2];
if (operation !== '-c' && operation !== '-d') {
	console.error('Invalid operation. Use -c for copy or -d for delete.');
	process.exit(1);
}
if (operation === '-c') {
	const sourcePath = Path.resolve(process.argv[3]);
	const destinationPath = Path.resolve(process.argv[4]);
	copyFolders(sourcePath, destinationPath)
		.then(() => {
			console.log('Copy completed successfully.');
		})
		.catch((err) => {
			console.error(`Error: ${err}`);
		});
} else if (operation === '-d') {
	const sourcePath = Path.resolve(process.argv[3]);
	deleteFolder(sourcePath)
		.then(() => {
			console.log('Delete completed successfully.');
		})
		.catch((err) => {
			console.error(`Error: ${err}`);
		});
}
async function copyFolders(source, destination) {
	try {
		await mkdir(destination, { recursive: true });
		const files = await readdir(source);
		for (const file of files) {
			const sourceFilePath = Path.join(source, file);
			const destFilePath = Path.join(destination, file);
			const fileStat = await stat(sourceFilePath);
			if (fileStat.isDirectory()) {
				await copyFolders(sourceFilePath, destFilePath);
			} else {
				await copyFile(sourceFilePath, destFilePath);
			}
		}
	} catch (err) {
		throw err;
	}
}
async function deleteFolder(destinationPath) {
	try {
		const files = await readdir(destinationPath);
		for (const file of files) {
			const filePath = Path.join(destinationPath, file);
			const fileStat = await stat(filePath);
			if (fileStat.isDirectory()) {
				await deleteFolder(filePath);
			} else {
				await unlink(filePath);
			}
		}
		await rmdir(destinationPath);
	} catch (err) {
		throw err;
	}
}

```

次に、プロジェクトディレクトリ`PhotoStoreApp/app-config.json`にある`app-config.json`ファイルに移動し、以下のコードを貼り付けます。

**app-config.json**

```json
{
  "command": "node ./server/index.js",
  "build_path": "./build",
  "stack": "node20",
  "env_variables": {},
  "memory": 256,
  "scripts": {
    "preserve": "cd photo-store-app && 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/",
    "postserve": "node ./scripts/filesHelper.js -d ./build/server && node ./scripts/filesHelper.js -d ./build/photo-store-app",
    "predeploy": "cd photo-store-app && npm run build && cd .. && node ./scripts/filesHelper.js -c ./server/ ./build/server/ && node ./scripts/filesHelper.js -c ./photo-store-app/build/ ./build/photo-store-app/",
    "postdeploy": "node ./scripts/filesHelper.js -d ./build/server && node ./scripts/filesHelper.js -d ./build/photo-store-app"
  },
  "raw": {},
  "catalyst_auth": true,
  "login_redirect": "/index.html"
}

```

> **Note**: `app-config.json`ファイルに以下のキーと値のペアを含める必要があります：

* `catalyst_auth`キーの値をtrueに設定して、AppSailサービスで[Catalyst Authentication](https://docs.catalyst.zoho.com/ja/cloud-scale/help/authentication/introduction/)を有効にする必要があります。

* 認証プロセス後の適切なリダイレクトを確保するために、`login_redirect`キーの値を`index.html`に設定する必要があります。

### Test and Deploy the AppSail Service

次に、プロジェクトのルートディレクトリに移動します。これまでに完了したすべての手順がエラーなしであることを確認するために、以下のCatalyst CLIコマンドを使用してCLIからアプリケーションを提供します：

```sh
catalyst serve
```

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

このコマンドにより、アプリケーションがlocalhostで提供されます。コンポーネントのローカルエンドポイントURLが表示されます。
![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)

アプリケーションにエラーがなければ、AppSailサービスが正常にコンパイルされ、通常`localhost:3001`で提供されます。

> **Info:** クライアントまたはファンクションのホームページやサブページにアクセスするたびに、CLIがアクセスされたURLとHTTPリクエストメソッドのライブログを表示します。

アプリケーションがエラーなく動作していることを確認したら、以下のCatalyst CLIコマンドを使用してCatalystコンソールにアプリケーションを[デプロイ](https://docs.catalyst.zoho.com/ja/cli/v1/deploy-resources/introduction/)できます：

```sh
catalyst deploy
```

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

アプリケーションがCatalystコンソールにデプロイされます。

*Catalyst Serverless*セクションにある**AppSail**コンポーネントに移動して、コンソールでAppSailサービスにアクセスできます。
![catalyst_tutorials_photostore_stratus_pipelines_icons](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/app-sail-navigation-photostore-app.webp)

対象のサービスをクリックすると、*AppSail*サービスの詳細を確認できます。
![catalyst_tutorials_photostore_stratus_catalyst_appsail_service_url_first_dep](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_catalyst_appsail_service_url_first_dep.webp)

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

### Enable Bucket CORS

AppSailサービスがCatalystコンソールにデプロイされると、アプリケーションURLが利用可能になります。バケットとAppServiceのドメインが異なるため、AppSailサービスとバケット間のシームレスなやり取りを認証し許可するために、Cross-Origin Resource Sharing（CORS）ポリシーを有効にする必要があります。

> **Info:** [Bucket CORSについて詳しく学ぶ](https://docs.catalyst.zoho.com/ja/cloud-scale/help/stratus/stratus-config/bucket-cors/)

Bucket CORSを有効にするには：

1. Stratusにあるバケットに移動します。
	![catalyst_tutorials-photostore-app-stratus-cors-start](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials-photostore-app-stratus-cors-start.webp)

2. **Configurations**タブにある**Bucket CORS**セクションに移動し、**Add Domain**をクリックします。
	![catalyst_tutorials-photostore-app-stratus-cors-config-domain](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials-photostore-app-stratus-cors-config-domain.webp)

3. ドロップダウンで提供されているすべての**Request Methods**を選択し、前のステップで生成されたAppSailサービスのURLを貼り付けます。
	![catalyst_tutorials-photostore-app-stratus-cors-domain-adding](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials-photostore-app-stratus-cors-domain-adding.webp)

4. **Add**をクリックすると、AppSailサービスのCORSが有効になり、セキュアなアクセスが確保されます。
	![catalyst_tutorials-photostore-app-stratus-cors-domain-added](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials-photostore-app-stratus-cors-domain-added.webp)

### Setup GitHub

アプリケーションがCatalystコンソールにデプロイされたので、アプリケーションファイルがGitHubアカウントにプッシュされていることを確認する必要があります。
![catalyst_tutorials_photostore_stratus_github_first_deploy](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_stratus_github_first_deploy.webp)

> **Note:** 今後、アプリケーションをデプロイし、GitHubプロジェクトとCatalystコンソールを同期するために[Pipelines](https://docs.catalyst.zoho.com/ja/pipelines/help/pipelines/introduction/)サービスを実装します。