Docker Compose + Headless Spree + Nextjs Frontend build

[kutucode]

Hi folks, thanks for this awesome ecommerce api and the corresponding starter for docker.

While spree works flawless on docker, im struggling to add the recommended nextjs frontend to it. My idea is to have docker/docker compose spin up the entire stack on my dev machine and in prod on a cheap VPS. At the moment when im running a docker-compose build the frontend requests for some pages the spree API (static generated sites at build time). But this fails and the corresponding error message to that indicates that it cannot reach the spree api from within the frontend container to the spree api/container. Did someone try a similar thing? I think it would be really cool if we had a starter that would contain one of the recommended frontends (nextjs or vue storefront).

My Frontend Dockerfile:

FROM node:16-alpine
RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY . .
RUN yarn install --frozen-lockfile

ENV NEXT_TELEMETRY_DISABLED 1
RUN yarn build


EXPOSE 3000

ENV PORT 3000

CMD ["yarn", "start"]

My docker-compose:

version: '3.7'
services:
  storefront:
    build:
      context: storefront/commerce
    ports:
      - 3000:3000
    networks:
      - frontend-tier
  postgres:
    image: postgres:13-alpine
    environment:
      POSTGRES_HOST_AUTH_METHOD: trust
    volumes:
      - 'postgres:/var/lib/postgresql/data'
    networks:
      - backend-tier
  redis:
    image: redis:6.2-alpine
    volumes:
      - 'redis:/data'
    networks:
      - backend-tier
  web:
    depends_on:
      - 'postgres'
      - 'redis'
    build:
      context: .
      dockerfile: Dockerfile.development
    command: bash -c "rm -rf tmp/pids/server.pid && yarn install && yarn build && bundle exec rails s -b 0.0.0.0 -p 4000"
    ports:
      - '${DOCKER_HOST_WEB_PORT:-4000}:4000'
    volumes:
      - 'bundle_cache:/bundle'
      - '.:/app'
      - .env:/app/.env
    environment:
      REDIS_URL: redis://redis:6379/0
      DB_HOST: postgres
      DB_PORT: 5432
      DISABLE_SPRING: 1
      ONESHOP_SERVICE_PORT: 4000
      ONESHOP_SERVICE_NAME: web
    networks:
      - frontend-tier
      - backend-tier
  worker:
    depends_on:
      - 'postgres'
      - 'redis'
    build:
      context: .
      dockerfile: Dockerfile.development
    command: bundle exec sidekiq -C config/sidekiq.yml
    volumes:
      - 'bundle_cache:/bundle'
      - '.:/app'
      - .env:/app/.env
    environment:
      REDIS_URL: redis://redis:6379/0
      DB_HOST: postgres
      DB_PORT: 5432
      DISABLE_SPRING: 1
    networks:
      - backend-tier

volumes:
  redis:
  postgres:
  bundle_cache:

networks:
  backend-tier:
    driver: bridge
    external: true
  frontend-tier:
    driver: bridge
    external: true

I tried a lot of stuff regarding networking and i know that within docker the containers get their IP addresses and i cannot use localhost and should use the servicename but still i cannot resolve the url for the request during the yarn build. Also im making sure that i spin up the Spree API, db and worker first before i try to build my frontend:

next-commerce:build: Calling the Spree API: GET http://web:4000/api/v2/storefront/cms_pages?per_page=500&filter%5Blocale_eq%5D=de-DE
next-commerce:build: 
next-commerce:build: > Build error occurred
next-commerce:build: Error [NoResponseError]: No response received from Spree
next-commerce:build:     at u.processError (/app/node_modules/@spree/storefront-api-v2-sdk/dist/server/index.js:1:3011)
next-commerce:build:     at u.spreeResponse (/app/node_modules/@spree/storefront-api-v2-sdk/dist/server/index.js:1:2778)
next-commerce:build:     at processTicksAndRejections (node:internal/process/task_queues:96:5)
next-commerce:build:     at async u.list (/app/node_modules/@spree/storefront-api-v2-sdk/dist/server/index.js:1:14355)
next-commerce:build:     at async /app/site/.next/server/chunks/28.js:4116:31
next-commerce:build:     at async CommerceAPICore.getAllPages (/app/site/.next/server/chunks/28.js:4183:49)
next-commerce:build:     at async getStaticPaths (/app/site/.next/server/pages/[...pages].js:109:24)
next-commerce:build:     at async buildStaticPaths (/app/node_modules/next/dist/build/utils.js:498:31)
next-commerce:build:     at async /app/node_modules/next/dist/build/utils.js:641:119
next-commerce:build:     at async Span.traceAsyncFn (/app/node_modules/next/dist/trace/trace.js:75:20) {
next-commerce:build:   type: 'a'
next-commerce:build: }
next-commerce:build: error Command failed with exit code 1.

Any help is appreciated <3

[abbasahmad]

Im looking for something similar if you find the solution it would be great!

[stanleegoodspeed]

I have the spree backend + NextJS frontend working on my machine. In your /site/.env.local are you setting NEXT_PUBLIC_SPREE_API_HOST=http://web:4000 ?

[stanleegoodspeed]

For troubleshooting, you should try exec'ing into the frontend container and run ping web. If you get a heartbeat, then you know the two containers can talk to eachother