Kubernetes Frontend Pipeline (Gitlab Runner)

kubernetes-frontend-pipeline.md

Environment variables

Environment variable	Description
KUBECONFIG	Address pointing to the kubeconfig.yaml file

Pipeline

.gitlab-ci.yml

image: docker:latest

stages:
  - install
  - build
  - package
  - deploy
  - restart

install:
  stage: install
  image: node:14.15.1
  script:
    - cd Frontend
    - npm install
    - npx ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points
  artifacts:
    expire_in: 1 day
    paths:
      - Frontend/node_modules/
  cache:
    paths:
      - Frontend/node_modules/

build:
  stage: build
  image: node:14.15.1
  script:
    - cd Frontend
    - npx ng build --prod
  artifacts:
    paths:
      - Frontend/dist/
    expire_in: 1 day
  dependencies:
    - install

package:
  stage: package
  image: docker:stable
  only:
    - master
  services:
    - docker:stable-dind
  variables:
    DOCKER_DRIVER: overlay
    DOCKER_HOST: tcp://docker:2375
    DOCKER_TLS_CERTDIR: ""
  before_script:
    - docker login -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD $CI_REGISTRY
  script:
    - docker build -t $CI_REGISTRY_IMAGE:latest -f Frontend/prod.dockerfile Frontend
    - docker push $CI_REGISTRY_IMAGE:latest
  artifacts:
    paths:
      - Frontend/dist/
    expire_in: 1 day
  dependencies:
    - build

deploy:
  stage: deploy
  image:
    name: bitnami/kubectl:latest
    entrypoint: [""]
  when: manual
  script:
    - kubectl apply -f kubectl/prod/
  dependencies:
    - package

restart:
  stage: restart
  image:
    name: bitnami/kubectl:latest
    entrypoint: [""]
  script:
    - kubectl rollout restart -f kubectl/prod/*-deployment.yaml
  needs:
    - deploy

Image

prod.dockerfile

###########################################
# Node.js
FROM node:12.18.4 as build

# Change working directory
WORKDIR /usr/src/frontend/

# Copy package.json
COPY /package*.json /usr/src/frontend/

# Install dependencies
RUN npm install
RUN npx ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points

# Copy project files
COPY / /usr/src/frontend/

# Compile project
RUN npm run build

###########################################
# Debian 9
FROM debian:9 as serve

# Update container image
RUN apt-get update

# Install sudo
RUN apt-get install sudo -y

# Install apache
RUN sudo apt-get install apache2 -y

# Make project folder
RUN mkdir -p /var/www/frontend

# Copy compiled files
COPY --from=build /usr/src/frontend/dist/Frontend /var/www/frontend

# Copy httpd.conf
COPY /httpd.conf /etc/apache2/sites-available/000-default.conf

# Enable mod_rewrite
RUN sudo a2enmod rewrite

# Restart Apache Web Server
RUN sudo service apache2 restart

# Run apache
CMD apachectl -D FOREGROUND

httpd.conf

Listen 80

<VirtualHost *:80>
    ServerName <server name>
    ServerAlias <server name>
    
    # Document root
    DocumentRoot /var/www/frontend
    
    # Serve directory
    <Directory "/var/www/frontend">
        AllowOverride all
        Require all granted
    </Directory>
    
    # Logs
    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

.htaccess

RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
RewriteRule ^ /index.html