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.
### 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;"]
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):
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/
docker commit 21737e7ab73b vitorstick/vitorspace:v1
docker tag vitorspace-image vitorstick/vitorspace
docker push vitorstick/vitorspace
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.
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.