error connecting frontend and backend container in azure app services through docker compose

Question

version: '3'

services:
  frontend:
    image: iqbalcodes6602/occ-frontend:latest
    container_name: frontend
    ports:
      - "3000:3000"
    stdin_open: true
    tty: true
    depends_on:
      - backend
    networks:
      - app-net
    environment:
      - REACT_APP_BACKEND_URL=http://backend:5000/runcode/

  backend:
    image: iqbalcodes6602/occ-backend:latest
    container_name: backend
    ports:
      - "5000:5000"
    networks:
      - app-net
  
networks:
  app-net:
    driver: bridge

when i run docker compose up locally it works fine, but when i deploy it in Azure app serice through docker compose it doesn't work it gives mixed content error, 

App.js:29 Mixed Content: The page at 'https://<domain>.azurewebsites.net/' was loaded over HTTPS, but requested an insecure resource '[http://backend:5000/runcode/'. This request has been blocked; the content must be served over HTTPS.] 

i have somequestion- 

1. when i deploy it azure give me default domain going to which i can acces my react frontend how can i access the backend
2. how to connect the frontend and backend containers

Answer 1

Anas Iqbal, Apologies for the delayed response.

On custom container for Azure App Service, the following Docker Compose configuration options are unsupported.

Azure doc | Configure a custom container for Azure App Service | Unsupported options

• build (not allowed)
• depends_on (ignored)
• networks (ignored)
• secrets (ignored)
• ports other than 80 and 8080 (ignored)
• default environment variables like $variable and ${variable} unlike in docker 

Based on my understanding of your scenario, you may look at these approaches outlined by my colleague, in this discussion thread:

• If the only public access is via the UI/Front end app and that app is "virtual network integrated" then the other apps can be access over a private endpoint and the access through the public endpoint for those other apps can be turned off.
• You have the option of using either Azure Front Door or Application Gateway which both have a Web-Application-Firewall (WAF) feature, if you need that extra layer of functionality in front of your apps. If you did then it would be possible to broker public access to the front end / UI through either Front Door or Application Gateway and have the rest of the network path private

 

Kindly take a look at these reference docs:

• Tutorial secure n-tier app  | Scenario architecture (screenshot below)
• Tutorial: Authenticate and authorize users end-to-end in Azure App Service
• 

---

If the answer helped (pointed, you in the right direction) > please click Accept Answer - it will benefit community members to find the answers quickly.