Dockerize Angular app and deploy on OpenShift
Tags: angular, docker, openshift
Published: 2020-05-03 20:57:27

I've been experimenting with several tools and would like to share my latest experience:
Deploy an Angular application created with SSR inside a Nwrl Nx workspace, and then dockerize it and deploy on RedHat OpenShift.

_Why use Angular with SSR?_
I wanted to try to have a 100% lighthouse audit application, and despite my Angular experience, never worked on an angular project using server side rendering, so, building a personal website, was a good opportunity to experiment and have that 100% on performance.

_Why chose RedHat OpenShift?_
Simple, I like the red hat that the girls that promote the service use, and I have used AWS and Azure solutions. Also very important, they have a free option.


### First Step (assuming the application already exist), creating the Dockerfile


```
### STAGE 1: Build ###
FROM node:lts-alpine AS build

#### make the 'app' folder the current working directory
WORKDIR /usr/src/app

#### copy both 'package.json' and 'package-lock.json' (if available)
COPY package*.json ./

#### install angular cli
RUN npm install -g @angular/cli

#### install project dependencies
RUN npm install

#### copy things
COPY . .

#### generate build --prod
RUN npm run build:ssr

### STAGE 2: Run ###
FROM nginxinc/nginx-unprivileged

#### copy nginx conf
COPY ./config/nginx.conf /etc/nginx/conf.d/default.conf

#### copy artifact build from the 'build environment'
COPY --from=build /usr/src/app/dist/vitorspace/browser /usr/share/nginx/html

#### don't know what this is, but seems cool and techy
CMD ["nginx", "-g", "daemon off;"]
```

Remarks:
Had to use **nginxinc/nginx-unprivileged** due to problems on OpenShift with nginx permissions _(thank you random stranger on stackoverflow that suggested it)_.

On package.json the script for **build:ssr** is
`"build:ssr": "ng build --prod vitorspace && ng run vitorspace:server:production"`, remember, this is an angular application with server side rendering.

The **nginx.conf** configuration _(I am trying a lighthouse 100% angular application, so I needed that)_:
```
server {
    listen 0.0.0.0:8080;
    listen [::]:8080;
    default_type application/octet-stream;

    gzip                    on;
    gzip_comp_level         6;
    gzip_vary               on;
    gzip_min_length         1000;
    gzip_proxied            any;
    gzip_types              text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
    gzip_buffers            16 8k;
    gunzip on;
    client_max_body_size    256M;

    root /usr/share/nginx/html;

    location / {
        try_files $uri $uri/ /index.html =404;
    }
}
```


### Second Step - sending docker image to dockerhub
You need a dockerhub account

*Build the image*
`docker build -t vitorspace-image .`

*Run the image to test it*
`docker run --name vitorspace-container -d -p 8888:80 vitorspace-image`

*browser it http://localhost:8888/*

*Commit image*
`docker commit 21737e7ab73b vitorstick/vitorspace:v1`

*Tag image*
`docker tag vitorspace-image vitorstick/vitorspace`

*Push image*
`docker push vitorstick/vitorspace`


### Third Step - publishing it on RedHat OpenShift
Assuming you already have a account

![alt text](https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRxF4VCKtsre9L7aUbDPTfNIABdI5QCagOqnVxfNRKZOPmtjUCV&usqp=CAU "Logo OpenShift")

*Create OpenShift Project*

![alt text](https://i.imgur.com/T34K1zy.png "Create Project")


Chose *Workload* Option and Select *Container Image*

![alt text](https://i.imgur.com/EhaajW1.png "Workload options")


Don't forget the docker image path, and then just say what will be your application path

![alt text](https://i.imgur.com/r6IEWJf.png "Create Project With docker")

On the bottom of the same form, on *Advanced Options*, just pick the _Create a route to the application_ and you will have an url to try and share your application.

![Alt text of image](https://media.giphy.com/media/2HONNTJbRhzKE/giphy.gif)


### Conclusions
OpenShift have a lot of options, about pods, configurations, and a lot of other things, but honestly I am a developer, not a devops, and spending a lot of time changing yaml files does not bring me any joy, and that's what I really liked in OpenShift, it's super easy to use (after doing it the first time)

The main reason for me to create and share this article, was the pain I felt doing some of this things for the first time, and like me, maybe I can help some of you.


If you have any suggestion about anything, please share.