Macha

Node.js Installation Requirements

1. Recommended Version: Use Node.js v22.18.0 or a compatible version. Older versions may cause compatibility issues.
2. Installation Options:
   • Download: Visit Node.js and download the appropriate installer for your operating system.
   • Package Managers:
     • Windows: Use Chocolatey (choco install nodejs).
     • macOS: Use Homebrew (brew install node).
     • Linux: Use your distribution's package manager (e.g., apt install nodejs for Ubuntu).

Verify your installation:

node -v

Build Commands

Once Node.js is installed, proceed with the following commands:

npm install
npm run build

• npm install: Installs project dependencies specified in the package.json file.
• npm run build: Builds the project for production use.

Local Run for Testing

To test the application locally, use the command:

npm run serve

• npm run serve: Starts a local development server, allowing you to test changes in a live environment.

Ensure all dependencies are properly installed before running the local server.

Upload Static Website Files

To host your static website on Oracle Cloud Infrastructure (OCI Object Storage), follow these steps:

1. Create an Object Storage Bucket:

   • Navigate to the OCI Console, and create a new Object Storage bucket.
   • Set the bucket to private access to ensure security. The contents will later be accessed through the API Gateway.

2. Upload Website Root Files:

   • Upload the key website files, such as index.html and favicon.ico, to the appropriate paths in your bucket.

3. Bulk Upload Website Folders:

   • Upload directories such as css, js, fonts, and other static asset folders to the bucket to enable proper rendering of your website.

4. Command-Line Example for Uploading Files:
   Use the following commands with the OCI CLI to upload your files and directories:

   oci os object put --bucket-name bucket-macha --namespace fraqk3jkobfy --file ./dist/index.html --name front-end/index.html --content-type text/html --force
   oci os object put --bucket-name bucket-macha --namespace fraqk3jkobfy --file ./dist/favicon.ico --name front-end/favicon.ico --content-type image/x-icon --force
   oci os object bulk-upload --bucket-name bucket-macha --namespace fraqk3jkobfy --prefix front-end/js/ --src-dir ./dist/js --content-type "application/javascript" --overwrite
   oci os object bulk-upload --bucket-name bucket-macha --namespace fraqk3jkobfy --prefix front-end/css/ --src-dir ./dist/css --content-type "text/css" --overwrite
   oci os object bulk-upload --bucket-name bucket-macha --namespace fraqk3jkobfy --prefix front-end/fonts/ --src-dir ./dist/fonts --content-type "font/*" --overwrite
   oci os object bulk-upload --bucket-name bucket-macha --namespace fraqk3jkobfy --prefix front-end/img/ --src-dir ./dist/img --content-type "image/*" --overwrite
   oci os object bulk-upload --bucket-name bucket-macha --namespace fraqk3jkobfy --prefix front-end/assets/ --src-dir ./dist/assets --content-type "image/*" --overwrite
   

5. Alternatively, Use a Script:
   To simplify the upload process, you can use the pre-defined script:

   ./upload_to_bucket.sh
   

This script automates the upload of all necessary files and folders directly to your specified Object Storage bucket, ensuring the correct structure for hosting a static website. Make sure you’ve configured your OCI CLI session and environment variables before running the script.

Create an Frontend Gateway

• Navigate to Developer Services > API Gateway in the OCI Console.
• Create a new API Gateway and attach it to a VCN.
• Deploy an API route in the API Gateway to map requests (e.g., /index.html) to the Object Storage files.

Create an API Gateway

1. Log in to the OCI Console.
2. Navigate to API Gateway.
3. Click Create Gateway and provide the necessary details:
   • Name: Specify a unique name for your gateway (e.g., APIGateway).
   • Compartment: Select the compartment in which the gateway will reside.
   • Subnet: Attach the API Gateway to a subnet in the desired Virtual Cloud Network (VCN).
4. Click Create and wait for the API Gateway to be provisioned.

Create a Deployment

1. Once the gateway is active, click on it to open the details page.
2. Under Resources, navigate to Deployments ? Create Deployment.
3. Choose the deployment type as “Create from Scratch”:
   • Name: Name the deployment (e.g., api).
   • Path Prefix: Define the root path for the API (e.g., /api).
4. Configure the Route to integrate with the OCI Function:
   • Click Add Route and provide the following:
     • Path: Specify a path for the function (e.g., /login for a login function).
     • Methods: Select supported methods (e.g., POST, GET).
     • Backend Type: Choose Oracle Functions.
     • Function: Select the OCI Function by browsing the list or entering the Function OCID.

Apply Policies for the Route

• Security Policies: Authorization: Use an Authorizer OCI Function to manage API calls authorization.
• CORS Policies (Optional): If your front-end is hosted on the same domain as the API Gateway, CORS may not be required. However, you can enable Cross-Origin Resource Sharing if there is a need to allow requests from other origins.

Grant API Gateway Access to OCI Functions

• Add an IAM policy to allow the API Gateway to invoke OCI Functions³:

ALLOW any-user to use functions-family in compartment <functions-compartment-name> where ALL {request.principal.type= 'ApiGateway', request.resource.compartment.id = '<api-gateway-compartment-OCID>'}

Example:

ALLOW any-user to use functions-family in compartment Development where ALL {request.principal.type= 'ApiGateway', request.resource.compartment.id = 'ocid1.compartment.oc1..aaaaaaaaq______________________________rhmh6lwt7nmka'}