Deploy Angular App to OCP

This is illustration of deploying AngularJS app to OCP, the code is taken from Red Hat Dev: https://github.com/redhat-developer-demos/Angular-openshift-example The change that is made to this repo is the base image in the Containerfile is using the OCP internal image: image-registry.openshift-image-registry.svc:5000/openshift/nodejs:16-ubi8 and also using version 16, which you can change based on your application requirements.

Steps:

To deploy the code to OCP you need a base image where you can invoke the angular installation and add your files to it.

You can use either S2I or Tekton pipeline for that.

DEPLOYMENT OPTION 1: Deploy using S2I

From the developer console, go to "Import from Git"

Fill in the source code of this repositorym click on advanced and add also the tag/branch and any context root.

Note: Repository renamed to "angular-ocp-demo"

Note: In case your respositiry is private, you need to have a service account or ssh key or user to be able to fetch the code.

OCP will detect the ContainerFile and will select DockerFile strategy (you can change the strategy but we need the DockerFile strategy for AngularJS app).

Give the app name and keep the build options as "Builds"

Click on "Create", OpenShift will handle the build and deployment of the application.

Note: If the Pod is in "Error" you can either delete it or scale to zero then 1 and it will be running successfully.

Click on the route and check the application:

DEPLOYMENT OPTION 2: Deploy using Tekton Pipeline

Follow the same step until you reach the Build Options, select "Pipeline" and select the pipeline as "Buildah Deployment"

Click on "Create'

As our ContainerFile name is needed for the pipeline, we need to open the pipeline and configure the name, so go to pipeline section and select our app pipeline and click on Edit from the action menu:

Select the build stage and add the container file name "Containerfile" in the dockerfile parameter field:

Click on start pipeline and keep the default, just add "main" to the Git revision and click on "Start"

Monitor the pipeline execution:

Click on the route and check the application:

DEPLOYMENT OPTION 3: Deploy using Builds for OpenShift

First you need to install the Builds for OpenShift Operator:

Once, installed create an instance of "Shipwright Build", keep the default

Install the Shipwright command line of the latest release from the following URL:

https://github.com/shipwright-io/cli/releases

Now, you can deploy the application by creating a Shipwright build either from the console or from the command line:

//create an openshift project
oc new-project dev

//create shipwright build for our application in the 'dev' project
//our project code is in the root of the Git repo, otherwise we could have used '--source-context-dir="docker-build"' flag to specify the context folder of our application.
//
shp build create angular-buildah --strategy-name="buildah" --source-url="https://github.com/osa-ora/angular-ocp-demo" --dockerfile="Containerfile"  --output-image="image-registry.openshift-image-registry.svc:5000/dev/angular-app"

//start the build and follow the output
shp build run angular-buildah --follow

//create an application from the container image
oc new-app angular-app

//expose our application
oc expose service/angular-app

//test our application is deployed ..
curl $(oc get route angular-app -o jsonpath='{.spec.host}')/

You can also click on the route to access the application as we did before.

You can do the same from the Dev Console

Go to "Builds" section and click on Create and select "Shipwright Build"

Post the following content:

apiVersion: shipwright.io/v1beta1
kind: Build
metadata:
  name: my-shipwright-build
  namespace: dev
spec:
  output:
    image: 'image-registry.openshift-image-registry.svc:5000/dev/angular-app'
  paramValues:
    - name: dockerfile
      value: Containerfile
  source:
    git:
      url: 'https://github.com/osa-ora/angular-ocp-demo'
      revision: main
    type: Git
  strategy:
    kind: ClusterBuildStrategy
    name: buildah

Note: For a private repository, you need to create a secret (that contains a username/password or ssh key) then modify the previous build to add this secret:

  source:
    git:
      cloneSecret: my-private-repo-token
      url: 'https://github.com/osa-ora/angular-ocp-demo'

Click on Create and then click on "Start Build", follow the logs:

Now, you can deploy the appliation using "oc new-app angular-app" or from the console using container image option:

Test the application route and we are done!

Deploy the App with a Private Repository

You can use any of the previous ways using the private repository configuration, go to the Containerfile and uncomment the private repository line:

# Configure this in case you need to build from a private repository, just change the url to ur registry url
RUN npm config set registry {your repository URL here}