Dockerize Angular app and deploy on OpenShift

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

Create OpenShift Project

Chose Workload Option and Select Container Image

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

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.

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.