Click here to Skip to main content
15,942,710 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
everyone I'm working on a small project where I already did the backend and nginx configuration with docker
Now I want to add frontend created by react this is the project architecture

    Docker-compose
    Dockerfile (1)
    docker (folder)
       -proxy (folder)
          -nginx (folder)
              -default-ssl.conf.tpl
          - frontend (folder)
          -Dockerfile (2)



When I run the docker command it builds successfully, all the endpoint (https:xxx.xx/api) and backend api are working but when I type my website https://xxx.xx it doesn't work it shows an empty white page
Any help please?


What I have tried:

this is the docker-compose :

    version: '3.9'
    services:
    db:
      image: postgres
      volumes:
        - ./data/db:/var/lib/postgresql/data
        - ./init.sql:/docker-entrypoint-initdb.d/init.sql
      environment:
        - POSTGRES_DB=xxx
        - POSTGRES_USER=xxx
        - POSTGRES_PASSWORD=xxx
    app:
      build:
      context: .
      restart: always
      volumes:
        - .:/app
      environment:
        - DJANGO_DEBUG=0
        - POSTGRES_NAME=xxx
        - POSTGRES_USER=xxx
        - POSTGRES_PASSWORD=xxx
        - DJANGO_SECRET_KEY=${DJANGO_SECRET_KEY}
        - DJANGO_ALLOWED_HOSTS=${DOMAIN}
      depends_on:
        - db
    
    redis:
      image: redis:alpine
      
    proxy:
      build:
        context: ./docker/proxy
      restart: always
      depends_on:
        - app
      ports:
        - 80:80
        - 443:443
      volumes:
        - certbot-web:/vol/www
        - proxy-dhparams:/vol/proxy
        - certbot-certs:/etc/letsencrypt
      environment:
        - DOMAIN=${DOMAIN}

    certbot:
      build:
        context: ./docker/certbot
      command: echo "Skipping..."
      environment:
        - EMAIL=${ACME_DEFAULT_EMAIL}
        - DOMAIN=${DOMAIN}
      volumes:
        - certbot-web:/vol/www
        - certbot-certs:/etc/letsencrypt/
      depends_on:
        - proxy

    volumes:
     certbot-web:
     proxy-dhparams:
     certbot-certs:


Dockerfile (2):

    
     FROM node:13.12.0-alpine as build

     WORKDIR /app/frontend
     COPY ./frontend/package.json /app/frontend
     COPY ./frontend/package-lock.json /app/frontend
     COPY ./frontend/ /app/frontend
     RUN npm install --silent
     RUN npm install react-scripts@3.0.1 -g --silent 
     RUN npm run build 

     FROM nginx:1.23.0-alpine
     WORKDIR /usr/share/nginx/html
     RUN rm -rf ./*

     COPY ./nginx/* /etc/nginx/
     COPY ./run.sh /run.sh
     COPY --from=build /app/frontend/build /usr/share/nginx/html

     ENV APP_HOST=app
     ENV APP_PORT=8001

     USER root

     RUN apk add --no-cache openssl bash
     RUN chmod +x /run.sh

     VOLUME /vol/static
     VOLUME /vol/www
     CMD ["/run.sh"]


This is the default-ssl.conf.tpl

    server {
      listen 80;
      server_name ${DOMAIN} www.${DOMAIN};

      location /.well-known/acme-challenge/ {
          root /vol/www/;
      }

    location / {
        return 301 https://$host$request_uri;
    }
    }

    server {
      listen      443 ssl http2;
      server_name ${DOMAIN} www.${DOMAIN};

      ssl_certificate     /etc/letsencrypt/live/${DOMAIN}/fullchain.pem;
      ssl_certificate_key /etc/letsencrypt/live/${DOMAIN}/privkey.pem;

      include     /etc/nginx/options-ssl-nginx.conf;

      ssl_dhparam /vol/proxy/ssl-dhparams.pem;

      add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
      location /static {
          alias /vol/static;
      }

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    location /api {
        try_files $uri @proxy_api;
    }
    location /wss/ {
        try_files $uri @proxy_api;
    }
    location @proxy_api {
        proxy_pass http://${APP_HOST}:${APP_PORT};
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $http_connection;
     }

     location /django_static/ {
        autoindex on;
        alias /app/backend/server/django_static/;
      }
    
     }
Posted
Updated 18-Dec-22 23:09pm

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900