Frontend server cannot connect to backend in Github Actions

Question

I have been trying to run Cypress in Continuous Integration using Github Actions for a couple of days now and have encountered a problem that I cannot seem to find a fix for. I can start by telling what I have done in my yml file.

First I run node on 14.17.1 because our backend server requires that version to run.
Then I get the yarn cache directory path and try to cache several installation folders to save time each time this job runs
After that I install all my packages if there is no cache found
Then I start a mongodb server and do a mongorestore of my test database
Finally I run Cypress and use several settings according to Github Actions Cypress documentation: https://github.com/cypress-io/github-action . So I use my own config-file, I start my backend and frontend server and tell Cypres to wait until it gets a response from the frontend server. Frontend server is made with Vue 2.6.11 and Backend server is built with Node.js and Express.

Here is how my Github Actions yml file looks like:

name: GitHub Actions Test on: [push] jobs:  cypress-run:
runs-on: ubuntu-18.04
strategy:
  matrix:
    node: [14.17.1]
steps:
  - uses: actions/checkout@v2

  - uses: actions/setup-node@v2 
    with:
      node-version: '14.17.1'

  - name: Get yarn cache directory path
    id: yarn-cache-dir-path
    run: echo "::set-output name=dir::$(yarn cache dir)"

  - uses: actions/cache@v2.1.6
    id: yarn-cache
    with:
      path: |
        **/node_modules
        **/.eslintcache
        ${{ steps.yarn-cache-dir-path.outputs.dir }}
        /home/runner/.cache/Cypress
      key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
      restore-keys: |
        ${{ runner.os }}-yarn-

  - name: Install packages
    if: steps.yarn-cache.outputs.cache-hit != 'true'
    run: yarn --prefer-offline --frozen-lockfile

  - name: Create mongoDB Docker container      
    run: |
        sudo docker run -d -p 27017:27017 mongo:4.4.7 
        mongorestore --drop backup/test

  - name: Cypress run
    uses: cypress-io/github-action@v2
    with: 
      install: false
      record: true
      browser: chrome
      start: yarn backend:test, yarn frontend:test
      config-file: cypress/cypress-mobile.json
      wait-on: 'http://localhost:3030'
    env:
      AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
      AWS_BUCKET: ${{ secrets.AWS_BUCKET }}
      AWS_S3_REGION: ${{ secrets.AWS_S3_REGION }}
      AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
      NODE_ENV: test
      AWS_SES_EMAILADRESS: ${{ secrets.AWS_SES_EMAILADRESS }}
      PV_PASSWORD: ${{ secrets.PV_PASSWORD }}
      CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
      CYPRESS_CACHE_FOLDER: /home/runner/.cache/Cypress
      ACTIONS_RUNNER_DEBUG: true
      ACTIONS_STEP_DEBUG: true
      DEBUG: 'cypress:launcher'

So my problem is that when running the backend and frontend server in Github actions the frontend server cannot communicate with the backend server, it cannot find it. I have tried serveral things like running the server in older versions of Ubuntu, waiting for the backend server to respond and running the server in the a different docker container.

I can see in the Github Actions logs that both the frontend and backend servers start with the correct port and connect to the database.

My suspicions about the issue:

Could this be about vue.dev.config.js?
Should I not start the frontend server with vue-cli?
Should I use something like NGINX to redirecting the API calls to the backend?

Frontend server cannot connect to backend in Github Actions

0 Answers