From 0cebd5cd62b73d36219f34b2a36c0d238552a431 Mon Sep 17 00:00:00 2001 From: Ubuntu Date: Sun, 7 Jul 2024 15:15:19 +0000 Subject: [PATCH 01/12] added docker file and compose file --- README.md | 6 ++++ backend/.env | 5 ++-- backend/Dockerfile | 54 ++++++++++++++++++++++++++++++++++++ backend/docker-compose.yaml | 15 ++++++++++ backend/start.sh | 10 +++++++ frontend/Dockerfile | 31 +++++++++++++++++++++ frontend/docker-compose.yaml | 14 ++++++++++ 7 files changed, 132 insertions(+), 3 deletions(-) create mode 100644 backend/Dockerfile create mode 100644 backend/docker-compose.yaml create mode 100644 backend/start.sh create mode 100644 frontend/Dockerfile create mode 100644 frontend/docker-compose.yaml diff --git a/README.md b/README.md index 106afea29..a88e403b0 100644 --- a/README.md +++ b/README.md @@ -18,3 +18,9 @@ To get started with this template, please follow the instructions in the respect - [Frontend README](./frontend/README.md) - [Backend README](./backend/README.md) + +#Build the image +docker-compose build + +#Run the container +docker-compose up \ No newline at end of file diff --git a/backend/.env b/backend/.env index c3af24175..2790500c2 100644 --- a/backend/.env +++ b/backend/.env @@ -25,9 +25,8 @@ SMTP_SSL=False SMTP_PORT=587 # Postgres -POSTGRES_SERVER=localhost +POSTGRES_SERVER=chefsbeatz.postgres.database.azure.com POSTGRES_PORT=5432 POSTGRES_DB=app POSTGRES_USER=app -POSTGRES_PASSWORD=changethis123 - +POSTGRES_PASSWORD=changethis123 \ No newline at end of file diff --git a/backend/Dockerfile b/backend/Dockerfile new file mode 100644 index 000000000..c1e8b68e7 --- /dev/null +++ b/backend/Dockerfile @@ -0,0 +1,54 @@ +# Use an official Python runtime as a parent image +FROM python:3.10.0-slim + +# Set environment variables +ENV PYTHONDONTWRITEBYTECODE 1 +ENV PYTHONUNBUFFERED 1 + +# Install system dependencies +RUN apt-get update && apt-get install -y \ + build-essential \ + libpq-dev # for PostgreSQL dependencies + +# Set the working directory in the container +WORKDIR /app + +# Install system dependencies +RUN apt-get update \ + && apt-get install -y --no-install-recommends \ + curl \ + build-essential \ + libpq-dev \ + python3 \ + python3-pip \ + python3-venv \ + && apt-get clean \ + && rm -rf /var/lib/apt/lists/* + +# Install Poetry using a Python script +RUN curl -sSL https://install.python-poetry.org | python3 - + +# Set the environment variable for Poetry +ENV PATH="/root/.local/bin:$PATH" + +# Verify Poetry installation +RUN poetry --version + + +WORKDIR /app + +# Copy only the requirements to cache them in the Docker layer +COPY poetry.lock pyproject.toml ./ + +# Install dependencies +RUN poetry config virtualenvs.create false && poetry install --no-root --no-dev + +# Copy the rest of your application code into the container +COPY . . + +COPY start.sh . + + +RUN chmod +x start.sh + +CMD ["./start.sh"] \ No newline at end of file diff --git a/backend/docker-compose.yaml b/backend/docker-compose.yaml new file mode 100644 index 000000000..cd21c5e57 --- /dev/null +++ b/backend/docker-compose.yaml @@ -0,0 +1,15 @@ +version: '3.8' + +services: + backend: + build: + context: . + dockerfile: Dockerfile + ports: + - "8000:8000" + env_file: + - .env # Load environment variables from .env file + volumes: + - .:/app + + diff --git a/backend/start.sh b/backend/start.sh new file mode 100644 index 000000000..5512e34dc --- /dev/null +++ b/backend/start.sh @@ -0,0 +1,10 @@ +#!/bin/bash + +# Activate the Poetry environment +poetry install --no-dev + +# Run any pre-start commands (if needed) +bash ./prestart.sh + +# Start the FastAPI application using uvicorn +poetry run uvicorn app.main:app --host 0.0.0.0 --port 8000 \ No newline at end of file diff --git a/frontend/Dockerfile b/frontend/Dockerfile new file mode 100644 index 000000000..8c47bfe8f --- /dev/null +++ b/frontend/Dockerfile @@ -0,0 +1,31 @@ +# Stage 1: Build the application +FROM node:alpine AS build + +WORKDIR /usr/src/app + +# Copy package.json and package-lock.json +COPY package.json package-lock.json ./ +RUN npm install + +# Copy the rest of the application code and build the application +COPY . . +RUN npm run build + +# Stage 2: Production-ready image +FROM node:alpine + +WORKDIR /usr/src/app + +# Copy package.json and package-lock.json for production dependencies +COPY --from=build /usr/src/app/package.json /usr/src/app/package-lock.json ./ +RUN npm install + +# Copy the build output to the production image +COPY --from=build /usr/src/app/public ./public +COPY . . + +# Expose the port that the application will run on +EXPOSE 3000 + +# Command to run the application +CMD ["npm", "run", "dev"] \ No newline at end of file diff --git a/frontend/docker-compose.yaml b/frontend/docker-compose.yaml new file mode 100644 index 000000000..b1ec374a6 --- /dev/null +++ b/frontend/docker-compose.yaml @@ -0,0 +1,14 @@ +version: '3.8' + +services: + app: + image: webapp-frontend + build: + context: ./ + dockerfile: Dockerfile + ports: + - "3000:3000" + volumes: + - .:/app + - /app/node_modules + \ No newline at end of file From dc88503f619b24f88d3594e58c3d3166149b11ea Mon Sep 17 00:00:00 2001 From: Ubuntu Date: Sun, 7 Jul 2024 15:30:47 +0000 Subject: [PATCH 02/12] new remote repo --- backend/Dockerfile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/backend/Dockerfile b/backend/Dockerfile index c1e8b68e7..39e010079 100644 --- a/backend/Dockerfile +++ b/backend/Dockerfile @@ -43,7 +43,7 @@ COPY poetry.lock pyproject.toml ./ # Install dependencies RUN poetry config virtualenvs.create false && poetry install --no-root --no-dev -# Copy the rest of your application code into the container +# Copy the rest of your application code into the container. COPY . . COPY start.sh . From 2ec5cf0a7a698cd9cb5b1649dcbff11509f1544f Mon Sep 17 00:00:00 2001 From: Ubuntu Date: Sun, 7 Jul 2024 21:35:32 +0000 Subject: [PATCH 03/12] new docker file --- backend/.env | 4 ++-- backend/Dockerfile | 44 +++++++++++++++--------------------- backend/docker-compose.yaml | 11 +++++---- frontend/.env | 2 +- frontend/Dockerfile | 30 +++++------------------- frontend/docker-compose.yaml | 5 ++-- 6 files changed, 37 insertions(+), 59 deletions(-) diff --git a/backend/.env b/backend/.env index 2790500c2..a4c0fde3e 100644 --- a/backend/.env +++ b/backend/.env @@ -12,7 +12,7 @@ STACK_NAME=full-stack-fastapi-project BACKEND_CORS_ORIGINS="http://localhost,http://localhost:5173,https://localhost,https://localhost:5173" SECRET_KEY=changethis123 FIRST_SUPERUSER=devops@hng.tech -FIRST_SUPERUSER_PASSWORD=devops#HNG11 +FIRST_SUPERUSER_PASSWORD="devops#HNG11" USERS_OPEN_REGISTRATION=True # Emails @@ -29,4 +29,4 @@ POSTGRES_SERVER=chefsbeatz.postgres.database.azure.com POSTGRES_PORT=5432 POSTGRES_DB=app POSTGRES_USER=app -POSTGRES_PASSWORD=changethis123 \ No newline at end of file +POSTGRES_PASSWORD=changethis123 \ No newline at end of file diff --git a/backend/Dockerfile b/backend/Dockerfile index 39e010079..0c3156d34 100644 --- a/backend/Dockerfile +++ b/backend/Dockerfile @@ -4,51 +4,43 @@ FROM python:3.10.0-slim # Set environment variables ENV PYTHONDONTWRITEBYTECODE 1 ENV PYTHONUNBUFFERED 1 - -# Install system dependencies -RUN apt-get update && apt-get install -y \ - build-essential \ - libpq-dev # for PostgreSQL dependencies - -# Set the working directory in the container -WORKDIR /app +ENV PYTHONPATH=/app # Install system dependencies RUN apt-get update \ - && apt-get install -y --no-install-recommends \ - curl \ + && apt-get install -y \ build-essential \ - libpq-dev \ - python3 \ - python3-pip \ - python3-venv \ - && apt-get clean \ - && rm -rf /var/lib/apt/lists/* - -# Install Poetry using a Python script + curl \ + libpq-dev # Example: PostgreSQL dependencies +RUN rm -rf /var/lib/apt/lists/* + +# Install Poetry RUN curl -sSL https://install.python-poetry.org | python3 - -# Set the environment variable for Poetry +# Set Poetry's bin directory in the PATH ENV PATH="/root/.local/bin:$PATH" # Verify Poetry installation RUN poetry --version +# Install psycopg2-binary +RUN pip install psycopg2-binary +# Set the working directory in the container WORKDIR /app -# Copy only the requirements to cache them in the Docker layer +# Copy only the dependencies definition files to cache them in Docker layer COPY poetry.lock pyproject.toml ./ # Install dependencies -RUN poetry config virtualenvs.create false && poetry install --no-root --no-dev +RUN poetry config virtualenvs.create false \ + && poetry install --no-dev -# Copy the rest of your application code into the container. COPY . . -COPY start.sh . - +RUN chmod +x prestart.sh -RUN chmod +x start.sh +EXPOSE 8000 -CMD ["./start.sh"] \ No newline at end of file +# Command to run prestart.sh and the application using Poetry +CMD ["bash", "-c", "poetry run bash ./prestart.sh && poetry run uvicorn app.main:app --host 0.0.0.0 --port 8000"] \ No newline at end of file diff --git a/backend/docker-compose.yaml b/backend/docker-compose.yaml index cd21c5e57..457734b92 100644 --- a/backend/docker-compose.yaml +++ b/backend/docker-compose.yaml @@ -1,15 +1,18 @@ version: '3.8' services: - backend: + app: build: context: . dockerfile: Dockerfile ports: - "8000:8000" env_file: - - .env # Load environment variables from .env file + - .env + environment: + PYTHONDONTWRITEBYTECODE: 1 + PYTHONUNBUFFERED: 1 + PYTHONPATH: /app volumes: - .:/app - - + command: ["bash", "-c", "poetry run bash ./prestart.sh && poetry run uvicorn app.main:app --host 0.0.0.0 --port 8000"] \ No newline at end of file diff --git a/frontend/.env b/frontend/.env index 5934e2e7d..a957163b5 100644 --- a/frontend/.env +++ b/frontend/.env @@ -1 +1 @@ -VITE_API_URL=http://localhost:8000 +VITE_API_URL=http://172.166.176.30:8000 diff --git a/frontend/Dockerfile b/frontend/Dockerfile index 8c47bfe8f..4b6e55e6f 100644 --- a/frontend/Dockerfile +++ b/frontend/Dockerfile @@ -1,31 +1,13 @@ -# Stage 1: Build the application -FROM node:alpine AS build +FROM node:latest -WORKDIR /usr/src/app +WORKDIR /user/src/app -# Copy package.json and package-lock.json -COPY package.json package-lock.json ./ -RUN npm install - -# Copy the rest of the application code and build the application -COPY . . -RUN npm run build +COPY package*.json ./ -# Stage 2: Production-ready image -FROM node:alpine +COPY . /user/src/app -WORKDIR /usr/src/app - -# Copy package.json and package-lock.json for production dependencies -COPY --from=build /usr/src/app/package.json /usr/src/app/package-lock.json ./ RUN npm install -# Copy the build output to the production image -COPY --from=build /usr/src/app/public ./public -COPY . . - -# Expose the port that the application will run on -EXPOSE 3000 +EXPOSE 5173 -# Command to run the application -CMD ["npm", "run", "dev"] \ No newline at end of file +CMD ["npm", "run", "dev", "--", "--host"] \ No newline at end of file diff --git a/frontend/docker-compose.yaml b/frontend/docker-compose.yaml index b1ec374a6..b9fefc3d6 100644 --- a/frontend/docker-compose.yaml +++ b/frontend/docker-compose.yaml @@ -7,8 +7,9 @@ services: context: ./ dockerfile: Dockerfile ports: - - "3000:3000" + - "5173:5173" + env_file: + - .env # Specify the path to your .env file volumes: - .:/app - /app/node_modules - \ No newline at end of file From 293b97944db60b2192ec6a4e56b3cecf3402d275 Mon Sep 17 00:00:00 2001 From: Ubuntu Date: Sun, 7 Jul 2024 21:45:41 +0000 Subject: [PATCH 04/12] new docker file --- frontend/Dockerfile | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/frontend/Dockerfile b/frontend/Dockerfile index 4b6e55e6f..5efe5bfaa 100644 --- a/frontend/Dockerfile +++ b/frontend/Dockerfile @@ -1,13 +1,25 @@ +#Use the latest node image to build FROM node:latest + +#set the working directory WORKDIR /user/src/app + +#Copy the dependencies COPY package*.json ./ + +#copy the project folder to the working directory COPY . /user/src/app +#install dependencies RUN npm install + +#expose port EXPOSE 5173 + +#Start the app CMD ["npm", "run", "dev", "--", "--host"] \ No newline at end of file From 7a46417f54a51fd856422bd3d1d7baaba35bbf86 Mon Sep 17 00:00:00 2001 From: Ebenezer Emelogu <116062484+Eben-DevOps@users.noreply.github.com> Date: Mon, 8 Jul 2024 21:02:41 +0100 Subject: [PATCH 05/12] Update README.md --- README.md | 113 ++++++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 101 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index a88e403b0..3218c7673 100644 --- a/README.md +++ b/README.md @@ -4,23 +4,112 @@ Welcome to the Full-Stack FastAPI and React template repository. This repository ## Project Structure -The repository is organized into two main directories: +This repository is organized into two main directories from the root folder: -- **frontend**: Contains the ReactJS application. -- **backend**: Contains the FastAPI application and PostgreSQL database integration. +- **frontend**: this folder Contains the ReactJS application, including the docker file added after the fork. +- **backend**: Contains the FastAPI application with the addition of a docker file for building a backend image +- For this project, I will be using a remote DB on Azure for my database needs. -Each directory has its own README file with detailed instructions specific to that part of the application. +Each directory has its own README file with detailed instructions to set up and run the application locally without a need for containers. -## Getting Started +To run this application locally, please follow the instructions in the respective directories: +###Services needed to run and build this application locally and in containers. -To get started with this template, please follow the instructions in the respective directories: +This repository contains a full-stack application setup using Docker Compose. The application consists of a FastAPI backend, a Node.js frontend, a PostgreSQL database, an Adminer database management tool, an Nginx Proxy Manager, and an Nginx web server. -- [Frontend README](./frontend/README.md) -- [Backend README](./backend/README.md) +## Services +- **backend**: FastAPI application serving the backend API. +- **frontend**: Node.js application serving the frontend. +- **db**: PostgreSQL database for storing application data. +- **adminer**: Database management tool to interact with the PostgreSQL database. +- **proxy**: Nginx Proxy Manager to handle SSL certificates and domain management. +- **nginx**: Nginx web server to serve the frontend and reverse proxy requests to the backend. -#Build the image -docker-compose build +## Setup Instructions -#Run the container -docker-compose up \ No newline at end of file +1. **Clone the repository**: + + ```sh + git clone https://github.com/Ravencodess/devops-stage-2 + cd devops-stage-2 + ``` + +2. **Build and start the services**: + + ```sh + docker compose up -d + ``` + +3. **Verify the services are running**: + - **FastAPI Backend**: [http://localhost/api](http://localhost/api) + - **Node.js Frontend**: [http://localhost](http://localhost) + - **PostgreSQL Database**: Accessible on port `5432` (no direct browser access) + - **Adminer**: [http://localhost:8080](http://localhost:8080) or [http://db.localhost](http://db.localhost) + - **Nginx Proxy Manager**: [http://localhost:8090](http://localhost:8090) or [http://proxy.localhost](http://proxy.localhost) + +## Service Details + +### Backend (FastAPI) + +- **Directory**: `./backend` +- **Docker Container**: `fastapi_app` +- **Port**: `8000` +- **Environment Variables**: + - `POSTGRES_SERVER`: Hostname of the PostgreSQL server. + - `POSTGRES_PASSWORD`: Password for the PostgreSQL user. + +### Frontend (Node.js) + +- **Directory**: `./frontend` +- **Docker Container**: `nodejs_app` +- **Port**: `5173` +- **Environment Variables**: + - `VITE_API_URL`: URL of the backend API. + +### Database (PostgreSQL) + +- **Docker Image**: `postgres:latest` +- **Docker Container**: `postgres_db` +- **Port**: `5432` +- **Environment Variables**: + - `POSTGRES_USER`: Username for PostgreSQL. + - `POSTGRES_PASSWORD`: Password for the PostgreSQL user. + - `POSTGRES_DB`: Name of the PostgreSQL database. +- **Volumes**: + - `postgres_data`: Persists PostgreSQL data. + +### Adminer + +- **Docker Image**: `adminer` +- **Docker Container**: `adminer` +- **Port**: `8080` + +### Proxy (Nginx Proxy Manager) + +- **Docker Image**: `jc21/nginx-proxy-manager:latest` +- **Docker Container**: `nginx_proxy_manager` +- **Port**: `8090` +- **Volumes**: + - `./data`: Persistent data for the proxy manager. + - `./letsencrypt`: SSL certificates. + +### Nginx + +- **Docker Image**: `nginx:latest` +- **Docker Container**: `nginx` +- **Port**: `80` +- **Volumes**: + - `./nginx.conf`: Configuration file for Nginx. + - `./proxy_params.conf`: Proxy parameters for Nginx. +- **Depends On**: + - `frontend` + - `backend` + - `db` + - `adminer` + - `proxy` + +## Accessing the Application + +- **Localhost**: You can access the application via `http://localhost`. +- **Custom Domain**: You can set up your domain to connect to the application using the Nginx Proxy Manager. From d2d63519eb91a857f9832b4fad444247c2f63550 Mon Sep 17 00:00:00 2001 From: Ebenezer Emelogu <116062484+Eben-DevOps@users.noreply.github.com> Date: Mon, 8 Jul 2024 21:22:12 +0100 Subject: [PATCH 06/12] Update README.md --- README.md | 26 ++++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 3218c7673..12fbf165d 100644 --- a/README.md +++ b/README.md @@ -12,39 +12,41 @@ This repository is organized into two main directories from the root folder: Each directory has its own README file with detailed instructions to set up and run the application locally without a need for containers. -To run this application locally, please follow the instructions in the respective directories: -###Services needed to run and build this application locally and in containers. +## Prerequisites +- Docker +- Docker Compose -This repository contains a full-stack application setup using Docker Compose. The application consists of a FastAPI backend, a Node.js frontend, a PostgreSQL database, an Adminer database management tool, an Nginx Proxy Manager, and an Nginx web server. - -## Services +### Services needed to run and build this application locally and in containers. +- This repository contains a full-stack application setup using Docker Compose. +- The application consists of a FastAPI backend, a Node.js frontend, a PostgreSQL database, an Adminer database management tool, an Nginx Proxy Manager, and an Nginx web server. - **backend**: FastAPI application serving the backend API. - **frontend**: Node.js application serving the frontend. -- **db**: PostgreSQL database for storing application data. +- **Remote Postgres db**: Remote PostgreSQL database for storing application data hosted on Azure - **adminer**: Database management tool to interact with the PostgreSQL database. - **proxy**: Nginx Proxy Manager to handle SSL certificates and domain management. - **nginx**: Nginx web server to serve the frontend and reverse proxy requests to the backend. -## Setup Instructions +## Application Deployment with Docker. 1. **Clone the repository**: ```sh - git clone https://github.com/Ravencodess/devops-stage-2 - cd devops-stage-2 + git clone https://github.com/Eben-DevOps/Full-Stack-Web-App + cd Full-Stack-Web-App ``` -2. **Build and start the services**: +2. **Build and start the services** (detached mode is optional): ```sh - docker compose up -d + docker-compose build + docker-compose up -d ``` 3. **Verify the services are running**: - **FastAPI Backend**: [http://localhost/api](http://localhost/api) - **Node.js Frontend**: [http://localhost](http://localhost) - - **PostgreSQL Database**: Accessible on port `5432` (no direct browser access) + - **Azure PostgreSQL Database**: Accessible on port `5432` (no direct browser access) - **Adminer**: [http://localhost:8080](http://localhost:8080) or [http://db.localhost](http://db.localhost) - **Nginx Proxy Manager**: [http://localhost:8090](http://localhost:8090) or [http://proxy.localhost](http://proxy.localhost) From e3de0a5151177195d1be95e74f4f87ad3960c209 Mon Sep 17 00:00:00 2001 From: root Date: Mon, 8 Jul 2024 20:36:52 +0000 Subject: [PATCH 07/12] made changes to env files and gitignore files --- .env | 18 ++++++++ .gitignore | 2 + backend/.env | 2 +- backend/docker-compose.yaml | 18 -------- docker-compose.yml | 57 ++++++++++++++++++++++++ frontend/.env | 2 +- frontend/docker-compose.yaml | 15 ------- nginx.conf | 84 ++++++++++++++++++++++++++++++++++++ 8 files changed, 163 insertions(+), 35 deletions(-) create mode 100644 .env create mode 100644 .gitignore delete mode 100644 backend/docker-compose.yaml create mode 100644 docker-compose.yml delete mode 100644 frontend/docker-compose.yaml create mode 100644 nginx.conf diff --git a/.env b/.env new file mode 100644 index 000000000..563a68518 --- /dev/null +++ b/.env @@ -0,0 +1,18 @@ +# Database configuration for PostgreSQL +DB_PG_HOST=chefsbeatz.postgres.database.azure.com +DB_PG_PORT=5432 +DB_PG_USER=npm +DB_PG_PASSWORD=npm +DB_PG_NAME=npm + +# Nginx Proxy Manager application settings +APP_HOST=0.0.0.0 +APP_PORT=8090 +WEB_HOST=proxy.thecloudgenius.com.ng +WEB_PORT=8090 +API_HOST=nginx_proxy_manager.domain.com +API_PORT=81 + +# SSL configuration +# Replace with your own Let's Encrypt details or SSL configuration +CERTBOT_EMAIL=your_email@example.com diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..83bef951a --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +letsencrypt/ +data/ \ No newline at end of file diff --git a/backend/.env b/backend/.env index a4c0fde3e..7af8f3665 100644 --- a/backend/.env +++ b/backend/.env @@ -9,7 +9,7 @@ PROJECT_NAME="Full Stack FastAPI Project" STACK_NAME=full-stack-fastapi-project # Backend -BACKEND_CORS_ORIGINS="http://localhost,http://localhost:5173,https://localhost,https://localhost:5173" +BACKEND_CORS_ORIGINS="http://localhost,http://localhost:5173,https://localhost,https://localhost:5173,http://172.166.176.30:5173" SECRET_KEY=changethis123 FIRST_SUPERUSER=devops@hng.tech FIRST_SUPERUSER_PASSWORD="devops#HNG11" diff --git a/backend/docker-compose.yaml b/backend/docker-compose.yaml deleted file mode 100644 index 457734b92..000000000 --- a/backend/docker-compose.yaml +++ /dev/null @@ -1,18 +0,0 @@ -version: '3.8' - -services: - app: - build: - context: . - dockerfile: Dockerfile - ports: - - "8000:8000" - env_file: - - .env - environment: - PYTHONDONTWRITEBYTECODE: 1 - PYTHONUNBUFFERED: 1 - PYTHONPATH: /app - volumes: - - .:/app - command: ["bash", "-c", "poetry run bash ./prestart.sh && poetry run uvicorn app.main:app --host 0.0.0.0 --port 8000"] \ No newline at end of file diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 000000000..dcdf24e06 --- /dev/null +++ b/docker-compose.yml @@ -0,0 +1,57 @@ +version: '3.8' + +services: + frontend: + build: + context: ./frontend + dockerfile: Dockerfile + container_name: frontend + ports: + - "5173:5173" + env_file: + - ./frontend/.env + volumes: + - ./frontend:/app + - /app/node_modules + + backend: + build: + context: ./backend + dockerfile: Dockerfile + container_name: backend + ports: + - "8000:8000" + env_file: + - ./backend/.env + environment: + PYTHONDONTWRITEBYTECODE: 1 + PYTHONUNBUFFERED: 1 + PYTHONPATH: /app + volumes: + - ./backend:/app + + adminer: + image: adminer + container_name: adminer + ports: + - "8080:8080" + + nginx-proxy-manager: + image: jc21/nginx-proxy-manager:latest + container_name: nginx-proxy-manager + ports: + - "80:80" # Nginx Proxy Manager handles HTTP on port 80 + - "8090:81" + - "443:443" # Assuming Nginx Proxy Manager's management UI runs on port 81 + env_file: + - .env + environment: + DB_PG_HOST: ${DB_PG_HOST} + DB_PG_PORT: ${DB_PG_PORT} + DB_PG_USER: ${DB_PG_USER} + DB_PG_PASSWORD: ${DB_PG_PASSWORD} + DB_PG_NAME: ${DB_PG_NAME} + volumes: + - ./data:/data + - ./letsencrypt:/etc/letsencrypt + restart: always diff --git a/frontend/.env b/frontend/.env index a957163b5..7676b8b68 100644 --- a/frontend/.env +++ b/frontend/.env @@ -1 +1 @@ -VITE_API_URL=http://172.166.176.30:8000 +VITE_API_URL=https://thecloudgenius.com.ng \ No newline at end of file diff --git a/frontend/docker-compose.yaml b/frontend/docker-compose.yaml deleted file mode 100644 index b9fefc3d6..000000000 --- a/frontend/docker-compose.yaml +++ /dev/null @@ -1,15 +0,0 @@ -version: '3.8' - -services: - app: - image: webapp-frontend - build: - context: ./ - dockerfile: Dockerfile - ports: - - "5173:5173" - env_file: - - .env # Specify the path to your .env file - volumes: - - .:/app - - /app/node_modules diff --git a/nginx.conf b/nginx.conf new file mode 100644 index 000000000..b5cd9fbb9 --- /dev/null +++ b/nginx.conf @@ -0,0 +1,84 @@ +# This is the main Nginx configuration file + +# Set the events block to manage worker connections +events { + worker_connections 1024; +} + +# Define HTTP block for HTTP server configuration +http { + include /etc/nginx/mime.types; + default_type application/octet-stream; + + # Enable sendfile to improve file transmission performance + sendfile on; + + # Set keepalive timeout for client connections + keepalive_timeout 65; + + # Include configuration for the main domain + server { + listen 80; + server_name thecloudgenius.com.ng; + + location / { + proxy_pass http://frontend:5173; + 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 X-Forwarded-Proto $scheme; + } + + location /api/ { + proxy_pass http://backend:8000/; + 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 X-Forwarded-Proto $scheme; + } + + location /docs/ { + proxy_pass http://backend:8000/docs/; + 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 X-Forwarded-Proto $scheme; + } + + location /redoc/ { + proxy_pass http://backend:8000/redoc/; + 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 X-Forwarded-Proto $scheme; + } + } + + # Server block for proxy subdomain + server { + listen 80; + server_name proxy.thecloudgenius.com.ng; + + location / { + proxy_pass http://nginx-proxy-manager:81/; + 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 X-Forwarded-Proto $scheme; + } + } + + # Server block for db subdomain + server { + listen 80; + server_name db.thecloudgenius.com.ng; + + location / { + proxy_pass http://adminer:8080/; + 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 X-Forwarded-Proto $scheme; + } + } +} From 977459f6ddfedbbac369056016969f28b6b3e0d1 Mon Sep 17 00:00:00 2001 From: Ubuntu Date: Mon, 8 Jul 2024 21:16:43 +0000 Subject: [PATCH 08/12] read me update --- README.md | 124 ++++++++++++++++++++++++++++++++++++++++----- backend/README.md | 78 +++++++++++++++++++++++++--- frontend/README.md | 24 ++++++--- 3 files changed, 201 insertions(+), 25 deletions(-) diff --git a/README.md b/README.md index a88e403b0..4163971be 100644 --- a/README.md +++ b/README.md @@ -4,23 +4,123 @@ Welcome to the Full-Stack FastAPI and React template repository. This repository ## Project Structure -The repository is organized into two main directories: +This repository is organized into two main directories from the root folder: -- **frontend**: Contains the ReactJS application. -- **backend**: Contains the FastAPI application and PostgreSQL database integration. +- **frontend**: this folder Contains the ReactJS application, including the docker file added after the fork. +- **backend**: Contains the FastAPI application with the addition of a docker file for building a backend image +- For this project, I will be using a remote DB on Azure for my database needs. -Each directory has its own README file with detailed instructions specific to that part of the application. - -## Getting Started - -To get started with this template, please follow the instructions in the respective directories: +Each directory has its own README file with detailed instructions to set up and run the application locally without a need for containers. +## To run this application locally, please see the read me files below - [Frontend README](./frontend/README.md) - [Backend README](./backend/README.md) -#Build the image -docker-compose build +## Prerequisites +- Docker +- Docker Compose + +### Services needed to run and build this application in containers. +- This repository contains a full-stack application setup using Docker Compose. +- The application consists of a FastAPI backend, a Node.js frontend, a PostgreSQL database, an Adminer database management tool, an Nginx Proxy Manager, and an Nginx web server. + +**Your DB can be self hosted or a remote DB on a cloud service** + +- **backend**: FastAPI application serving the backend API. +- **frontend**: Node.js application serving the frontend. +- **Postgres db**: PostgreSQL database for storing application data. +- **adminer**: Database management tool to interact with the PostgreSQL database. +- **proxy**: Nginx Proxy Manager to handle SSL certificates and domain management. +- **nginx**: Nginx web server to serve the frontend and reverse proxy requests to the backend. +- **Docker files**:this will specify how the images will be built and run by docker + +## Application Deployment with Docker. + +**Clone the repository**: + + ```sh + git clone https://github.com/Eben-DevOps/Full-Stack-Web-App + cd Full-Stack-Web-App + ``` + + **Build and start the services** (detached mode is optional): + + ```sh + docker-compose build + docker-compose up -d + ``` + + **Verify the services are running**: + - **FastAPI Backend**: [http://localhost/api](http://localhost/api) + - **Node.js Frontend**: [http://localhost](http://localhost) + - **Azure PostgreSQL Database**: Accessible on port `5432` (no direct browser access) + - **Adminer**: [http://localhost:8080](http://localhost:8080) or [http://db.localhost](http://db.localhost) + - **Nginx Proxy Manager**: [http://localhost:8090](http://localhost:8090) or [http://proxy.localhost](http://proxy.localhost) + +## for my deployment my docker-compose file looks like this +- **note that i used a remote db as you will no see a a db service on this** +```sh +version: '3.8' + +services: + frontend: + build: + context: ./frontend + dockerfile: Dockerfile + container_name: frontend + ports: + - "5173:5173" + env_file: + - ./frontend/.env + volumes: + - ./frontend:/app + - /app/node_modules + + backend: + build: + context: ./backend + dockerfile: Dockerfile + container_name: backend + ports: + - "8000:8000" + env_file: + - ./backend/.env + environment: + PYTHONDONTWRITEBYTECODE: 1 + PYTHONUNBUFFERED: 1 + PYTHONPATH: /app + volumes: + - ./backend:/app + + adminer: + image: adminer + container_name: adminer + ports: + - "8080:8080" + + nginx-proxy-manager: + image: jc21/nginx-proxy-manager:latest + container_name: nginx-proxy-manager + ports: + - "80:80" # Nginx Proxy Manager handles HTTP on port 80 + - "8090:81" + - "443:443" # Assuming Nginx Proxy Manager's management UI runs on port 81 + env_file: + - .env + environment: + DB_PG_HOST: ${DB_PG_HOST} + DB_PG_PORT: ${DB_PG_PORT} + DB_PG_USER: ${DB_PG_USER} + DB_PG_PASSWORD: ${DB_PG_PASSWORD} + DB_PG_NAME: ${DB_PG_NAME} + volumes: + - ./data:/data + - ./letsencrypt:/etc/letsencrypt + restart: always +``` + +## Accessing the Application -#Run the container -docker-compose up \ No newline at end of file +- **Localhost**: You can access the application via `http://localhost`. +- **Custom Domain**: You can set up your domain to connect to the application using the Nginx Proxy Manager. diff --git a/backend/README.md b/backend/README.md index 448e3ddb3..283fccf84 100644 --- a/backend/README.md +++ b/backend/README.md @@ -3,7 +3,6 @@ This directory contains the backend of the application built with FastAPI and a PostgreSQL database. ## Prerequisites - - Python 3.8 or higher - Poetry (for dependency management) - PostgreSQL (ensure the database server is running) @@ -11,34 +10,99 @@ This directory contains the backend of the application built with FastAPI and a ### Installing Poetry To install Poetry, follow these steps: - ```sh curl -sSL https://install.python-poetry.org | python3 - ``` Add Poetry to your PATH (if not automatically added): +```sh +# Example for Bash shell +export PATH="$HOME/.poetry/bin:$PATH" +``` ## Setup Instructions -1. **Navigate to the backend directory**: + **Navigate to the backend directory**: ```sh cd backend ``` -2. **Install dependencies using Poetry**: + **Install dependencies using Poetry**: ```sh poetry install ``` -3. **Set up the database with the necessary tables**: + **Setup PostgreSQL** + +**Follow these instructions to install PostgreSQL on Linux and configure a user named app with password changethis123 and a database named app. Give all permissions of the app database to the app user.** + +## Install PostgreSQL on Linux (example for Ubuntu): + +```bash +sudo apt update +sudo apt install postgresql postgresql-contrib +``` + +## Switch to the PostgreSQL user and access the PostgreSQL shell: + +```bash +sudo -i -u postgres +psql +``` + +## Create a user app with password changethis123: + +```sql +-- Create the database if it doesn't exist +CREATE DATABASE app; + +-- Create the user if it doesn't exist, or update the password if it does +DO +$do$ +BEGIN + IF NOT EXISTS ( + SELECT + FROM pg_catalog.pg_user + WHERE usename = 'app') THEN + + CREATE USER app WITH PASSWORD 'changethis123'; + ELSE + ALTER USER app WITH PASSWORD 'changethis123'; + END IF; +END +$do$; + +-- Grant all privileges on the database to the user +GRANT ALL PRIVILEGES ON DATABASE app TO app; +``` + +## Exit the PostgreSQL shell and switch back to your regular user. + +```bash +exit +``` + +## Set database credentials + +## Edit the PostgreSQL environment variables located in the .env file. Make sure the credentials match the database credentials you just created. + +```bash +POSTGRES_SERVER=localhost +POSTGRES_PORT=5432 +POSTGRES_DB=app +POSTGRES_USER=app +POSTGRES_PASSWORD=changethis123 +``` + +## Seed the database with the necessary tables and initial data: ```sh poetry run bash ./prestart.sh ``` -4. **Run the backend server**: +## start the backend server: ```sh poetry run uvicorn app.main:app --reload ``` -5. **Update configuration**: +## Update configuration: Ensure you update the necessary configurations in the `.env` file, particularly the database configuration. diff --git a/frontend/README.md b/frontend/README.md index 39eefcdb2..21419edee 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -9,21 +9,33 @@ This directory contains the frontend of the application built with ReactJS and C ## Setup Instructions -1. **Navigate to the frontend directory**: + **Navigate to the frontend directory**: ```sh cd frontend ``` -2. **Install dependencies**: +**Install dependencies**: ```sh npm install ``` -3. **Run the development server**: +**Run the development server**: ```sh npm run dev ``` -4. **Configure API URL**: - Ensure the API URL is correctly set in the `.env` file. - +**testing the application using curl** +```sh +curl localhost:5173 +``` + +**testing the application using a web browser locally** +```sh +http://:5173 +``` + +**Configure API URL**: +- navigate to the .env file in the frontend root folder and change the VITE_API_URL to point to you domain name instead of localhost: +```sh +VITE_API_URL=http:// +``` \ No newline at end of file From 72fa577d9555dd84a897d4a490c95ca544506de1 Mon Sep 17 00:00:00 2001 From: Ebenezer Emelogu <116062484+Eben-DevOps@users.noreply.github.com> Date: Mon, 8 Jul 2024 22:17:51 +0100 Subject: [PATCH 09/12] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 4163971be..1d426060f 100644 --- a/README.md +++ b/README.md @@ -58,8 +58,8 @@ Each directory has its own README file with detailed instructions to set up and - **Adminer**: [http://localhost:8080](http://localhost:8080) or [http://db.localhost](http://db.localhost) - **Nginx Proxy Manager**: [http://localhost:8090](http://localhost:8090) or [http://proxy.localhost](http://proxy.localhost) -## for my deployment my docker-compose file looks like this -- **note that i used a remote db as you will no see a a db service on this** +## For my deployment my docker-compose file looks like this +- **note that I used a remote db as you will not see a db service on this** ```sh version: '3.8' From 995ad0727b059bfffc722f0adaca64308587cb1f Mon Sep 17 00:00:00 2001 From: Ebenezer Emelogu <116062484+Eben-DevOps@users.noreply.github.com> Date: Mon, 8 Jul 2024 22:28:34 +0100 Subject: [PATCH 10/12] Update README.md --- README.md | 109 ++---------------------------------------------------- 1 file changed, 3 insertions(+), 106 deletions(-) diff --git a/README.md b/README.md index 50d385182..318e1e52a 100644 --- a/README.md +++ b/README.md @@ -19,26 +19,9 @@ Each directory has its own README file with detailed instructions to set up and ======= Each directory has its own README file with detailed instructions to set up and run the application locally without a need for containers. -## Prerequisites -- Docker -- Docker Compose - -### Services needed to run and build this application locally and in containers. -- This repository contains a full-stack application setup using Docker Compose. -- The application consists of a FastAPI backend, a Node.js frontend, a PostgreSQL database, an Adminer database management tool, an Nginx Proxy Manager, and an Nginx web server. - -- **backend**: FastAPI application serving the backend API. -- **frontend**: Node.js application serving the frontend. -- **Remote Postgres db**: Remote PostgreSQL database for storing application data hosted on Azure -- **adminer**: Database management tool to interact with the PostgreSQL database. -- **proxy**: Nginx Proxy Manager to handle SSL certificates and domain management. -- **nginx**: Nginx web server to serve the frontend and reverse proxy requests to the backend. - - ## Application Deployment with Docker. - -## Prerequisites +### Prerequisites - Docker - Docker Compose @@ -46,7 +29,7 @@ Each directory has its own README file with detailed instructions to set up and - This repository contains a full-stack application setup using Docker Compose. - The application consists of a FastAPI backend, a Node.js frontend, a PostgreSQL database, an Adminer database management tool, an Nginx Proxy Manager, and an Nginx web server. -**Your DB can be self hosted or a remote DB on a cloud service** +**Your DB can be self-hosted or a remote DB on a cloud service** - **backend**: FastAPI application serving the backend API. - **frontend**: Node.js application serving the frontend. @@ -141,93 +124,7 @@ services: restart: always ``` -## Accessing the Application - -======= -1. **Clone the repository**: - - ```sh - git clone https://github.com/Eben-DevOps/Full-Stack-Web-App - cd Full-Stack-Web-App - ``` - -2. **Build and start the services** (detached mode is optional): - - ```sh - docker-compose build - docker-compose up -d - ``` - -3. **Verify the services are running**: - - **FastAPI Backend**: [http://localhost/api](http://localhost/api) - - **Node.js Frontend**: [http://localhost](http://localhost) - - **Azure PostgreSQL Database**: Accessible on port `5432` (no direct browser access) - - **Adminer**: [http://localhost:8080](http://localhost:8080) or [http://db.localhost](http://db.localhost) - - **Nginx Proxy Manager**: [http://localhost:8090](http://localhost:8090) or [http://proxy.localhost](http://proxy.localhost) - -## Service Details - -### Backend (FastAPI) - -- **Directory**: `./backend` -- **Docker Container**: `fastapi_app` -- **Port**: `8000` -- **Environment Variables**: - - `POSTGRES_SERVER`: Hostname of the PostgreSQL server. - - `POSTGRES_PASSWORD`: Password for the PostgreSQL user. - -### Frontend (Node.js) - -- **Directory**: `./frontend` -- **Docker Container**: `nodejs_app` -- **Port**: `5173` -- **Environment Variables**: - - `VITE_API_URL`: URL of the backend API. - -### Database (PostgreSQL) - -- **Docker Image**: `postgres:latest` -- **Docker Container**: `postgres_db` -- **Port**: `5432` -- **Environment Variables**: - - `POSTGRES_USER`: Username for PostgreSQL. - - `POSTGRES_PASSWORD`: Password for the PostgreSQL user. - - `POSTGRES_DB`: Name of the PostgreSQL database. -- **Volumes**: - - `postgres_data`: Persists PostgreSQL data. - -### Adminer - -- **Docker Image**: `adminer` -- **Docker Container**: `adminer` -- **Port**: `8080` - -### Proxy (Nginx Proxy Manager) - -- **Docker Image**: `jc21/nginx-proxy-manager:latest` -- **Docker Container**: `nginx_proxy_manager` -- **Port**: `8090` -- **Volumes**: - - `./data`: Persistent data for the proxy manager. - - `./letsencrypt`: SSL certificates. - -### Nginx - -- **Docker Image**: `nginx:latest` -- **Docker Container**: `nginx` -- **Port**: `80` -- **Volumes**: - - `./nginx.conf`: Configuration file for Nginx. - - `./proxy_params.conf`: Proxy parameters for Nginx. -- **Depends On**: - - `frontend` - - `backend` - - `db` - - `adminer` - - `proxy` - -## Accessing the Application - +## Accessing the Application via browser - **Localhost**: You can access the application via `http://localhost`. - **Custom Domain**: You can set up your domain to connect to the application using the Nginx Proxy Manager. From f5e0dc80b4631bc40c4560cd6819684e88fda33b Mon Sep 17 00:00:00 2001 From: Ebenezer Emelogu <116062484+Eben-DevOps@users.noreply.github.com> Date: Mon, 8 Jul 2024 22:29:17 +0100 Subject: [PATCH 11/12] Update README.md --- README.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/README.md b/README.md index 318e1e52a..994672d18 100644 --- a/README.md +++ b/README.md @@ -13,11 +13,9 @@ This repository is organized into two main directories from the root folder: Each directory has its own README file with detailed instructions to set up and run the application locally without a need for containers. -## To run this application locally, please see the read me files below +## To run this application locally, please see the readme files below - [Frontend README](./frontend/README.md) - [Backend README](./backend/README.md) -======= -Each directory has its own README file with detailed instructions to set up and run the application locally without a need for containers. ## Application Deployment with Docker. From b8b732937800efa99f65b5052fc6e5ce574fef17 Mon Sep 17 00:00:00 2001 From: Ebenezer Emelogu <116062484+Eben-DevOps@users.noreply.github.com> Date: Mon, 8 Jul 2024 23:08:13 +0100 Subject: [PATCH 12/12] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 994672d18..2b45cf18e 100644 --- a/README.md +++ b/README.md @@ -105,9 +105,9 @@ services: image: jc21/nginx-proxy-manager:latest container_name: nginx-proxy-manager ports: - - "80:80" # Nginx Proxy Manager handles HTTP on port 80 + - "80:80" - "8090:81" - - "443:443" # Assuming Nginx Proxy Manager's management UI runs on port 81 + - "443:443" env_file: - .env environment: