Azure Key Vault in JavaScript Applications

GETHUB 
A simple NodeJS Server:

const http = require('http');

const PORT = process.env.PORT || 3000;

async function startServer() {
    const server = http.createServer((req, res) => {
         res.writeHead(200, { "Content-Type": "text/plain" });
         res.end("Hello, world!");
    });

    server.listen(PORT, () => {
         console.log(`Server is running on port ${PORT}`);
    });
}

startServer();

Navigate to localhost:3000 gives "Hello world!"

Dockerfile

FROM node:alpine

WORKDIR /app

COPY package.json .

RUN npm install

COPY . .

EXPOSE 3000

ENV PORT=3000

CMD ["node", "server.js"]

Create Docker Image

c:\azure-keyvault-demo> docker build -f Dockerfile -t keyvault-demo:v1 .

This image should be created in Docker Desktop

Run Docker Image

c:\azure-keyvault-demo> docker run -d -p 3000 keyvault-demo:v1

Time to get hands dirty on Azure

  1. Create a resource group
  2. Create a Container Registry
Now it's time to push the image onto this Registry. This is what I created
  • Resource Group: my-keyvault-test-rg
  • Container Registry Name: keyvaultregistry.azurecr.io
Navigate back to command prompt
  • az login (Login to Azure)
  • az acr login --name keyvaultregistry (Login to the container registry)
  • az acr update --name keyvaultregistry --admin-enabled true (Enable admin mode)

Build and push docker image to ACR

docker build -f Dockerfile -t keyvault-demo:v1 .

Tag the image into the Container Registry

docker tag keyvault-demo:v1 keyvaultregistry.azurecr.io/keyvault-demo:v1

Push the image to the Container Registry

docker push keyvaultregistry.azurecr.io/keyvault-demo:v1

Back to Azure Portal

Time to create Container Apps.

Create a container app. Do not forget to enable ingress


Output:


AZURE KEYVAULT
Update the container app's identity

And when you are deploying a new revision make sure you select "System assigned managed identity"

Create a keyvault.
I created a a keyvault called "mykeyvaultdemotest" 



Key vault URL: https://mykeyvaultdemotest.vault.azure.net/

Update this URL as an ENV variable inside the container


Deploy this new revision after updating the code (Docker build, tag, push)
const http = require('http');
const { DefaultAzureCredential } = require('@azure/identity');
const { SecretClient } = require('@azure/keyvault-secrets');

const PORT = process.env.PORT || 3000;
const keyVaultUrl = process.env.KEYVAULT_URL || "https://mykeyvalutdemotest.vault.azure.net/" ; // e.g., "https://<your-key-vault-name>.vault.azure.net/"

// Define a simple array to return in the response
const simpleArray = ['apple', 'banana', 'cherry'];

// Initialize the secret client only if the Key Vault URL is provided
let secretClient;
if (keyVaultUrl) {
    const credential = new DefaultAzureCredential();
    secretClient = new SecretClient(keyVaultUrl, credential);
}

async function getSecretValue(secretName) {
    if (!secretClient) {
        // If no Key Vault URL is configured, return null or a default value.
        return null;
    }
    try {
         const secret = await secretClient.getSecret(secretName);
         return secret.value;
    } catch (error) {
         console.error('Error fetching secret: ', error);
         return null;
    }
}

async function startServer() {
    const server = http.createServer(async (req, res) => {
         if (req.url === '/' && req.method === 'GET') {
             // Retrieve secret value from Azure Key Vault
             const secretValue = await getSecretValue('mysecretapikeyName');

             const responseData = JSON.stringify({
                 message: "Hello, world!",
                 simpleArray,
                 keyVaultSecret: secretValue
             });

             console.log("RESPONSE DATA: >>", responseData)

             res.writeHead(200, { "Content-Type": "application/json" });
             res.end(responseData);
         } else {
             res.writeHead(404, { "Content-Type": "text/plain" });
             res.end('Not Found');
         }
    });

    server.listen(PORT, () => {
         console.log(`Server is running on port ${PORT}`);
    });
}

startServer();





















Comments

Post a Comment

Popular posts from this blog

Inside the JavaScript Memory Box: Visualizing Variables, References, and Copies

Image
There is a difference in the way JavaScript refences variables based on whether they are primitive or non-primitive Primitive Types: string, number, bigint, Boolean, symbol, null, undefined Non-Primitive: Arrays, Objects Each variable in JS is stored in a memory “box” Assignments: But when another variable tries to assign this value, JS thinks “wait, is this a primitive or non-primitive? Because if it is primitive, I will create a new box for this new variable with the same content. But if it’s not, I will just create a refence to the existing box” PRIMITIVE: Analogy: Let's say you have a note that says 5. You give a copy of this note to your friend.  Friend now updates this copy to 10. But your copy still says 5 let a = 5; let b = a; b = 10; //a remains unchanged NON-PRIMITIVE: Analogy: Let's say you have a note with address "123 Elm Street". In that house lives a cat named "Tom". You give a copy of this note to your friend. Friend now goes t...
Read more

React & State Management: All Concepts

Section 1: Fundamentals 1. Counter with increment, decrement, reset — useState Remember: prev is needed when the new state depends on the old state. When you're setting a hardcoded value like 0, you just pass 0 directly. Why:  reason prev matters — if multiple state updates happen in the same render cycle, React batches them. Using prev guarantees you're working off the latest state, not a stale snapshot. 2. Toggle show/hide paragraph — useState Remember: onClick={toggle} — pass the function reference, not the call. onClick={() => toggle()} — also fine, arrow function that calls toggle when clicked. onClick={toggle()} — calls toggle immediately during render, setVisible triggers re-render, toggle calls again, infinite loop. Why: JSX evaluates expressions inside {} during render. toggle() is an expression that executes immediately. React doesn't get a chance to attach it as a handler — it just runs it right there, state updates, component re-renders, runs again. ...
Read more

React: Communication between components

Parent to Child: Props Child to Parent Callback Props (advanced props) Controlled Components useImperative hook  Nested Tree: useContext Sibling: Lift State Up PARENT TO CHILD: Props App.jsx Users.jsx <User name ={user} /> function User({ name }) {  return <h1> {name} </h1> } CHILD TO PARENT a) Callback Props (Advanced Props) Parent.jsx Child1.jsx export function Parent() {   function sayHello () {     alert(“hello triggered”)   }   <Child1 onSayHello ={ sayHello } /> } function Child1({ onSayHello }) {   return <button onClick={ onSayhello() }>          Click       </button> } b) Controlled Components Usually used in forms. Controlled components mean the parent owns the state, the child renders inputs, and every ch...
Read more