Nginx configuration with upstream not working in CircleCI

[nick-myers-dt]

In our local Docker environment, we have a docker-compose.yml as follows:

version: '3'
services:
  nextjs:
    build: ./
    ports:
      - 3000:3000
    networks:
      - internal
  nginx:
    build: ./nginx
    ports:
      - 80:80
      - 443:443
    networks:
      - internal
    depends_on:
    - nextjs

This creates two containers, one running nginx which proxies requests to our application on nextjs. This works with the following nginx configuration:

proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=STATIC:10m inactive=7d use_temp_path=off;

upstream nextjs_upstream {
  server nextjs:3000;
}

server {
    listen 80;
    listen 127.0.01;
    listen [::]:80 default_server ipv6only=on;
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name  _;
    server_tokens off;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;
    ssl_ciphers 'EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH';
    ssl_certificate /etc/nginx/certs/localhost.pem;
    ssl_certificate_key /etc/nginx/certs/localhost-key.pem;
    gzip on;
    gzip_proxied any;
    gzip_comp_level 4;
    gzip_types text/css application/javascript image/svg+xml;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;

    location /_next/static {
        proxy_cache STATIC;
        proxy_pass http://nextjs_upstream;

        # For testing cache - remove before deploying to production
        add_header X-Cache-Status $upstream_cache_status;
    }

    location /static {
        proxy_cache STATIC;
        proxy_ignore_headers Cache-Control;
        proxy_cache_valid 60m;
        proxy_pass http://nextjs_upstream;

        # For testing cache - remove before deploying to production
        add_header X-Cache-Status $upstream_cache_status;
    }

    location / {
        proxy_pass http://nextjs_upstream;
    }
}

However, when we use CircleCI, it’s not aware of the name nextjs_upstream and so nginx fails to start.

Does anyone know if there is a way for us to ‘name’ the container in CircleCI in a way that nginx can work with as an upstream?

The relevant section of our CircleCI config.yml is:

version: 2.1
orbs:
  node: circleci/node@1.1.6
  slack: circleci/slack@3.4.2
executors:
  app-executor:
    docker:
      - image: circleci/node:12.16-browsers
...
test-performance:
    executor: app-executor
    steps:
      - checkout
      - restore_cache:
          name: Restore Yarn package cache
          keys:
            - yarn-packages-{{ checksum "yarn.lock" }}
      - run:
          name: Install application dependencies
          command: yarn install
      - save_cache:
          name: Save Yarn package cache
          key: yarn-packages-{{ checksum "yarn.lock" }}
          paths:
            - ~/.cache/yarn
      - attach_workspace:
            at: ./
      - run:
          name: Start next server
          command: yarn start
          background: true
      - run:
          name: Wait for next server
          command: npx wait-on http://localhost:3000
      - run:
          name: Install dependencies
          command: sudo apt-get install libnss3-tools -y
      - run:
          name: Download mkcert
          command: wget https://github.com/FiloSottile/mkcert/releases/download/v1.1.2/mkcert-v1.1.2-linux-amd64
      - run:
          name: Move mkcert
          command: mv mkcert-v1.1.2-linux-amd64 mkcert
      - run:
          name: Set mkcert permissions
          command: chmod +x mkcert
      - run:
          name: Copy mkcert
          command: sudo cp mkcert /usr/local/bin/
      - run:
          name: Install local CA
          command: sudo mkcert -install
      - run:
          name: Create certificates for SSL
          command: cd nginx && mkcert localhost
      - run:
          name: List directory contents
          command: ls -al ./nginx/
      - run:
          name: Update apt-get
          command: sudo apt-get update
      - run:
          name: Install nginx
          command: sudo apt-get install nginx
      - run:
          name: Copy nginx configuration file
          command: sudo cp ./nginx/default.conf /etc/nginx/sites-available/default
      - run:
          name: Create /etc/nginx/certs directory
          command: sudo mkdir /etc/nginx/certs
      - run:
          name: Copy SSL certificate (1 of 2)
          command: sudo cp ./nginx/localhost.pem /etc/nginx/certs/
      - run:
          name: Copy SSL certificate (2 of 2)
          command: sudo cp ./nginx/localhost-key.pem /etc/nginx/certs/
      - run:
          name: Start nginx
          command: sudo /etc/init.d/nginx start