Trench Project / Project Description / Code / Deploy Project with Docker

1. Overview

This document provides step-by-step instructions for setting up and running the project, which includes a frontend (Angular), a backend (ASP.NET Core), and a PostgreSQL database. The project uses Docker for containerization to ensure seamless deployment and consistent environments.

2. Prerequisites

  1. Docker and Docker Compose installed on your system.

  2. Git installed for cloning the repository.

  3. Basic knowledge of Docker and terminal commands.

3. Project Structure

project-root/
├── frontend/                # Angular frontend source code
│   ├── Dockerfile          # Dockerfile for the Angular frontend
│   ├── dist/               # Built frontend files (after `npm run build`)
│   └── ...                 # Other Angular project files
├── backend/                # ASP.NET Core backend source code
│   ├── TrenchAPI/          # Backend project folder
│   │   ├── Dockerfile      # Dockerfile for the backend
│   │   ├── Program.cs      # Main entry point for the backend
│   │   └── ...             # Other backend project files
├── docker-compose.yml      # Docker Compose file for orchestrating services
└── README.adoc             # Project documentation (this file)

4. Setting Up the Project

4.1. Clone the Repository

git clone <repository-url>
cd project-root

4.2. Build and Run the Project

Use Docker Compose to build and run all services (frontend, backend, and database):

docker-compose up --build

4.3. Accessing the Services

  1. Frontend: Open your browser and navigate to http://localhost:4200.

  2. Backend: Access the Swagger API documentation at http://localhost:5127/swagger/index.html.

  3. Database:

    • PostgreSQL: Accessible at localhost:5432.

    • pgAdmin: Open http://localhost:8085 and log in with:

    • Email: trench@4CHIF.com

    • Password: TRENCH123

5. Detailed Configuration

5.1. Docker Compose File (docker-compose.yml)

This file orchestrates the services:

  • PostgreSQL: Configured with a persistent volume for data storage.

  • pgAdmin: A web-based interface for managing PostgreSQL.

  • Frontend: Angular app served via Nginx.

  • Backend: ASP.NET Core API.

5.2. Frontend Dockerfile (frontend/Dockerfile)

FROM node:22.12.0-alpine AS build
WORKDIR /app
RUN rm -rf ./*
COPY package*.json ./
RUN npm install
RUN npx ngcc --properties es2023 browser module main --first-only --create-ivy-entry-points
COPY . .
RUN npm run build --prod
FROM nginx:stable
COPY --from=build /app/dist/asc-visualization/browser/ /usr/share/nginx/html
COPY ./nginx.conf /etc/nginx/nginx.conf
EXPOSE 80

5.3. Backend Dockerfile (backend/TrenchAPI/Dockerfile)

FROM mcr.microsoft.com/dotnet/aspnet:8.0 AS base
WORKDIR /app
EXPOSE 5127

FROM mcr.microsoft.com/dotnet/sdk:8.0 AS build
ARG BUILD_CONFIGURATION=Release
WORKDIR /src

COPY ["backend.sln", "./"]

COPY ["TrenchAPI/TrenchAPI.csproj", "TrenchAPI/"]
COPY ["ConsoleMQTT/ConsoleMQTT.csproj", "ConsoleMQTT/"]

RUN dotnet restore "backend.sln"

COPY . .

RUN dotnet publish "TrenchAPI/TrenchAPI.csproj" -c $BUILD_CONFIGURATION -o /app/publish/api
RUN dotnet publish "ConsoleMQTT/ConsoleMQTT.csproj" -c $BUILD_CONFIGURATION -o /app/publish/mqtt

FROM base AS final
WORKDIR /app

COPY --from=build /app/publish/api ./api
COPY --from=build /app/publish/mqtt ./mqtt

CMD ["sh", "-c", "dotnet ./mqtt/ConsoleMQTT.dll & dotnet ./api/TrenchAPI.dll"]

5.4. Backend Launch Settings (backend/TrenchAPI/Properties/launchSettings.json)

Ensure the backend listens on the correct port (5127):

{
  "profiles": {
    "http": {
      "applicationUrl": "http://localhost:5127",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

6. Troubleshooting

6.1. Common Issues

  1. Frontend displays default Nginx page:

    • Ensure the dist/asc-visualization folder exists after building the Angular app.

    • Verify the COPY command in the frontend Dockerfile points to the correct directory.

  2. Backend not accessible:

    • Check if the backend container is running using docker ps.

    • Verify the ASPNETCORE_URLS environment variable is set correctly.

  3. Database connection issues:

    • Ensure the PostgreSQL container is running.

    • Verify the connection string in the backend matches the database credentials.

6.2. Logs

Use the following commands to view logs for each service:

  • Frontend: docker logs nginx_container

  • Backend: docker logs trenchapi_container

  • Database: docker logs postgres_container

  • pgAdmin: docker logs pgadmin_container

7. Additional Notes

  • To rebuild a specific service, use docker-compose up --build <service-name>.

  • To stop all services, run docker-compose down.

  • For production, consider adding SSL and environment-specific configurations.