A
A
AquaForm2021-05-11 14:57:15
Nginx
AquaForm, 2021-05-11 14:57:15

How to configure docker and nginx so that the API works on next.js?

Good afternoon! I decided to try docker for my project. Project on next.js I
use docker-compose. Everything is fine until I add a container with nginx to the project.

The browser gives an error -

Access to XMLHttpRequest at ' localhost:3000/api/categories ' from origin ' surgut.expert.local ' has been blocked by CORS


I change the next.js settings to change the API address to surgut.expert.local/api , then it gives an error
Error: connect ECONNREFUSED 127.0.0.1:80


docker-compose settings:

version: '3'

services:
  next:
    build: ./next
    container_name: surgut-expert-next
    command: npm run dev
    volumes:
      - ./next:/usr/src/app
    restart: unless-stopped
    ports:
       - "3000:3000"
    networks:
      - surgut-expert-network

  nginx:
    image: nginx:stable-alpine
    container_name: surgut-expert-nginx
    ports:
      - "80:80"
    volumes:
      - ./nginx/nginx.conf.dev:/etc/nginx/conf.d/nginx.conf
    depends_on:
      - next
      - phpmyadmin
      - db
    networks:
      - surgut-expert-network

  db:
    image: mysql
    container_name: surgut-expert-db
    volumes:
      - dbdata:/var/lib/mysql
    restart: always
    ports:
      - "3036:3036"
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: surgut_expert
    networks:
      - surgut-expert-network

  phpmyadmin:
    image: phpmyadmin
    container_name: surgut-expert-phpmyadmin
    restart: always
    ports:
      - "1234:80"
    environment:
      - PMA_ARBITRARY=1
    networks:
      - surgut-expert-network

volumes:
  dbdata:

networks:
  surgut-expert-network:
    driver: bridge


nginx settings:
server {
    listen 80;
    server_name surgut.expert.local;
    location / {
        proxy_pass http://next:3000;
        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;
    }
}

How to fix? The most interesting thing is that until you install nginx, everything works fine, but it stops with nginx.

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question