Configurar el servicio AppSail

Antes de desplegar su servicio AppSail en la consola, necesita agregar los siguientes archivos y código al directorio de su proyecto:

• Cree una carpeta llamada server en el directorio raíz de su proyecto y cree los siguientes archivos en ella:
  • index.js: Este archivo actuará como el servidor proxy para servir sus archivos React compilados.
• Cree una carpeta llamada scripts y agregue los siguientes archivos:
  • filesHelper.js: Este archivo se usará para copiar los archivos de los directorios server y photo-store-app a la ruta de compilación de AppSail.
• Cree una carpeta llamada build en el directorio raíz de su proyecto. Esta carpeta contendrá los archivos React compilados de su cliente. Debe apuntar esta carpeta como su ruta de compilación para iniciar su aplicación. Cree las siguientes carpetas en el directorio build.
  • server
  • photo-store-app

El directorio de la aplicación debería verse ahora de la siguiente manera:

A continuación, navegue al directorio PhotoStoreApp/server/ y realice los siguientes pasos:

1. Ejecute el siguiente comando de la CLI desde su terminal:

2. Ejecute el siguiente comando para instalar el paquete Express para manejar solicitudes y respuestas HTTP.

Esto también creará una carpeta node_modules en el directorio PhotoStoreApp/server.

3. Agregue el siguiente código a su archivo index.js presente en el directorio PhotoStoreApp/server/.

'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}`);
});

4. A continuación, navegue a la carpeta scripts presente en el directorio PhotoStoreApp/scripts y ejecute el siguiente comando:

Asegúrese de ingresar los valores predeterminados, y este comando creará un archivo package.json.

5. Ejecute el siguiente comando en su carpeta scripts para instalar los paquetes requeridos:

Este comando instalará los siguientes paquetes:

• path: Este paquete se usará para manejar rutas de archivos y directorios.
• util: Este paquete es necesario para usar utilidades como promisify, inherits, etc.
• fs: Este paquete es necesario para implementar operaciones del sistema de archivos.

6. Copie el siguiente código y péguelo en el archivo filesHelper.js presente en el directorio PhotoStoreApp/scripts.

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;
	}
}

Ahora, navegue al archivo app-config.json presente en el directorio del proyecto PhotoStoreApp/app-config.json y pegue el siguiente código.

{
  "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"
}

Probar y desplegar el servicio AppSail

A continuación, navegue al directorio raíz de su proyecto. Para verificar que todos los pasos completados hasta ahora estén libres de errores, vamos a servir la aplicación desde la CLI usando el siguiente comando de la CLI de Catalyst:

Este comando servirá la aplicación en su localhost. Se mostrarán las URLs de los endpoints locales de los componentes.

Si la aplicación está libre de errores, el servicio AppSail se compilará y servirá exitosamente, típicamente en localhost:3001.

Una vez que se asegure de que la aplicación se ejecuta sin errores, puede desplegar la aplicación en la consola de Catalyst usando el siguiente comando de la CLI de Catalyst:

La aplicación ahora estará desplegada en la consola de Catalyst.

Puede acceder al servicio AppSail en la consola navegando al componente AppSail presente en la sección de Catalyst Serverless.
Puede encontrar más detalles sobre el servicio AppSail haciendo clic en el servicio requerido.
El servicio AppSail ha sido configurado para su aplicación.

Habilitar Bucket CORS

Una vez que el servicio AppSail esté desplegado en la consola de Catalyst, tendremos la URL de la aplicación. Dado que los dominios del bucket y del AppService son diferentes, necesitamos habilitar la política de Cross-Origin Resource Sharing (CORS) para autenticar y permitir una interacción fluida entre el servicio AppSail y el Bucket.

Para habilitar Bucket CORS:

1. Navegue a su Bucket presente en Stratus.
   

2. Navegue a la sección Bucket CORS presente en la pestaña Configurations y haga clic en Add Domain.
   

3. Seleccione todos los Request Methods proporcionados en el menú desplegable y pegue la URL del servicio AppSail generada en el paso anterior.
   

4. Haga clic en Add, y CORS estará habilitado para el servicio AppSail, asegurando un acceso seguro.
   

Configurar GitHub

Con la aplicación desplegada en la consola de Catalyst, necesita asegurarse de haber subido los archivos de la aplicación a su cuenta de GitHub.