Overview

Skill Level: Intermediate

Broad Intermediate

This recipe illustrates a method for employing Bower package management in IBM Cloud K8s Containers.
Other topics by the author in the "Automation Series" can be found at: https://developer.ibm.com/recipes/author/patemic/

Ingredients

Deploying web and portal applications can involve components including but not exclusive to Python, NoSQL, Apache, jquery, angular and bootstrap. Managing dependencies between packages is challenging and the assistance of a package manager can be very helpful. Bower is an example of such a package manager. The installation of Bower lends itself to being interractive, but container installations are executed in scripted files such as Dockerfiles. This difference can cause a conflict when employing Bower as a package manager.  This recipe illustrates a method for employing Bower as a package manager in Dockerfiles that is compatible with IBM Cloud as well as other cloud providers.

Step-by-step

  1. The Case for a Package Manager

    Please refer to the previous recipe Model-View-Controller in Automation as an example of the necessary files and services to support a conventinal Model/View/Controller portal application. The installation of necessary files must be coordinated so that package conflicts are avoided. 

  2. The Case for Bower

    Bower is a package manager for fast loading minimized, web app front-end support files (Bootstrap, jQuery, angular). This feature supports the “View” and “Controller” operations of the Model/View/Controller based web app. Again, it helps to review the previous recipes¬†Model-View-Controller in Automation¬†and¬†Custom App in Kubernetes POD.¬†

  3. The Case for Colocating "View" Supporting Files

    So, Bower is a usefule front-end file package manager. Do CSS, Bootstrap and js files necessarily need to reside is a Container within the Kubernetes deployment along with the web app and backend NoSQL?¬† What about hosting those front-end support files elsewhere?¬† The browser can load them from a remote file repository as well. Consider that one of the advantages of a Kubernetes deployment is staged, rolling updates across all containers in a POD and all PODs. Hosting the web app front end files with the Kubernetes PODs can simplify app sustainment. In this instance, the web app front-end files including the “Controller” js file(s) are maintained within the “Controller” container, colocated in the Kubernetes POD.¬†

  4. Web App Front-end File Server

    Again; review the method by which the Controller container can serve web app front-end files in the recipe¬†Custom App in Kubernetes POD. Serving files to remote browsers requires reverse proxing the exposed Controller container’s exposed port to a publicly available Service (or load balanced) Port. Accomplishing the aforementioned requires the following discrete steps:

    1) establish the port at which Apache (or NGINX or whatever reverse proxy/server) accepts inbound connections in the Controller container, Example: Apache will accept inbound connections at port 8081. Set up the necessary Apache configuration files as follows:

    000-default.conf

    <VirtualHost *:8081>
    #blah

    ServerAdmin webmaster@localhost
    DocumentRoot /var/www/html

    ErrorLog ${APACHE_LOG_DIR}/error.log

    CustomLog ${APACHE_LOG_DIR}/access.log combined

    #blah
    </VirtualHost>

    ——————————–

    ports.conf

    # If you just change the port or add more ports here, you will likely also
    # have to change the VirtualHost statement in
    # /etc/apache2/sites-enabled/000-default.conf

    Listen 8081

    <IfModule ssl_module>
    Listen 443
    </IfModule>

    <IfModule mod_gnutls.c>
    Listen 443
    </IfModule>

    # vim: syntax=apache ts=4 sw=4 sts=4 sr noet

    —————————————–

    Create an initial bower.json file manually.¬† Executing “bower init” as a means to interractively create the necessary, initial dependency file results in an interrative mode, unsupported during Dockerfile execution. Create this file and configure the Dockerfile to copy it to the appropriate destination (/var/www/html/bower.json for apache2).¬†

    bower.json¬† —>

    {
    “name”: “html”,
    “description”: “”,
    “main”: “”,
    “license”: “MIT”,
    “homepage”: “”,
    “ignore”: [
    “**/.*”,
    “node_modules”,
    “bower_components”,
    “test”,
    “tests”
    ],
    “dependencies”: {
     }
    }

  5. Dockerfile: Prerequisites for Bower Installation

     

    In the aforementioned recipe example urls, the installation of Bower and the files it manages for the web portal app were accomplished as part of the “Controller” container build. The target of the controller build was to deploy the CSS, bootstrap, jQuery and Angularjs files necessary to support a dynamic, single page View. The necessary Dockerfile installation steps recommended prior to installing Bower are illustrated below:

    ############################################################
    # Dockerfile to build angular script and js reference container images.
    # these script ‚Äúpages‚ÄĚ must be referenced and reachable as urls by the client browser
    # Based on Ubuntu
    ############################################################

    # Set the base image to Ubuntu
    FROM ubuntu:latest

    # File Author / Maintainer
    MAINTAINER Brilliant IBM Programmer

    # Update the repository sources list
    RUN apt-get update –fix-missing

    ################## BEGIN INSTALLATION ######################
    #install curl for debug purposes
    RUN apt-get install curl -y
    ################## Prerequisites ####################
    ################## apache server #####
    #install apache server
    RUN apt-get install apache2 -y
    RUN apt-get update -y
    #
    #change apache2 listening port
    COPY ports.conf /etc/apache2/ports.conf
    COPY 000-default.conf /etc/apache2/sites-available/000-default.conf
    #install GIT.  GIT is necesary for Bower
    RUN apt-get install git -y
    # Install Node.js also necessary for Bower
    RUN apt-get install nodejs -y
    #Install npm on your server necessary for node.js
    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 Controllerjs_Portal
    ################## where Bower resides #############
    RUN mkdir Controllerjs_Portal/Bower
    ################## where angularjs script ##########
    RUN mkdir ControllerPortal/js
    #

  6. Dockerfile: Install Bower

    The following Controller container Dockerfile instructions complete the Bower installation. 

     

    ################## Bower Install #################
    #into target directory, as root (container user is root, normally issue for Bower installation) 
    RUN npm install bower -g –allow-root
    RUN apt-get update -y
    # 
    RUN echo ‘{ “allow_root”: true }’ > /root/.bowerrc

    WORKDIR “/var/www/html”

    ################### Bootstrap and BOWER Components #####################

    # Now, copy the initial bower.json file you created in the previous step

    Copy bower.json ./bower.json

    now use Bower to install compatible versions of front-end support files

    RUN bower install angularjs¬† –save

    RUN bower install bootstrap –save

    RUN bower install jquery –save

    RUN bower install ng-ip-address –save¬† ¬† ¬†(or other managed files for necessary services)

    RUN bower install bootstrap-css –save¬† ¬† ¬†

    #expose apache2’s listening port
    EXPOSE 8081

     

  7. Conclusion

    After the installation of Bower and the managed files for necessary services, Bower and all its consituent managed files can be updated along with other services via rolling Kubernetes updates.  

Join The Discussion