Deploying Angular App with Gitlab CI

Infrastructure as Code & Cloud Native
,
1

Hello all,

I am trying to set up a pipeline that does the following:

  1. Commit new Angular code
  2. Build live review app for testing
  3. Manual push to production

I have been able to successfully build the app within the pipeline using a docker file and have the proper nginx configuration for routing it to the staging environment. Once the job passes, the staging environment is updateed but there is nothing running and the link provided gives a “default backend - 404” error message. I would appreciate any guidance on how to get this link to properly serve the live angular app. Thanks in advance.

Dockerfile:

  # Stage 0, "build-stage", based on Node.js, to build and compile the frontend
  FROM tiangolo/node-frontend:10 as build-stage

  WORKDIR /app

  COPY package*.json /app/

  RUN npm install

  COPY ./ /app/

  ARG configuration=production

  RUN cd /app && npm run build --prod --configuration $configuration


  # Stage 1, based on Nginx, to have only the compiled app, ready for production with Nginx
  FROM nginx:alpine

  RUN rm -rf /usr/share/nginx/html/*

  COPY --from=build-stage /app/dist /usr/share/nginx/html

  COPY /nginx-custom.conf /etc/nginx/conf.d/default.conf

  RUN cat /etc/nginx/conf.d/default.conf

Gitlab-ci.yml Deploy

deploy_stage:
  stage: deploy
  image: docker:stable-git
  services:
    - docker:stable-dind
  script:
    - docker build -t my-angular-project:prod .
    - docker run -d -p 80:80 my-angular-project:prod
  environment:
    name: staging
    url: http://$CI_PROJECT_PATH_SLUG-staging.$AUTO_DEVOPS_DOMAIN
  only:
    refs:
      - master
    kubernetes: active
    variables:
      - $STAGING_ENABLED

NGINX config

server {
  listen 80;
  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
}
2

the problem is in your nginx config, it has to be:

server {
 listen 80;
 root /usr/share/nginx/html;
 index index.html index.htm;
 location / {
    try_files $uri $uri/ /index.html =404;
 }
}

that means that all 404 route in nginx will be redirected index.html to serve your angular App