ShirasawaSama/Image-Library

A simple homework for my CND course.

Image Library

A simple image library built with React and Azure Functions.

This project is my Cloud Native Development course project.

Azure Services

• Azure Functions
• Azure Cosmos DB
• Azure Storage

Screenshot

Frontend - React

Prerequisites

• Node.js

Setup

1. Install dependencies

npm install

2. Build the app

npm run build

Backend - Azure Functions

Prerequisites

• Azure Functions Core Tools
• Node.js
• Azure CLI

Setup

1. Install dependencies

npm install

2. Login to Azure

az login

3. Create a resource group

az group create --name <resource-group-name> --location <location>

4. Create a storage account

az storage account create --name <storage-account-name> --location <location> --resource-group <resource-group-name> --sku Standard_LRS

5. Create a function app

az functionapp create --resource-group <resource-group-name> --consumption-plan-location <location> --runtime node --runtime-version 12 --functions-version 3 --name <function-app-name> --storage-account <storage-account-name>

6. Upload the function code

cd functions

func azure functionapp publish <function-app-name>

7. Set the environment variables

az functionapp config appsettings set --name <function-app-name> --resource-group <resource-group-name> --settings STORAGE_ACCOUNT_NAME=<storage-account-name> STORAGE_ACCOUNT_KEY=<storage-account-key>

Environment variables:

• STORAGE_ACCOUNT_NAME: The name of the storage account
• STORAGE_ACCOUNT_KEY: The access key of the storage account
• CosmosDbConnectionString: The connection string of the Cosmos DB account
• StorageConnectionAppSetting: The connection string of the storage account
• StorageBaseUrl: The base URL of the blob storage
• TranslatorKey: The key of the Azure Translator service
• TranslatorRegion: The region of the Azure Translator service, e.g. eastus

8. Set the CORS policy

az functionapp cors add --name <function-app-name> --resource-group <resource-group-name> --allowed-origins '*'

9. Configure the Cosmos DB

az cosmosdb create --name <cosmos-db-name> --resource-group <resource-group-name> --kind GlobalDocumentDB --locations regionName=<location> failoverPriority=0 isZoneRedundant=False

10. Create a database

az cosmosdb sql database create --account-name <cosmos-db-name> --resource-group <resource-group-name> --name ImageLibrary

11. Create a container

az cosmosdb sql container create --account-name <cosmos-db-name> --resource-group <resource-group-name> --database-name ImageLibrary --name images

12. Configure the Azure Blobs to allow public access

az storage account create --name <storage-account> --resource-group <resource-group> --kind StorageV2 --location <location> --allow-blob-public-access true

13. Create a storage container with public access

az storage container create --name <container-name> --account-name <account-name> --resource-group <resource-group> --public-access true --account-key <account-key>

Author

Shirasawa

License

AGPL-3.0