Coder Social home page Coder Social logo

safa-abidi / azure-nodejs-demo Goto Github PK

View Code? Open in Web Editor NEW

This project forked from julie-ng/azure-nodejs-demo

1.0 0.0 0.0 1.92 MB

Containerized Node.js Demo App for Azure App Service

Home Page: https://azure-nodejs-demo.azurewebsites.net/

License: MIT License

JavaScript 73.63% Handlebars 13.79% Dockerfile 4.88% SCSS 7.70%

azure-nodejs-demo's Introduction

azure-nodejs-demo

Containerized Node.js Demo App for Azure App Service.

Status Pipeline Website URL CDN Endpoint
Build Status dev.yaml azure-nodejs-demo-dev.azurewebsites.net nodejsdemo-dev.azureedge.net
Build Status production.yaml azure-nodejs-demo.azurewebsites.net nodejsdemo-prod.azureedge.net

Note: the dev.yaml pipeline generally "partially" fails because of security vulnerabilities found when running npm audit. Personally I allow the pipeline to continue and I'm not super concerned because these are only used for local development, e.g. watchers and hot reload.

The production.yaml pipeline only checks for non-development dependency vulnerabilities. And that's usually passing and green :)

Architecture

This demo leverages the Static Content Pattern in Cloud Architecture.

The images and CSS can be served from app itself or pulled from external host, e.g. CDN via ASSETS_BASE_URL environment variable.

Demo Architecture

Real-World CI/CD Pipelines

In real life you have more than one environment.

  • Azure Pipelines Best Practices

    • CI pipeline for feature branches and main
    • Deploy when pushing to main or production branches
    • See ./azure-pipelines for working pipelines and details
  • Asset Pipeline
    The included cd.yaml pipeline shows how to upload assets to Blob Storage and purge the Azure CDN cache as part of your deployment process.

  • CI/CD & Versioning
    Example versioning and promotion strategies leveraging git commit messages, git tags and package.json.

Azure Demo

Endpoints

Method Path Description
GET / root
GET /health health check endpoint
POST /webhooks/test accepts JSON and logs output

Healthcheck

This is an example healthcheck endpoint with standardized JSON per draft IETF standard

{
  "status": "pass",
  "version": "0.7.1",
  "details": {
    "uptime": {
      "component_type": "system",
      "observed_value": 24208698,
      "human_readable": "0 days, 6 hours, 43 minutes, 28 seconds",
      "observed_unit": "ms",
      "status": "pass",
      "time": "2021-04-12T11:45:32.508Z"
    },
    "env": {
      "WEBSITE_HOSTNAME": "azure-nodejs-demo-dev.azurewebsites.net",
      "WEBSITE_INSTANCE_ID": "03e7481d3d5ff1e67e297f158abd943ce8c8b920fa55dc7bf0565e86886404a8",
      "ASSETS_BASE_URL": "https://nodejsdemo-dev.azureedge.net"
    }
  }
}

Local Docker Development

Note: in local development, I tend to reference the image sha256. But for the docs, we'll leverage a custom tag azure-nodejs-demo to make this doc easier to follow.

Build Image

docker build --tag azure-nodejs-demo .

Run Image

To ensure it runs locally, we need to change the default NODE_ENV to disable https:// redirect. Otherwise browser throws insecure connection message and will not load page.

docker run -it -p 3000:3000 -e NODE_ENV=development azure-nodejs-demo

Target Platform (Edge Case)

In general, you should never publish local builds. In case you decide to do this (I was debugging some Azure Container Registry behavior ;-)) from an m1 Mac, you need to specify Linux as the target platform.

docker build --platform linux/amd64  .

azure-nodejs-demo's People

Contributors

julie-ng avatar dependabot[bot] avatar snyk-bot avatar martin-callejas-jalafund avatar

Stargazers

Rizwan avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.