Giter VIP home page Giter VIP logo

demo1's Introduction

N-Tier Stack Example

This repository represents a collection of docker files and the required source code for the deployment and hosting of a basic web app which is integrated with a proxy (NGINX) and a backend database, in this case PostgreSQL.

Architecture

The overall architecture that is contained within the docker deployment can be seen below

Components

The stack is comprised of the following components, which have been chosen for their familiarity and easy/quick stand up time.

NGINX

Acts as a reverse proxy, this is the only "publicly" facing container.

Django

This is hosting a basic web-app which is serving a HTML template which is rendering data fetched from the database container

PostgreSQL

basic postgres container which is contains data that is read/written from the Django application.

Landing Page

The basic application/landing page presents a button which is clickable. On each click it will make a POST request to the webapp, the webapp will then increment the currently stored value in the database. On each click a nice animation is drawn on the canvas.

Getting started

The instructions for getting the stack up and running can be found below. Some things to consider for a successful replication of this stack in a new environment are summarised as well.

Environment

The stack was developed and tested in the following environment

  • macOS High Sierra, version 10.13.3
  • docker-compose version 1.18.0, build 8dd22a9
  • docker version 17.12.0-ce, build c97c6d6

Clone

First steps will be to pull this repo and change into the repositories root directory with the following commands:

git clone https://github.com/castlemilk/demo1.git
cd demo1

Build the stack [OPTIONAL]

This will carry out the steps to freshly build all of the docker images used/developed for this stack. Alternatively, if this step is skipped, then we'll be using docker images hosted on docker hub

docker-compose build

Start the stack

This will execute the available docker-compose.yml file, carrying out all the steps to create our multi-tiered architecture, and initialising all the containers with their required data and configuration.

docker-compose pull
docker-compose up --no-build -d

Run on different port

If your local environment does'nt support running on lower port ranges then we can get the stack to run on a different higher port. This can be achieved by setting the docker-compose.yml file as follows:

services:
  ...
  proxy:
    ...
    ports:
      - <insert-higher-port-here>:80
    
  ...

check/validate the stack

Once the stack is up and running (hopefully without issues), we can check the status of the stack via:

docker ps | grep demo

Or

docker-compose top

view the output of the stack

Assuming there's no issues binding to port 80 on localhost, it should be possible to browse to:

localhost

Example of UI

Initially

After a few clicks

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.