برای دپلوی کردن یک پروژه Django و React در داکر با کانفیگ زیر کار میکنیم:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
version: '3.8' services: frontend: build: context: ./frontend/shift-front container_name: frontend ports: - "3000:3000" volumes: - ./frontend/shift-front:/app - ./frontend/shift-front/dist:/usr/share/nginx/html environment: - NODE_ENV=production networks: - app-network backend: build: context: ./backend/shiftsupervisor container_name: backend ports: - "8000:8000" volumes: - ./backend/shiftsupervisor:/app - ./backend/shiftsupervisor/static:/app/static - ./backend/shiftsupervisor/staticfiles:/app/staticfiles - ./backend/shiftsupervisor/media:/app/media environment: - DEBUG=1 networks: - app-network nginx: build: context: ./frontend/shift-front dockerfile: Dockerfile container_name: nginx ports: - "80:80" volumes: - ./nginx/nginx.conf:/etc/nginx/nginx.conf:ro - ./backend/shiftsupervisor/static:/static - ./backend/shiftsupervisor/media:/media depends_on: - frontend - backend networks: - app-network networks: app-network: driver: bridge |
فایل بالا compose است و فایل backend/shiftsupervisor/Dockerfile
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
FROM python:3.12-slim WORKDIR /app RUN apt-get update && apt-get install -y --no-install-recommends \ build-essential \ libsqlite3-dev \ && apt-get clean && rm -rf /var/lib/apt/lists/* COPY requirements.txt . RUN pip install --no-cache-dir -r requirements.txt COPY . . RUN python manage.py collectstatic --noinput EXPOSE 8000 CMD ["python", "manage.py", "runserver", "0.0.0.0:8000"] |
و فایل frontend/shiftfront/Dockerfile
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
FROM node:20 AS builder WORKDIR /app COPY package*.json ./ RUN npm install COPY . ./ RUN npm run build FROM nginx:latest COPY --from=builder /app/dist /usr/share/nginx/html EXPOSE 80 CMD ["nginx", "-g", "daemon off;"] |
و فایل nginx/nginx.conf
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
worker_processes 1; events { worker_connections 1024; } http { include /etc/nginx/mime.types; default_type application/octet-stream; sendfile on; server { listen 80; location / { root /usr/share/nginx/html; index index.html; try_files $uri /index.html; } # Proxy requests to the backend location /api/ { rewrite ^/api/(.*)$ /$1 break; # Remove /api/ before forwarding proxy_pass http://backend:8000; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } location /static/ { alias /static/; } location /staticfiles/ { alias /app/staticfiles/; } location /media/ { alias /media/; } } } |
در ضمن تنظیمات مهم برای settings.py
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
ALLOWED_HOSTS = [ '*', # Allow all hosts for testing purposes 'localhost', '127.0.0.1', 'frontend', 'backend', 'nginx', ] MIDDLEWARE = [ 'django.middleware.security.SecurityMiddleware', 'django.contrib.sessions.middleware.SessionMiddleware', 'django.middleware.common.CommonMiddleware', 'django.middleware.csrf.CsrfViewMiddleware', 'django.contrib.auth.middleware.AuthenticationMiddleware', 'django.contrib.messages.middleware.MessageMiddleware', 'django.middleware.clickjacking.XFrameOptionsMiddleware', 'corsheaders.middleware.CorsMiddleware', ] REST_FRAMEWORK = { 'DEFAULT_PERMISSION_CLASSES': [ 'rest_framework.permissions.AllowAny', ] } CORS_ORIGIN_ALLOW_ALL = True # If you want specific origins: CORS_ALLOWED_ORIGINS = [ 'http://localhost:5173', 'http://frontend:3000', 'http://127.0.0.1:8000', ] CORS_ALLOW_ALL_ORIGINS = True CORS_ALLOW_CREDENTIALS = True CSRF_TRUSTED_ORIGINS = [ 'http://localhost:5173', 'http://127.0.0.1:8000', 'http://frontend:3000', # Container name and port 'http://backend:8000', 'http://nginx', ] ROOT_URLCONF = 'config.urls' TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [BASE_DIR / 'templates'], 'APP_DIRS': True, 'OPTIONS': { 'context_processors': [ 'django.template.context_processors.debug', 'django.template.context_processors.request', 'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages', ], }, }, ] WSGI_APPLICATION = 'config.wsgi.application' DATABASES = { 'default': { 'ENGINE': 'django.db.backends.sqlite3', 'NAME': BASE_DIR / 'db.sqlite3', } } |
فایل axiosConfig.jsx
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
import axios from "axios"; const getCSRFToken = () => { let csrfToken = null; const csrfCookie = document.cookie .split("; ") .find((row) => row.startsWith("csrftoken=")); if (csrfCookie) { csrfToken = csrfCookie.split("=")[1]; } return csrfToken; }; const api = axios.create({ baseURL: "/api/", // Add /api/ prefix headers: { "X-CSRFToken": getCSRFToken(), "Content-Type": "application/json", }, withCredentials: true, }); export default api; |
و فایل vite.config.js
|
1 2 3 4 5 6 |
export default defineConfig({ plugins: [react()], build: { outDir: "dist", }, }); |