Controller Container

ControllerContainer

This series illustrates the steps necessary to convert an automation portal to a linked, operational series of Docker Containers. The Introduction for this series is at Docker Container TOC.     The theory of operation of the base automation portal is at Automation Portal.  The Model/View/Controller concept is a functional decomposition of the components of a portal app.  “Controller” represents the code necessary to execute the Angularjs  directives contained in the HTML page.  Angularjs and js files  simplify the amount RESTful queries to the server and increase the amount of local client activity for web page “View” changes/updates. Angularjs will make RESTful queries to the client’s copy of the Model’s Python code for DB or I/O handling.

Scope

This entry describes modifications to the Controller code for containerization. The Controller must include functions for each HTML directive and RESTful queries to the “Model” for any necessary I/O. 
 

Dockerfile

The Docker Containerization of the Controller requires a Dockerfile, which will install all files and libraries (minus the kernel) necessary for the container to support the Controller function in the way that hosted apps would support the same functionality. The Controller Dockerfile is annotated as follows. Yes, this Dockerfile has test code and a few too many update/upgrade/restart statements. Optimize your production Dockerfile for efficiency.

############################################################
# Dockerfile to build angular script and js reference container images.
# these scripts must be referenced and reachable as urls by the “View” HTML of the model container
# Based on Ubuntu
############################################################

# Set the base image to Ubuntu
FROM ubuntu:latest

# File Author / Maintainer
MAINTAINER Mike Pate

# Update the repository sources list
RUN apt-get update

################## BEGIN INSTALLATION ######################
#install curl
RUN apt-get install curl -y
################## Prerequisites ####################
################## apache server #####
#install apache server This container serves js and CSS files to RESTful queries by the Model’s View HTML
RUN apt-get install apache2 -y
RUN apt-get update -y
#
###################### Install Bower Foundational Apps ####################

# Bower is a package installation manager for installations of Angular, jquery bootstrap, and CSS

# Bower requires GIT, NPM, nodejs
RUN apt-get install git -y
# Install Node.js on your server
RUN apt-get install nodejs -y
#Install npm on your server
RUN apt-get install npm -y
# your binary may be called nodejs instead of node
RUN ln -s /usr/bin/nodejs /usr/bin/node
RUN apt-get update
################## Directory Structures ##############
#create directory structure
################## where HTML Resides ##############
RUN mkdir Container_BGP_Portal
################## where Bower resides #############
RUN mkdir Container_BGP_Portal/Bower
################## where angularjs script ##########
RUN mkdir Container_BGP_Portal/js
#
################## Bower Install #################
#into target directory
RUN npm install bower -g –allow-root Bower doesn’t prefer to be installed as ROOT and Container’s installed user is ROOT
RUN apt-get update -y
# Using yes with empty string will be like hitting enter to accept the defaults.
RUN echo ‘{ “allow_root”: true }’ > /root/.bowerrc
################### Angularjs ######################
COPY wrapper.sh wrapper.sh
RUN chmod +x wrapper.sh
WORKDIR “/var/www/html” base HTML file and Bower base directory
################### Bootstrap and BOWER Components #####################
Copy bower.json ./bower.json created an initial bower.json file since interractive “bower init” doesn’t run on a Container
RUN bower install angularjs –save
RUN bower install bootstrap –save
RUN bower install jquery –save
RUN bower install ng-ip-address –save ip address format verification js
RUN bower install bootstrap-css –save
COPY app-ip.js app-ip.js ip address format verification js
################## Copy application js scripts over ##########
COPY announce_prefix3.js announce_prefix3.js the application’s Angularjs file
RUN chmod +x announce_prefix3.js
RUN chmod +x app-ip.js
RUN bower update
RUN apt-get update -y
RUN apt-get upgrade -y
WORKDIR “/”
# Set container command
CMD ./wrapper.sh

 

AngularJS Code Changes

The Containerized AngularJS code in the file announce_prefix3.js has minor changes w/r to the code in the original application file of the same name. The only coding changes involve how the AngularJS makes RESTful calls back to the Model. RESTful calls must reference a complete port 80 url including the hostname of the MODEL, followed by the correct app/roiute as follows:

$scope.Repush = function () {

            $scope.PhaseOne = false

            $scope.repush = true

            $http({

                method: ‘POST’,

                url: ‘/repush’,

in the original file becomes

$scope.Repush = function () {

           $scope.PhaseOne = false

           $scope.repush = true

           $http({

               method: ‘POST’,

               url: ‘http://MyContainerCl.com/repush’​

in the Containerized file.

 

 

Bower.json

After installing Bower, a Bower project is usually initialized by executing “bower init”, which creates the initial bower.json file.  Bower.json is a file which builds lists of Bower dependencies as Bower installs js, CSS and jquery files.   “Bower init” would be started as a part of the Dockerfile exection and starts a user interaction which is not supported well during the execution of the Dockerfile.  Therefore a template of a bower.json file is copied to the container during its Dockerfile build phase, obviating the need for executing “bower init”.
 
 {
“name”: “html”,
“description”: “”,
“main”: “”,
“license”: “MIT”,
“homepage”: “”,
“ignore”: [
“**/.*”,
“node_modules”,
“bower_components”,
“test”,
“tests”
],
“dependencies”: {
}
}

Wrapper.sh

 

#!bin/bash
service apache2 restart
/bin/bash
 

 

Summary

Installing Apache and employing Bower to install necessary CSS jquery and js files permits the Controller file to serve necessary js and CSS files to the base HTML.  The installed Angularjs file “announce_prefix3.js” will serve the directives of the base HTML.