DEV Community: Abbas Ogaji

How to dockerize your laravel app for heroku container registery

Abbas Ogaji — Thu, 18 Nov 2021 07:27:46 +0000

Its important to note that the build steps you will find right here is a basic starting point for dockerizing your laravel app in development environment. and this could be useful for teams that have a development environment hosted in heroku. this is not a production setup

First let's outline the steps required for starting up a laravel project in development environment.

1- Installing PHP and Composer

PHP is the language of the framework and composer is the dependency manager for the project,

2- Using Composer to install project dependencies

The Laravel framework utilizes Composer for installation and dependency management.

3- Serving your Laravel project using the artisan cli tool

When we want to run our laravel project we run the php artisan serve command to serve our project at port 8000 by default

Now lets Dockerize;
The first step in writing our docker build steps is determing the base image for our docker container and the various dependencies that we would to install in our docker container to have our laravel project running confortably.

Our base image will be a php:8.0.5 which is basically a linux image with php installed

In the next step we will run the command below to update our package/dependency manager and dependences required for our laravel project

apt-get update -y && apt-get install -y openssl zip unzip git

Next is to install composer by running this command

curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer

We might also like to install php extensions for mysql support and pdo for those using a mysql database in their project

docker-php-ext-install pdo_mysql

Then we install our laravel project dependency via composer

composer install --optimize-autoloader --no-dev

Now the tricky part is serving the application. Usually when serving our laravel application, port 8000 is allocated by default as the server port. but heroku platform doesnt respect ports defined by us, so we must make use of the PORT provided by heroku, luckly heroku defines an environment variable $PORT
so therefore we will write the command to server the application this way 👇

php artisan serve --host=0.0.0.0 --port $PORT

Now putting all of this together in a Dockerfile at our root directory, we will have this👇

FROM php:8.0.5
RUN apt-get update -y && apt-get install -y openssl zip unzip git
RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer
WORKDIR /app
COPY . /app
RUN composer install --optimize-autoloader --no-dev
CMD php artisan serve --host=0.0.0.0 --port $PORT
EXPOSE $PORT

And for laravel projects using mysql we will have this👇;

FROM php:8.0.5
RUN apt-get update -y && apt-get install -y openssl zip unzip git
RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer
RUN docker-php-ext-install pdo_mysql
WORKDIR /app
COPY . /app
RUN composer install --optimize-autoloader --no-dev
CMD php artisan serve --host=0.0.0.0 --port $PORT
EXPOSE $PORT

Learning Rust : Match Statements

Abbas Ogaji — Sat, 06 Feb 2021 07:37:23 +0000

Rust has an extremely powerful control flow operator called match that allows you to compare a value against a series of patterns and then execute code based on which pattern matches. Patterns can be made up of literal values, variable names, wildcards, and many other things; (source)

Match statement are kind of similar to switch statements; below is an example of how to use a match statements in rust

    let country_code = 234;
    let country = match country_code{
        44 => "United Kingdom",
        234 => "Nigeria",
        7 => "Russia",
        1 => "USA",
        _ => "Unknown"
    };
    println!("the country with code {} is {}", country_code, country)

OUTPUT: "the country with code 234 is Nigeria"

The Breakdown;

1) The match control flow operation begins with the match keyword followed by the value or variable used for comparison.
2) After the keyword and variable is the expression. the match expressions are encapsulated within curly brackets.
3) In the expression, the left hand side is the pattern and the right hand side is the code executed when the pattern matches, here we are returning a string value.
Notice the _ pattern at the bottom?. The _ pattern is a special pattern that will match any value. By putting it after our other arms, the _ will match all the possible cases that aren’t specified before it.

Advantages of a Decentralized Web Over Centralized Web (Content vs Location based addressing)

Abbas Ogaji — Sun, 16 Aug 2020 12:02:56 +0000

Centralized Web

On a centralized web we access data via URLs, these URLs provides information for locating and identifying a resources provided by a central authority

so when we do;

GET - https://cakes.com/blue-cake.png

...we are hereby requesting for blue-cake.png located at cakes.com, some of the few drawbacks of (getting a resource via location based addressing on a) centralized web is;

We cannot verify the content of the resource
We can have duplicates of this resource all across the internet
We cannot truly verify the ownership of this particular resource
We left to assume that the authority providing this resource is trustworthy

Decentralized Web

But on a decentralized web, data stored are identified by a cryptographic hash (which serves as a fingerprint signature for a resource), since a hash value can uniquely identify a resource, all attempts to store duplicates of a resource across network can be evaded.

therefore, when we do a

GET - https://decentralized.web/66FAC571933F185C3C4E4F03C01E76B66978DD13

we are hereby requesting for resource with the hash value 66FAC571933F185C3C4E4F03C01E76B66978DD13 at decentralized.web (with is a decentralized network of resource owning nodes, where the active node that owns this resource would provide it to the end user)

So on a decentralized web;

We can verify the content of the resource
We can verify the owner of the resource
We can avoid data redundancy and duplicate data all over the internet

For more info about decentralized web :

https://ipfs.io/#how For more info about Cryptographic:
https://en.wikipedia.org/wiki/Cryptographic_hash_function
https://en.wikipedia.org/wiki/SHA-2

TL;DR: DNS Cache Poisioning;

Abbas Ogaji — Sun, 09 Aug 2020 11:48:21 +0000

Impersonating an Authoritative nameserver and forging a reply to the DNS server requesting for information,
Reply gets cached (meaning DNS server ends up caching wrong information)
e.g DNS server ask for IP address of a Domain name Attackers forges a reply with the wrong IP and wrong IP gets cached

Extras:

a) What is a DNS Server :

DNS translates domain names to IP addresses so browsers can load Internet resources. the DNS Server handles this task of finding the right IP address for the domain name entered

b) What is a Nameserver:

They hold information about domain names and their associated ip addresses

TL;DR : RFC 6238, TOTP (Time based one time password)

Abbas Ogaji — Sun, 19 Jul 2020 09:53:35 +0000

Used in:

Google Authenticator.
Twillio Authy e.t.c


// n digits 
TOTP = TRUCATE(HMAC(secret_key, counter))%10^n

Where;

secret_key = shared between client and server
counter = floor(unix-time/time step)

Hash will be truncated, converted to decimal divided by 10^n (where n is the number of otp digits), the result of the remainder will give you an n length integer, which is our OTP code

How to write a custom *ngIf directive to display only authorized views

Abbas Ogaji — Wed, 05 Feb 2020 10:10:14 +0000

Imagine a scenario where you have a page or form that should only display certain sections or fields based on a user role or authority in an application. For this, you would probably need conditional statements that would drive your display. Traditional *ngIf directive could be used, but for this use-case, we will write a custom derivate with more features;

So let's go:

For our use-case, a user is provided with an array of viewable sections based on role/level/authority, so that a section of a page will only be displayed if it's included in the array.

const userViewableSections = ["bio-section", "friends-section", "posts-section"]

Our custom directive name would be "isAuthorized"
we would add an asterisk(*) to our directive name *isAuthorized to make use of Angular's microsyntax
Our directive will be written like this;


import { Directive, TemplateRef,ViewContainerRef, Input, OnInit, OnChanges  } from '@angular/core';

@Directive({ selector: '[isAuthorized]'})
export class IsAuthorizedDirective implements OnInit, OnChanges{
  @Input() isAuthorizedIn : string[]
  @Input() isAuthorized : string
  private hasView = false;

  constructor(private templateRef: TemplateRef<any>, 
              private vcr: ViewContainerRef) { }

  ngOnInit() {
    this.configureView()
  }

  ngOnChanges(){
    this.configureView()
  }

  configureView(){
    const isAuthorized = this.isAuthorizedIn.some(i => i == this.isAuthorized)

    if (isAuthorized && !this.hasView) {
        this.vcr.createEmbeddedView(this.templateRef);
        this.hasView = true;
    } else if (!isAuthorized && this.hasView) {
        this.vcr.clear();
        this.hasView = false;     
    }
  }
}

Directive Breakdown:

TemplateRef and ViewContainerRef:

TemplateRef represents an embedded template that can be used to instantiate embedded views, so the HTML snippet that houses our directive becomes a templateRef which is then instantiated by the ViewContainerRef.

Microsyntax

Angular's microsyntax features provides us options to pass parameters with the format below;

*isAuthorized="'bio-section'; in : userViewableSections"

the string 'bio-section' is mapped to @Input() isAuthorized and "...; in : userViewableSections" maps the userViewableSections array to @Input() isAuthorizedIn; the microsytax will resolve the "in" to recognize a @Input() variable with "in" appended to the parent directive @Input in camel case format (i.e isAuthorized + In = @Input() isAuthorizedIn)

Summary

In summary, the directive displays our template if the string passed into @Input() isAuthorized, exists in array passed into @Input() isAuthorizedIn

See Screenshots below;

PAGE :

COMPONENT HTML

Check out the complete project on GitHub; Project Link

How to write a custom structural directive to display only authorized sections of a page in Angular

Abbas Ogaji — Wed, 05 Feb 2020 09:55:09 +0000

So let's go:

For our use-case, a user is provided with an array of viewable sections based on role/level/authority, so that a section of a page will only be displayed if it's included in the array.

const userViewableSections = ["bio-section", "friends-section", "posts-section"]

Our custom directive name would be "isAuthorized"
we would add an asterisk(*) to our directive name *isAuthorized to make use of Angular's microsyntax
Our directive will be written like this;


import { Directive, TemplateRef,ViewContainerRef, Input, OnInit, OnChanges  } from '@angular/core';

@Directive({ selector: '[isAuthorized]'})
export class IsAuthorizedDirective implements OnInit, OnChanges{
  @Input() isAuthorizedIn : string[]
  @Input() isAuthorized : string
  private hasView = false;

  constructor(private templateRef: TemplateRef<any>, 
              private vcr: ViewContainerRef) { }

  ngOnInit() {
    this.configureView()
  }

  ngOnChanges(){
    this.configureView()
  }

  configureView(){
    const isAuthorized = this.isAuthorizedIn.some(i => i == this.isAuthorized)

    if (isAuthorized && !this.hasView) {
        this.vcr.createEmbeddedView(this.templateRef);
        this.hasView = true;
    } else if (!isAuthorized && this.hasView) {
        this.vcr.clear();
        this.hasView = false;     
    }
  }
}

Directive Breakdown:

TemplateRef and ViewContainerRef:

Microsyntax

Angular's microsyntax features provides us options to pass parameters with the format below;

*isAuthorized="'bio-section'; in : userViewableSections"

Summary

In summary, the directive displays our template if the string passed into @Input() isAuthorized, exists in array passed into @Input() isAuthorizedIn

See Screenshots below;

PAGE :

COMPONENT HTML

Check out the complete project on GitHub; Project Link

How to Dockerize your NestJS App for production

Abbas Ogaji — Sat, 28 Dec 2019 13:41:00 +0000

As we all know Docker is not just another buzzword, but one of the best containerization tool for software engineers. With the ability to ship any application regardless of its environmental requirements docker has solved problems in development and production stage like; inconsistencies when running your application with the phrase popularly known as "urghh..but it worked on my PC!"

This tutorial shows how to Dockerize a Nestjs app, built with the Nestjs CLI and Docker.

Requirements

Docker installed
A NestJs app

1. Docker Installation

a) For the installion guide on windows visit https://docs.docker.com/docker-for-windows/install/

b) For the installation guide on Linux visit
https://docs.docker.com/install/linux/docker-ce/ubuntu/

c) For the installation guide on macOs visit https://docs.docker.com/docker-for-mac/

2. NestJs Application

Create and develop your NestJs application or use the sample project provided below for the demo:
https://github.com/abbasogaji/dockerized-nestjs-production-app

Your nestJs application project structure usually would look like this:

And its associated npm commands for running, testing and building your nestJs project are found in your package.json's scripts object (property);

Some of these commands will be used when we dockerize our application.

NOW WE WRITE OUR Dockerfile

FROM node:10 AS builder
WORKDIR /app
COPY ./package.json ./
RUN npm install
COPY . .
RUN npm run build


FROM node:10-alpine
WORKDIR /app
COPY --from=builder /app ./
CMD ["npm", "run", "start:prod"]

Breakdown

The build process is divided into two steps (multi-step build);
- The First step uses node:10 as base image, installs dependencies and transpiles Typescript files to Javascript. Full node image is used for this process since it contains all the necessarity build tools required for dependencies with native build (node-gyp, python, gcc, g++, make)
- The Second step uses node:10-alpine (lightweight version), copies file-system from the first step's (intermediate) container, sets command for running the application. A multi step build process was setup to efficiently install our dependencies at first step and to run a lightweight container from image the of our final step.
In First step;
- We will set our application directory to "/app", so our application is bundled into "/app" in our docker image file-system
- We will COPY our "package.json" then run "npm install" before we copy the remaining project files because that will prevent unnecessary installs anytime we re-build our image and make use of cached installs.
- We will run "npm run build" to generate production files at "dist/main" directory which is required by our "run" command in production context i.e (npm run start:prod)
In Final step;
- We will set our application directory to "/app", so our application is bundled into "/app" in our docker image file-system
- We will copy the file-system of the previous step.
- We will set command for running our application

Create .dockerignore to avoid copying node_modules; so in your .dockerignore you type in "node_modules" and now you have your Dockerfile and .dockerignore file at your base directory of your project as shown below;

Now we build our image, assign a tag with the format "docker-username/project-name" then push to docker hub by running:

 docker build -t exampleuser/dockerized-nest-project .

 docker push exampleuser/dockerized-nest-project

Question: Now we are done; but wait a minute? EXPOSE port command was omitted?.
Answer: because EXPOSE command is not respected by some Paas (Platform as service) providers e.g (Heroku).

but if you deploy your docker image to a cloud provider that requires EXPOSE command which maps your docker network ports to your host port. then you should add "EXPOSE 3000" IN Dockerfile before the last CMD command;

# Using Node:10 Image Since it contains all 
# the necessary build tools required for dependencies with native build (node-gyp, python, gcc, g++, make)
# First Stage : to install and build dependences

FROM node:10 AS builder
WORKDIR /app
COPY ./package.json ./
RUN npm install
COPY . .
RUN npm run build


# Second Stage : Setup command to run your app using lightweight node image
FROM node:10-alpine
WORKDIR /app
COPY --from=builder /app ./
EXPOSE 3000
CMD ["npm", "run", "start:prod"]

Note : Using Multi-Step build process to dockerize our nestjs application isn't a necessity and was only used because we would like our image to be lightweight. for a single step build process we will write the following;

# Using Node:10 Image Since it contains all 
# the necessary build tools required for dependencies with native build (node-gyp, python, gcc, g++, make)

FROM node:10
WORKDIR /app
COPY ./package.json ./
RUN npm install
COPY . .
RUN npm run build
# EXPOSE 3000
CMD ["npm", "run", "start:prod"]

Then finally we will have to rebuild, deply and run the image