Deploy docker compose to Azure

I have a project with an mvc app connected to another api app that is responsible for retrieving the data. I have created a ci cd to build and push the images to Azure Container registry and it is working. Then i created a docker compose file with both the images, and i am trying to deploy this docker compose file to App Service as a Web App. The deployment worked but only one app is exposed on port 80 even though i specified a different port and the other app is not accessible i tried everything. Below is my docker compose file:

version: '3.4'

services:

  appdbtest:
    container_name: app-dbtest
    image: mcr.microsoft.com/mssql/server:2019-latest
    ports:
      - 8002:1433
    environment:
      - ACCEPT_EULA=Y
      - SA_PASSWORD=password@12345#

  web_app:
    image: testapp00.azurecr.io/web:1.6
    ports:
      - 7286:81


  api_app:
    image: testapp00.azurecr.io/api:3.1
    ports:
      - 7205:82
    depends_on:
      - appdbtest
    environment:
      - DB_HOST=appdbtest
      - DB_NAME=AssessmentEngineer3Api
      - DB_SA_PASSWORD=password@12345#

Tried deploying my docker compose file to Azure App Service Web App. Tried accessing the apis using localhost, deployed app domain name, internal ip of the app nothing is working. The frontend is not able to communicate with the api on port 7205

The deployment worked but only one app is exposed on port 80 even though i specified a different port and the other app is not accessible i tried everything.

• When deploying multiple containers using the Docker Compose to Azure App Service, only one container can be directly exposed to the internet, and it will be accessible via default port 80. This is because Azure App Service for Containers is designed to expose only a single port to the internet.

You can configure the web and API apps to communicate internally using the internal Docker network.

This helps the containers to communicate internally without exposing the API app to the public internet. In the docker compose file web_app can reach the api_app using the service name and the internal port.

docker-compose.yml:

version: '3.4'

services:

  appdbtest:
    container_name: app-dbtest
    image: mcr.microsoft.com/mssql/server:2019-latest
    ports:
      - 8002:1433
    environment:
      - ACCEPT_EULA=Y
      - SA_PASSWORD=your_db_password
  
  web_app:
    image: testapp00.azurecr.io/web:1.6
    ports:
      - 80:81
    environment:
      - API_URL=http://api_app:82
  
  api_app:
    image: testapp00.azurecr.io/api:3.1
    depends_on:
      - appdbtest
    environment:
      - DB_HOST=appdbtest
      - DB_NAME=your_db_name
      - DB_SA_PASSWORD=your_db_password

Within the Containers:

• web_app: Access the api_app via http://api_app:82.
• api_app: Access the appdbtest via appdbtest:1433.

Here Iam having angular frontend application I can make http requests from web_app to api_app.

environment.ts:

// environment.ts
export const environment = {
  production: false,
  apiUrl: 'http://api_app:82'
};

component.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { environment } from '../environments/environment';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private apiUrl = environment.apiUrl;

  constructor(private http: HttpClient) {}

  getData() {
    return this.http.get(`${this.apiUrl}/your_api_endpoint`);
  }
}

Here is the setup in API App (.NET backend) api_app that connects to appdbtest

appsettings.json:

{
  "ConnectionStrings": {
    "DefaultConnection": "Server=appdbtest;Database=your_db_name;User Id=sa;Password=your_db_password;"
  }
}

Program.cs

public void ConfigureServices(IServiceCollection services)
{
    services.AddDbContext<ApplicationDbContext>(options =>
        options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));
}

• Publicly expose only the necessary service (e.g., web_app on port 80) and let internal communication handle the rest.

Deployed successfully: