Can't expose React-Flask full-stack app with nginx running on Raspberry Pi

What is the name of the domain?

my-domain.org

What is the issue you’re encountering

I’ve been struggling for days properly configure my fullstack app to be accessible through the internet using a cloudflare tunnel under my domain “my-domain.org”. The app consists of a python flask backend running on port 5000, react frontend running on port 8888, nginx as reverse proxy and some other side services which we can ignore for the question. Everything is hosted on a raspberry pi. All the components are functioning on my local network. When I curl the services: processess accessible via localhost (http://localhost:) processess accessible via pi’s IP on my home network (http://192.168.1.1) processess accessible via docker network (http://backend or http://frontend) BUT NOT accessible via “my-domain.org” - I get HTTP 530 error I deploy the app using docker it using docker-compose.yml: version: ‘3.8’ services: # influxDb, mosquiotto and grafana ommitted for conciseness backend: build: context: . dockerfile: backend/Dockerfile container_name: flask_backend restart: always command: [“python3”, “main.py”] expose: - “5000” environment: - DEBUG=${DEBUG} - FLASK_APP_HOST=${FLASK_APP_HOST} - FLASK_APP_PORT=${FLASK_APP_PORT} - MQTT_BROKER_ADDRESS=${MQTT_BROKER_ADDRESS} - MQTT_BROKER_PORT=${MQTT_BROKER_PORT} - JWT_SECRET_KEY=${JWT_SECRET_KEY} - SQLALCHEMY_DATABASE_URI=${SQLALCHEMY_DATABASE_URI} devices: - “/dev/i2c-1:/dev/i2c-1” privileged: true volumes: - ./backend:/app - ./backend/instance:/app/instance - ./logs/backend:/var/log/backend - /etc/localtime:/etc/localtime:ro - /etc/timezone:/etc/timezone:ro - /etc/ssl/certs/cloudflare-cert.pem:/app/ssl/fullchain.pem - /etc/ssl/private/cloudflare-key.pem:/app/ssl/privkey.pem depends_on: - mosquitto - influxdb networks: - app-network frontend: build: ./frontend container_name: react_frontend restart: always expose: - “8888” environment: - REACT_APP_API_BASE_URL=/api volumes: - /etc/localtime:/etc/localtime:ro - /etc/timezone:/etc/timezone:ro depends_on: - backend networks: - app-network nginx: image: nginx:latest container_name: nginx restart: always volumes: - ./nginx.conf:/etc/nginx/conf.d/default.conf - ./logs/nginx:/var/log/nginx ports: - “80:80” depends_on: - frontend - backend networks: - app-network networks: app-network: driver: bridge probably not important, but for completeness, here are the Dockerfiles for frontend and backend: # frontend/Dockerfile FROM node:18-alpine WORKDIR /app COPY package*.json ./ RUN npm install COPY . . RUN npm run build EXPOSE 8888 RUN npm install -g serve CMD [“serve”, “-s”, “build”, “-l”, “tcp://0.0.0.0:8888”] # backend/Dockerfile FROM balenalib/raspberrypi4-64-debian:latest WORKDIR /app RUN apt-get update && apt-get install -y \ python3 \ python3-pip \ python3-venv \ python3-smbus \ i2c-tools \ build-essential \ python3-dev \ && rm -rf /var/lib/apt/lists/* RUN python3 --version COPY requirements.txt requirements-pi.txt /app/ RUN pip3 install --no-cache-dir -r /app/requirements-pi.txt COPY backend/ /app/ EXPOSE 5000 ENV FLASK_ENV=production # No CMD or ENTRYPOINT here, this is set in docker-compose.yml Cloudflare tunnel is running correctly and is locally managed from my pi. Below is the /etc/cloudflared/ cionfig.yml: tunnel: <TUNNEL_ID> credentials-file: /root/.cloudflared/<TUNNEL_ID>.json ingress: - hostname: my-domain.org service: http://localhost:80 - service: http_status:404 Nginx configuration nginx.conf: server { listen 80; server_name my-domain.org localhost 127.0.0.1; # Increase the buffer size if you expect large headers large_client_header_buffers 4 16k; # Frontend Service location / { proxy_pass http://frontend:8888; proxy_http_version 1.1; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection “upgrade”; } # Backend Service location /api/ { proxy_pass http://backend:5000; proxy_http_version 1.1; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } # Error handling error_log /var/log/nginx/error.log; access_log /var/log/nginx/access.log; } I expect the issue is somewhere with cloudflare or cloudflare/nginx configuration as everything works perfectly fine on my home network.

Look over these links here which should help you get it going again: Connect private networks | Cloudflare Zero Trust docs

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.