AppSailサービスの設定
AppSailサービスをコンソールにデプロイする前に、以下のファイルとコードをプロジェクトディレクトリに追加する必要があります：
- プロジェクトのルートディレクトリにserverという名前のフォルダを作成し、その中に以下のファイルを作成します：
- index.js: このファイルは、コンパイル済みのReactファイルを提供するプロキシサーバーとして機能します。
- scriptsという名前のフォルダを作成し、以下のファイルを追加します：
- filesHelper.js: このファイルは、serverおよびphoto-store-appディレクトリからAppSailのビルドパスにファイルをコピーするために使用されます。
- プロジェクトのルートディレクトリにbuildという名前のフォルダを作成します。このフォルダにはクライアントのコンパイル済みReactファイルが含まれます。アプリケーションを起動するためのビルドパスとしてこのフォルダを指定する必要があります。buildディレクトリ内に以下のフォルダを作成します。
- server
- photo-store-app
アプリケーションのディレクトリは以下のように表示されるはずです：
次に、PhotoStoreApp/server/ディレクトリに移動し、以下の手順を実行します：
- ターミナルから以下のCLIコマンドを実行します：
- HTTPリクエストとレスポンスを処理するためにExpressパッケージをインストールする以下のコマンドを実行します。
これにより、PhotoStoreApp/serverディレクトリにnode_modulesフォルダも作成されます。
- PhotoStoreApp/server/ディレクトリにあるindex.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}`);
});
- 次に、PhotoStoreApp/scriptsディレクトリにあるscriptsフォルダに移動し、以下のコマンドを実行します：
デフォルト値を入力してください。このコマンドによりpackage.jsonファイルが作成されます。
- scriptsフォルダで以下のコマンドを実行して、必要なパッケージをインストールします：
このコマンドにより、以下のパッケージがインストールされます：
- path: このパッケージは、ファイルおよびディレクトリパスを処理するために使用されます。
- util: このパッケージは、promisify、inheritsなどのユーティリティを使用するために必要です。
- fs: このパッケージは、ファイルシステム操作を実装するために必要です。
- 以下のコードをコピーして、PhotoStoreApp/scriptsディレクトリにあるfilesHelper.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ファイルに移動し、以下のコードを貼り付けます。
{
"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"
}
-
catalyst_authキーの値をtrueに設定して、AppSailサービスでCatalyst Authenticationを有効にする必要があります。
-
認証プロセス後の適切なリダイレクトを確保するために、login_redirectキーの値をindex.htmlに設定する必要があります。
Test and Deploy the AppSail Service
次に、プロジェクトのルートディレクトリに移動します。これまでに完了したすべての手順がエラーなしであることを確認するために、以下のCatalyst CLIコマンドを使用してCLIからアプリケーションを提供します：
このコマンドにより、アプリケーションがlocalhostで提供されます。コンポーネントのローカルエンドポイントURLが表示されます。
アプリケーションにエラーがなければ、AppSailサービスが正常にコンパイルされ、通常localhost:3001で提供されます。
アプリケーションがエラーなく動作していることを確認したら、以下のCatalyst CLIコマンドを使用してCatalystコンソールにアプリケーションをデプロイできます：
アプリケーションがCatalystコンソールにデプロイされます。
Catalyst ServerlessセクションにあるAppSailコンポーネントに移動して、コンソールでAppSailサービスにアクセスできます。
対象のサービスをクリックすると、AppSailサービスの詳細を確認できます。
AppSailサービスがアプリケーション用に設定されました。
Enable Bucket CORS
AppSailサービスがCatalystコンソールにデプロイされると、アプリケーションURLが利用可能になります。バケットとAppServiceのドメインが異なるため、AppSailサービスとバケット間のシームレスなやり取りを認証し許可するために、Cross-Origin Resource Sharing（CORS）ポリシーを有効にする必要があります。
Bucket CORSを有効にするには：
-
Stratusにあるバケットに移動します。
-
ConfigurationsタブにあるBucket CORSセクションに移動し、Add Domainをクリックします。
-
ドロップダウンで提供されているすべてのRequest Methodsを選択し、前のステップで生成されたAppSailサービスのURLを貼り付けます。
-
Addをクリックすると、AppSailサービスのCORSが有効になり、セキュアなアクセスが確保されます。
Setup GitHub
アプリケーションがCatalystコンソールにデプロイされたので、アプリケーションファイルがGitHubアカウントにプッシュされていることを確認する必要があります。
最終更新日 2026-03-05 11:43:24 +0530 IST