DevOps task formal PR

.github/workflows/build-angular.yml

@@ -0,0 +1,150 @@
+# --------------------------------------------------------------
+# GitHub Actions Workflow: build-angular
+# 
+# Description:
+#   This workflow automates the process of building, testing and packaging
+#   of the Angular app project.
+#   It consists of a single job with multiple steps, that insure
+#   succesful building and testing of the Angular app. After succesful
+#   building of the project, docker image is being created and uploaded
+#   to specified registry. After finishing the workflow, an email
+#   notification is being sent to a specified email address.
+#   Email contains total time of the workflow execution and it's status
+#
+# Triggers:
+#   - on: 
+#       - workflow_call: Executes on a call from another workflow
+#
+# Jobs:
+#   - build-Angular: builds, tests and packages an image of
+#     an Angular app, served by Nginx. Sends an email notification
+#     at the end of the workflow
+#
+# Notes:
+#   - Requires the following secrets to be passed from a calling workflow:
+#       email_username: username for email authorisation
+#       email_password: password for email authorisation
+#       mail_receiver: email address of the notification receiver
+#       mail_sender: displayed name of the notification sender
+#
+# Expected Outcome:
+#   - Successful execution of this workflow should result in a
+#     new image being published to the specified registry and email notification
+#     being sent to an address from GitHub secrets.
+#
+# --------------------------------------------------------------
+
+name: build-angular
+
+on:
+  workflow_call:
+    inputs:
+      mail_address:
+        description: "Mail server address"
+        default: "smtp.gmail.com"
+        required: true
+        type: string
+      mail_port:
+        description: "Mail server port"
+        default: 465
+        required: true
+        type: number
+      image_name:
+        description: "Name of the uploaded image"
+        required: true
+        type: string
+      registry:
+        description: "Package upload registry"
+        required: true
+        type: string
+    secrets:
+      email_username:
+        description: "Email username"
+        required: true
+      email_password:
+        description: "Email password"
+        required: true
+      mail_receiver:
+        description: "Email of the receiver"
+        required: true
+      mail_sender:
+        description: "The notification sender displayed name"
+        required: true
+
+jobs:
+
+  build-image:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./angular
+
+    steps:
+
+    - name: Checkout
+      uses: actions/checkout@v3
+
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version-file: angular/package.json
+
+    - name: Install Angular
+      run: npm ci
+
+    - name: Run Karma Tests
+      id: run-tests
+      run: npm run coverage -- --browsers=ChromeHeadless
+
+    - name: Build Angular
+      run: npm run build
+
+    - name: Login to the Container registry
+      uses: docker/[email protected]
+      with:
+        registry: ${{ inputs.registry }}
+        username: ${{ github.actor }}
+        password: ${{ github.token }}
+
+    - name: Extract metadata (tags, labels) for Docker
+      id: meta
+      uses: docker/[email protected]
+      with:
+        images: ${{ inputs.registry }}/${{ inputs.image_name }}
+        flavor: |
+          latest=true
+        tags: |
+          type=ref,event=branch
+          type=ref,event=pr
+
+    - name: Build and push Docker image
+      uses: docker/[email protected]
+      with:
+        context: .
+        push: true
+        tags: ${{ steps.meta.outputs.tags }}
+        labels: ${{ steps.meta.outputs.labels }}
+
+    - name: Get steps execution time
+      if: always()
+      id: duration
+      uses: RockyIsHere/[email protected]
+      env:
+        GITHUB_TOKEN: ${{ github.token }}
+
+    - name: Deliver email
+      if: always()
+      uses: dawidd6/action-send-mail@v3
+      with:
+        server_address: ${{ inputs.mail_address }}
+        server_port: ${{ inputs.mail_port }}
+        username: ${{secrets.email_username}}
+        password: ${{secrets.email_password}}
+        subject: GH Action ${{ github.repository }} ${{ github.workflow }} ${{ job.status }}
+        to: ${{ secrets.mail_receiver }}
+        from: ${{ secrets.mail_sender }}
+        convert_markdown: true
+        html_body: |
+          Workflow on ${{ github.repository }}: ${{ job.status }}
+          ---
+          Execution time: ${{ steps.duration.outputs.duration }}

.github/workflows/ci.yml

@@ -0,0 +1,60 @@
+# --------------------------------------------------------------
+# GitHub Actions Workflow: build-angular
+# 
+# Description:
+#   This workflow automates the process of building, testing and packaging
+#   of the Angular app project.
+#   It consists of a single job calling build-angular modular workflow
+#
+# Triggers:
+#   - on: 
+#       - push: Executes on a push to master.
+#       - pull_request: Executes on a pull request to master.
+#
+# Jobs:
+#   - build-Angular: Runs a callable workflow "build-angular", which
+#     builds, tests and packages an image of an Angular app, served by Nginx
+#     At the end of the workflow, calculates total time of execution and
+#     sends an email notification with the outcome and total time.
+#
+# Notes:
+#   - Requires the following secrets to be configured in the GitHub 
+#     repository:
+#       email_username: username for email authorisation
+#       email_password: password for email authorisation
+#       mail_receiver: email address of the notification receiver
+#       mail_sender: displayed name of the notification sender
+#   - Requires presence of the build-angular.yml workflow in
+#     the GitHub workflows folder
+#
+# Expected Outcome:
+#   - Successful execution of this workflow should result in [state 
+#     the outcome, e.g., "a new Docker image published to Docker Hub" 
+#     or "a deployed app on production servers"]. 
+#
+# --------------------------------------------------------------
+
+name: ci
+
+on:
+  push:
+    branches: [ "master" ]
+  pull_request:
+    branches: [ "master" ]
+
+jobs:
+
+  build-Angular:
+    uses: ./.github/workflows/build-angular.yml
+
+    with:
+      image_name: ${{ github.repository }}
+      registry: "ghcr.io"
+      mail_address: "smtp.gmail.com"
+      mail_port: 465
+
+    secrets:
+      email_username: ${{secrets.email_username}}
+      email_password: ${{secrets.email_password}}
+      mail_receiver: ${{ secrets.mail_receiver }}
+      mail_sender: ${{ secrets.mail_sender }}

Dockerfile

@@ -0,0 +1,9 @@
+# nginxinc/nginx-unprivileged:alpine3.20-perl
+FROM nginxinc/nginx-unprivileged@sha256:ccbef5da6a3ae2ffab0a440944c817adead587970772b5b911c54ffdf5832e27
+
+COPY ./nginx.conf /etc/nginx/nginx.conf
+COPY ./angular/dist/angular-starter /var/www/html
+
+USER nginx
+
+CMD "nginx"

README.md

@@ -217,4 +217,3 @@ Here is a step by step Tutorial :  https://www.ganatan.com/tutorials/getting-sta
 ## [Tutoriels React en français](#french-tutorials)
 - Installation - https://www.ganatan.com/tutorials/demarrer-avec-react
 - Tutoriels Etape par étape - https://www.ganatan.com/tutorials
-

angular/package.json

@@ -1,6 +1,9 @@
 {
   "name": "angular-starter",
   "version": "18.2.1",
+  "engines": {
+    "node": ">=18.19.1"
+  },
   "scripts": {
     "ng": "ng",
     "dev": "ng serve --port 4200",

docker-compose.yaml

@@ -0,0 +1,7 @@
+services:
+
+  nginx-angular:
+    container_name: nginx-angular
+    image: ghcr.io/lepavuki/angular-react-devops-case:pr-3
+    ports:
+      - 8080:8080

nginx.conf

@@ -0,0 +1,24 @@
+daemon off;
+pid /tmp/nginx.pid;
+
+events {
+
+    worker_connections   2000;
+
+}
+
+http {
+  include mime.types;
+
+  server {
+    listen 8080;
+
+    location / {
+
+      root /var/www/html/browser;
+      index index.html;
+
+    }
+
+  }
+}