Gitlab CI won't serve Angular app to staging environment

Question

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

Commit new Angular code Build live review app for testing 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;
  }
}

score 0 · Answer 1 · answered Nov 30 '18 at 09:56

There is problem with ports. Docker container cannot starts on port 80, because this port is used by nginx. You have two ways to solve it

1) expose docker directly If this is only one app on the server, stop nginx and docker bind on port 80 and serve files

2) Use Nginx as proxy expose docker on another port than 80, for example

- docker run -d -p 8080:80 my-angular-project:prod

and use nginx as proxy to this port

server {
  listen 80;
  location / {
    proxy_pass      http://127.0.0.1:8080;
  }
}

Gitlab CI won't serve Angular app to staging environment

1 Answers1