Unable to connect CloudFlare Domain with AWS EC2 running multiple docker images

I have purchased a domain example.com from CloudFlare. Set the certificate and the private key, in Cloudflare. 2 docker images are running in EC2 on different ports, Flask Hello Word on Port 3000 and Angular Hello World on Port 4000. I want example.com:3000 to serve Flask and example.com:4000 to serve Angular.

Under CloudFlare domain DNS Records I have added

Type​

Name​

Content​

Proxy Status​

TTL
A​

example.com​

public ipv4 Address of EC2 Instance​

DNS Only​

Auto
A​

www​

public ipv4 Address of EC2 Instance​

DNS Only​

Auto​

Flask Dockerfile

# Use Fedora as the base image
FROM fedora

# Update the package repository and upgrade all packages
RUN dnf upgrade -y

# Install pip and other necessary packages
RUN dnf install -y python3-pip gcc python3-devel

# Install Flask (this can be done using requirements.txt if specified)
# RUN pip3 install Flask

# Set the working directory to /app
WORKDIR /app

# Copy the entire contents of the current directory to /app in the container
COPY . .

# Install Python dependencies from requirements.txt
RUN pip3 install -r requirements.txt

# Expose the port that the Flask app will run on
EXPOSE 5000

# Set the environment variable for Flask
ENV FLASK_APP=run.py

# Run the Flask app
CMD ["flask", "run", "--host=0.0.0.0"]


Angular Dockerfile

# Use an official Node.js runtime as a parent image
FROM node:18 AS build

# Set the working directory in the container
WORKDIR /app

# Copy the package.json and package-lock.json files to the working directory
COPY package*.json ./

# Install the dependencies
RUN npm install

# Copy the rest of the application code to the working directory
COPY . .

# Build the Angular application for production
RUN npm run build --prod

# Use an official Nginx runtime as a parent image
FROM nginx:alpine

# Copy the built Angular app from the previous stage to the Nginx html directory
COPY --from=build /app/dist/sample-frontend/browser /usr/share/nginx/html

# Copy the SSL certificates
COPY ssl/origin.pem /etc/nginx/ssl/origin.pem
COPY ssl/origin.key /etc/nginx/ssl/origin.key

# Remove the default Nginx configuration file
RUN rm /etc/nginx/conf.d/default.conf

# Copy the custom Nginx configuration file to the Nginx configuration directory
COPY nginx.conf /etc/nginx/conf.d

# Expose port 443 to the outside world (HTTPS)
EXPOSE 443

# Start Nginx when the container launches
CMD ["nginx", "-g", "daemon off;"]


Angular nginx.conf

# HTTP (port 80) to HTTPS (port 443) redirect
server {
listen 80;
server_name example.com www.example.com;

# Redirect all HTTP requests to HTTPS
return 301 https://$host$request_uri;
}

# HTTPS server block
server {
listen 443 ssl;
server_name example.com www.example.com;

# SSL Certificate & Key
ssl_certificate /etc/nginx/ssl/origin.pem;
ssl_certificate_key /etc/nginx/ssl/origin.key;

# Enable Strong SSL
ssl_protocols TLSv1.2 TLSv1.3;
ssl_ciphers 'TLS_AES_128_GCM_SHA256:TLS_AES_256_GCM_SHA384:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384';
ssl_prefer_server_ciphers on;

root /usr/share/nginx/html;
index index.html;

# Serve Angular application
location / {
try_files $uri $uri/ /index.html;
}

# Enable Gzip Compression
gzip on;
gzip_types text/plain application/javascript text/css application/json;
gzip_min_length 256;
}

Continue reading...