From 63e61c124158f9e8e69562bfe47d4eaaea5c351e Mon Sep 17 00:00:00 2001 From: Amexei Date: Mon, 21 Oct 2024 01:41:21 +0700 Subject: [PATCH 1/4] test run --- .github/workflows/ci.yml | 135 +++++++++++++++++++++++++++++++++++++++ Dockerfile | 39 +++++++++++ docker-compose.yaml | 15 +++++ nginx.conf | 22 +++++++ 4 files changed, 211 insertions(+) create mode 100644 .github/workflows/ci.yml create mode 100644 Dockerfile create mode 100644 docker-compose.yaml create mode 100644 nginx.conf diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml new file mode 100644 index 000000000..305637291 --- /dev/null +++ b/.github/workflows/ci.yml @@ -0,0 +1,135 @@ +name: CI Pipeline + +on: + push: + branches: + - main + +jobs: + test-and-build: + runs-on: ubuntu-latest + + steps: + # Bonus: STEAP 1 - Record time of job forund here - https://stackoverflow.com/a/72175840 + # - name: Set start timestamp + # id: start + # run: | + # printf 'timestamp=%(%s)T\n' >> "$GITHUB_OUTPUT" + + - name: Checkout code + uses: actions/checkout@v2 + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: 20.15.0 + + - name: Install packages + run: npm install + working-directory: app/angular + + - name: Lint code + run: npm run lint + working-directory: app/angular + + - name: Run tests + # No need for "continue-on-error: false" as it is Github Actions default + run: npm run coverage # "1.0.4" - npm run coverage would open browser so added "browsers": "ChromeHeadless" TO angular.json + working-directory: app/angular + + - name: Build + if: success() + run: npm run build + working-directory: app/angular + + # Github Packages explanation https://youtu.be/t3xRLAA_Y7Y + # Example of docker/setup-buildx-action https://dev.to/ken_mwaura1/automate-docker-image-builds-and-push-to-github-registry-using-github-actions-4h20 + + # Set up Docker Buildx + - name: Set up Docker Buildx + if: success() + uses: docker/setup-buildx-action@v3 + + # Log in to GitHub Container Registry + - name: Log in to GitHub Container Registry + if: success() + uses: docker/login-action@v3 + with: + registry: ghcr.io + username: ${{ github.actor }} + password: ${{ secrets.GHUB_TOKEN }} + + # Got from https://cicube.io/workflow-hub/docker-build-push-action/#how-to-push-docker-images-to-github-container-registry-with-github-actions . + - name: Build and push Docker image + if: success() + uses: docker/build-push-action@v2 + with: + context: ./app/ + push: true + # Error: buildx failed with: ERROR: invalid tag "ghcr.io/Amexei/angular-react-starter:latest": repository name must be lowercase + # Can't use github.repository as it's in uppercase my name Amexei + # + # Have to manually attach package to repository so it is visible inside repo https://stackoverflow.com/questions/73485013/github-package-successfully-published-but-not-showing-up-in-packages-section + tags: ghcr.io/${{ secrets.GHUB_REPOSITORY }}:lastest + + # Bonus: STEP 2 - Record time of job forund here - https://stackoverflow.com/a/72175840 + # - name: Set start timestamp + # id: duration + # run: | + # printf -v now '%(%s)T' + # duration=$((now - ${{ steps.start.outputs.timestamp }})) + + # Bonus calucate time Much easier solution - https://github.com/marketplace/actions/github-workflow-duration-calculator + - name: Calculate Steps Log Time + if: always() + id: duration + uses: RockyIsHere/actions-calculate-log-time@v0.2.4 + env: + GITHUB_TOKEN: ${{ secrets.GHUB_TOKEN }} + + - name: Print Calculated Time + run: | + echo "Calculated Time: ${{ steps.duration.outputs.duration }}" + + # If failure of success - https://stackoverflow.com/a/58859404 + # Got an exanole from - https://github.com/go-gitea/gitea/issues/23725#issuecomment-1691883600 + # Requires APP_PASSWORD from gmail https://stackoverflow.com/a/70929145 + - name: Send success email + if: success() + uses: dawidd6/action-send-mail@v3 + with: + server_address: smtp.gmail.com + server_port: 587 + username: ${{ secrets.SMTP_USERNAME }} + password: ${{ secrets.SMTP_PASSWORD }} + subject: ${{ github.repository }} ${{ github.workflow }} Success + priority: high + to: ${{ secrets.MAIL_TO }} + from: ${{ secrets.MAIL_FROM }} + convert_markdown: true + html_body: | + ### testing-code ${{ job.status }} + + *Duration*: ${{ steps.duration.outputs.duration }} + + ${{ github.repository }}: [${{ github.ref }}@${{ github.sha }}](${{ github.server_url }}/${{ github.repository }}/actions) + + - name: Send failure email + if: failure() + uses: dawidd6/action-send-mail@v3 + with: + server_address: smtp.gmail.com + server_port: 587 + username: ${{ secrets.SMTP_USERNAME }} + password: ${{ secrets.SMTP_PASSWORD }} + subject: ${{ github.repository }} ${{github.workflow}} ${{ job.status }} + priority: high + to: ${{ secrets.MAIL_TO }} + from: ${{ secrets.MAIL_FROM }} + convert_markdown: true + html_body: | + ### testing-code ${{ job.status }} + + *Duration*: ${{ steps.duration.outputs.duration }} + + ${{ github.repository }}: [${{ github.ref }}@${{ github.sha }}](${{ github.server_url }}/${{ github.repository }}/actions) diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 000000000..cf53e884a --- /dev/null +++ b/Dockerfile @@ -0,0 +1,39 @@ +# Specifying exact version that I have one my pc as it runs +# https://hub.docker.com/layers/library/node/20.15.0-alpine/images/sha256-89656a128d997717c1e97f9ee32f82274f332f1c6b70a30698cf9afc5ae46ad9 + +# ✍️ Resources +# https://medium.com/@bidyutnayak10/running-angular-apps-with-nginx-in-docker-anywhere-a-simple-guide-3e951b22f86f +# https://dev.to/oneofthedevs/docker-angular-nginx-37e4 + + +# ⭐ Serving the angular build on nginx server +FROM nginx:alpine + +# remove default nginx website +RUN rm -rf /usr/share/nginx/html/* +# Copying dist without node_modules +COPY ./angular/dist/angular-starter/browser/ /usr/share/nginx/html + +# Removing default nginx config and adding custom one +RUN rm /etc/nginx/conf.d/default.conf +COPY ./nginx.conf /etc/nginx/conf.d/default.conf + +# Default port +EXPOSE 80 + +# Got from https://medium.com/kocsistem/how-to-run-nginx-for-root-non-root-5ceb13db6d41 "What if we want to run NGINX as non-root user?" +RUN chown -R nginx:nginx /var/cache/nginx && \ + chown -R nginx:nginx /var/log/nginx && \ + chown -R nginx:nginx /etc/nginx/conf.d +RUN touch /var/run/nginx.pid && \ + chown -R nginx:nginx /var/run/nginx.pid + +USER nginx + +# To check if nginx is running from non-root user +# docker compose up -d +# docker exec -it /bin/sh +# RUN ps aux + +# This command runs in docker-compose.yml so container doesn't stop +CMD ["nginx", "-g", "daemon off;"] diff --git a/docker-compose.yaml b/docker-compose.yaml new file mode 100644 index 000000000..fc0e9e8da --- /dev/null +++ b/docker-compose.yaml @@ -0,0 +1,15 @@ +# Name of Stack for easier Portainer view +name: angular-web-task2 + +# 👉 CMD to run: docker compose up +services: + web: + image: "ghcr.io/amexei/angular-react-starter:lastest" + ports: + - "80:80" + command: nginx -g "daemon off;" +# 👉 CMD to run docker build image for first part of the task +# docker run -d -p 80:80 angular-web-task-web +# docker exec -it ❗container_id❗ /bin/sh +# curl localhost:80 +# docker container stop ❗container_id❗ diff --git a/nginx.conf b/nginx.conf new file mode 100644 index 000000000..ef841ae7c --- /dev/null +++ b/nginx.conf @@ -0,0 +1,22 @@ +# ❗ https://dev.to/oneofthedevs/docker-angular-nginx-37e4 used from here and followed this guide + +server { + listen 80; + sendfile on; + default_type application/octet-stream; + + gzip on; + gzip_http_version 1.1; + gzip_disable "MSIE [1-6]\."; + gzip_min_length 256; + gzip_vary on; + gzip_proxied expired no-cache no-store private auth; + gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript; + gzip_comp_level 9; + + root /usr/share/nginx/html; + + location / { + try_files $uri $uri/ /index.html =404; + } +} \ No newline at end of file From 68ecce44fda45a7875491d3611cd321acf68cde0 Mon Sep 17 00:00:00 2001 From: Amexei Date: Mon, 21 Oct 2024 01:53:09 +0700 Subject: [PATCH 2/4] test 2 --- .github/workflows/ci.yml | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 305637291..fe36f98d9 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -26,21 +26,21 @@ jobs: - name: Install packages run: npm install - working-directory: app/angular + working-directory: angular - name: Lint code run: npm run lint - working-directory: app/angular + working-directory: angular - name: Run tests # No need for "continue-on-error: false" as it is Github Actions default run: npm run coverage # "1.0.4" - npm run coverage would open browser so added "browsers": "ChromeHeadless" TO angular.json - working-directory: app/angular + working-directory: angular - name: Build if: success() run: npm run build - working-directory: app/angular + working-directory: angular # Github Packages explanation https://youtu.be/t3xRLAA_Y7Y # Example of docker/setup-buildx-action https://dev.to/ken_mwaura1/automate-docker-image-builds-and-push-to-github-registry-using-github-actions-4h20 @@ -64,7 +64,7 @@ jobs: if: success() uses: docker/build-push-action@v2 with: - context: ./app/ + context: . push: true # Error: buildx failed with: ERROR: invalid tag "ghcr.io/Amexei/angular-react-starter:latest": repository name must be lowercase # Can't use github.repository as it's in uppercase my name Amexei From 602f59d3bce4f82b075c77018ff97cfe2969fa79 Mon Sep 17 00:00:00 2001 From: Amexei Date: Mon, 21 Oct 2024 01:54:57 +0700 Subject: [PATCH 3/4] v3 --- angular/angular.json | 27 +++++++-------------------- 1 file changed, 7 insertions(+), 20 deletions(-) diff --git a/angular/angular.json b/angular/angular.json index 14ecf706c..891fd85b2 100644 --- a/angular/angular.json +++ b/angular/angular.json @@ -16,9 +16,7 @@ "outputPath": "dist/angular-starter", "index": "src/index.html", "browser": "src/main.ts", - "polyfills": [ - "zone.js" - ], + "polyfills": ["zone.js"], "tsConfig": "tsconfig.app.json", "assets": [ { @@ -26,9 +24,7 @@ "input": "public" } ], - "styles": [ - "src/styles.css" - ], + "styles": ["src/styles.css"], "scripts": [] }, "configurations": { @@ -79,10 +75,8 @@ "test": { "builder": "@angular-devkit/build-angular:karma", "options": { - "polyfills": [ - "zone.js", - "zone.js/testing" - ], + "browsers": "ChromeHeadless", + "polyfills": ["zone.js", "zone.js/testing"], "tsConfig": "tsconfig.spec.json", "assets": [ { @@ -90,28 +84,21 @@ "input": "public" } ], - "styles": [ - "src/styles.css" - ], + "styles": ["src/styles.css"], "scripts": [] } }, "lint": { "builder": "@angular-eslint/builder:lint", "options": { - "lintFilePatterns": [ - "src/**/*.ts", - "src/**/*.html" - ] + "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"] } } } } }, "cli": { - "schematicCollections": [ - "@angular-eslint/schematics" - ], + "schematicCollections": ["@angular-eslint/schematics"], "analytics": false } } From 34279707be0849b0a21228564816d292f0c8b2b5 Mon Sep 17 00:00:00 2001 From: Amexei Date: Mon, 21 Oct 2024 01:59:50 +0700 Subject: [PATCH 4/4] Added CI pipeline to publish docker package --- .github/workflows/ci.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index fe36f98d9..f15adf570 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -3,7 +3,7 @@ name: CI Pipeline on: push: branches: - - main + - master jobs: test-and-build: