Why Does Cypress Only Work with VueJS Development Server but Not With Nginx on GitLab.com's CI/CD

GitLab CI/CD
1

Why Does Cypress Only Work with VueJS Development Server but Not With Nginx on GitLab.com’s CI/CD

I am trying to run end-to-end tests using Cypress on GitLab.com’s CI/CD against a NGINX container serving a compiled VueJS app. Oddly, Cypress on GitLab’s CI/CD works when testing against a NodeJS container running the VueJS development server. Running the Cypress e2e test works locally with Docker Compose when running against a NodeJS development server or NGINX with a compiled VueJS app.

When Cypress on GitLab.com’s CI/CD tries to test against the NGINX container serving a compiled VueJS app, it goes into a endless loop described here: GitLab CI/CD Endless Loop · Discussion #14310 · cypress-io/cypress · GitHub

Here are the configurations I’m using:

I’ve tried running cypress with a more verbose logging: DEBUG=cypress:* cypress run, but I could not find anything in the logs that were obvious. The logs are posted here: GitLab CI/CD Endless Loop · Discussion #14310 · cypress-io/cypress · GitHub

Thank you for your time and help :slight_smile:

In case it is easier, here’s the configurations linked to from above:
CI/CD Job Configuration:

end-to-end-test:
  <<: *base
  image:
    name: cypress/included:6.1.0
    entrypoint: [""]
  services:
    - name: $DEVELOPMENT_CONTAINER_IMAGE
      alias: frontend
      command: ["scripts/start_app.sh"]
    - name: $PRODUCTION_CONTAINER_IMAGE
      alias: app
    - name: registry.gitlab.com/porter4/backend/master:latest
      alias: backend
      command: ["scripts/start_app.sh"]
    - name: postgres:13.0
      alias: database
  variables:
      DATABASE_HOST: database
      DATABASE_PORT: 5432
      POSTGRES_DB: porter_pipeline
      POSTGRES_USER: porter_app
      POSTGRES_PASSWORD: password
      GIT_STRATEGY: fetch
      CYPRESS_baseUrl: http://frontend:8080/
      FF_NETWORK_PER_BUILD: 1 # allow service containers to reach each other
      # https://forum.gitlab.com/t/ci-cd-inter-service-networking/19903/5
  before_script:
    - cd /builds/porter4/frontend/
    - ls -la
  script:
    - echo "production container specific testing is yet to come"
    - scripts/install_dependencies.sh
    - curl frontend:8080
    - curl app:80
    #- curl database:5432
    #- curl backend:8000
    - cypress run
  after_script:
    - cp -r tests/e2e/ /builds/porter4/frontend/.
  artifacts:
    paths:
      - e2e/
    when: always
  allow_failure: true
  timeout: 10 minutes

Dockerfile:

FROM registry.access.redhat.com/ubi8/nodejs-12 as development
ARG APP_DIR=/usr/src/app/
WORKDIR ${APP_DIR}/

USER root
RUN rpm -ivh \
  https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm
RUN yum --nobest --assumeyes update && yum --allowerasing --assumeyes install \
    ShellCheck \
  && yum clean all

COPY package*.json ${APP_DIR}/
COPY scripts/install_dependencies.sh ${APP_DIR}/scripts/install_dependencies.sh
RUN scripts/install_dependencies.sh

COPY . ${APP_DIR}


FROM development as builder
ARG VUE_APP_BACKEND_SCHEME=http
ARG VUE_APP_BACKEND_HOST=localhost
ARG VUE_APP_BACKEND_PORT=8000
ARG VUE_APP_BACKEND_PATH_PREFIX=

RUN scripts/build_app.sh


FROM nginx:1.19.4-alpine as production
ARG APP_DIR=/usr/src/app/
ARG WEB_DIR=/usr/share/nginx/html/
ARG WEB_CONF_DIR=/etc/nginx/
WORKDIR ${WEB_DIR}/

RUN apk update \
  && rm -rf /var/cache/apk/*

COPY production/nginx.conf ${WEB_CONF_DIR}/.
COPY --from=builder ${APP_DIR}/dist/ ${WEB_DIR}/