Блог

Я пытаюсь создать образ docker для всех вышеперечисленных сервисов. Я смог настроить django с помощью базы данных и Nginx, но у меня возникли большие проблемы с добавлением Nuxt в микс, и я не могу заставить приложение Nuxt работать должным образом, и это дает мне постоянные ошибки, которые не возникают, если я вручную запускаю сервер узлов. Я подозреваю, что большинство проблем связаны с авторизацией и / или неправильной маршрутизацией в Nginx, что, вероятно, связано с неправильной настройкой соответствующих файлов. Любые советы о том, как настроить эти файлы конфигурации, будут с благодарностью приняты!

Моя структура папок выглядит следующим образом. Файл dockerfile внутри каталога приложения соответствует приложению django

 WebsiteProject/
├── app/
│   ├── frontend-nuxt/
|   |   ├──Dockerfile
|   |   └──nuxt.config.js
│   ├── nginx/
|   |   ├──Dockerfile
|   |   └──nginx_local.conf
|   └──Dockerfile
└── docker-compose.yml
 

docker-compose.yml

 version: '3.7'

services:
  web:
    build: ./app
    command: gunicorn webapp.wsgi:application --bind 0.0.0.0:1339 --reload
    entrypoint: ./entrypoint.sh
    volumes:
      - ./app/:/usr/src/app/
      - static_volume:/usr/src/app/static
      - media_volume:/usr/src/app/media
    expose:
      - 1339
    env_file:
      - ./.env.dev
    depends_on:
      - db
      # - redis
  frontend:
    build: ./app/frontend-nuxt
    volumes:
      - ./app/frontend-nuxt/:/user/src/app/
    expose:
      - 3000
    ports:
      - 3000:3000
    depends_on:
      - web
    command: npm run dev
  db:
    image: postgres:12-alpine
    volumes:
      - postgres_data:/var/lib/postgresql/data/
    environment:
      - POSTGRES_USER=webapp
      - POSTGRES_PASSWORD=webapp
      - POSTGRES_DB=webapp_dev
  nginx:
    build: ./app/nginx
    volumes:
      - static_volume:/usr/src/app/static
      - media_volume:/usr/src/app/media
    ports:
      - 8085:80
    depends_on:
      - web
volumes:
  postgres_data:
  static_volume:
  media_volume:
 

nginx_local.conf

 upstream webapp {
    server web:1339;
}

upstream frontend {
  server frontend:3000;
}

server {

    listen 80 default_server;
    listen [::]:80 default_server;
    access_log /var/log/nginx/access.log;
    error_log /var/log/nginx/error.log;
    server_name webapp.com localhost:8085;

    location / {
      proxy_pass http://frontend;
      proxy_redirect     off;
      proxy_buffering    off;
      proxy_set_header   Host              $host:8085;
      proxy_set_header   X-Real-IP         $remote_addr;
      proxy_set_header   X-Forwarded-For   $proxy_add_x_forwarded_for;
      proxy_set_header   X-Forwarded-Host  $server_name;
      proxy_set_header   X-Forwarded-Proto $scheme;
    }

    location ~ /(api|admin|static|account-auth|accounts|api-auth)/ {
        proxy_pass http://webapp;
        proxy_redirect     off;
        proxy_buffering    off;
        proxy_set_header   Host              $host:8085;
        proxy_set_header   X-Real-IP         $remote_addr;
        proxy_set_header   X-Forwarded-For   $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Host  $server_name;
        proxy_set_header   X-Forwarded-Proto $scheme;
    }

    location /static/ {
        alias /usr/src/app/static/;
    }

    location /media/ {
        alias /usr/src/app/media/;
    }

}
 

Nuxt Dockerfile

 FROM node:11.13.0-alpine

ENV HOST 0.0.0.0
ADD . /app
WORKDIR /app
EXPOSE 3000
RUN npm rebuild node-sass
 

nuxt.config.js настройки аутентификации и axios

  axios: {
    baseURL: 'http://localhost:8085/',
  },
  auth: {
    strategies: {
      local: {
        endpoints: {
          login: {
            url: 'account-auth/token/login/',
            method: 'post',
            propertyName: 'auth_token',
          },
          logout: { url: 'account-auth/token/logout/', method: 'post' },
          user: {
            url: 'api/data/',
            method: 'get',
            propertyName: false,
          },
        },
        tokenType: 'Token',
        tokenName: 'Authorization',
      },
    },
    redirect: {
      login: '/accounts/login',
      logout: '/',
      callback: '/accounts/login',
      home: '/'
    },
  },