Docker Hosting on Oracle Cloud: Secure Your Website with Nginx and SSL

Buckle up, brave developer! 🎢 We’re about to embark on a thrilling adventure through the lands of OCI, Docker, and Nginx to host your React website. It’s like a tech theme park, but instead of cotton candy, we have containers! 🍭🐳

Step 1: Create an OCI Instance (aka “The Ticket Booth”) 🎟️ First things first, we need to get our ticket to ride. Create an instance in OCI faster than you can say “cloud computing” three times fast!

Step 2: Login to Your Instance (aka “Entering the Park”) 🏰 You’ve got your ticket, now it’s time to enter the magical kingdom of your OCI instance. Don’t forget your virtual map!

Step 3: Install Docker (aka “Choosing Your Ride Vehicle”) 🚀 Time to pick our ride vehicle for this adventure. We’re going with Docker because rollercoasters are so last season! Let’s add that Docker repo to yum and install it like we’re winning a prize at the carnival:

sudo yum install -y yum-utils
sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo
sudo yum install docker-ce docker-ce-cli containerd.io
sudo systemctl start docker
sudo systemctl enable docker

Step 4: Create an Nginx Image (aka “Building Our Own Ride”) 🛠️ Now for the fun part — we’re going to build our own ride! First, let’s create a project directory and a Dockerfile:

mkdir openresty-nginx
cd openresty-nginx
touch Dockerfile

Add the following to your Dockerfile (it’s like the blueprint for our awesome ride):

FROM node:18-alpine as build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Step 5: SSL Certificate (aka “Safety Harness”) 🔒 Safety first! Let’s generate a self-signed SSL certificate:

mkdir -p certs
openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout certs/selfsigned.key -out certs/selfsigned.crt -subj "/CN=localhost"

Step 6: Nginx Configuration (aka “Ride Controls”) 🎛️ Time to set up our ride controls! Create an nginx.conf file:

touch nginx.conf

events {
    worker_connections 1024;
}

http {
    upstream react_app {
        server react-app:80;
    }

    server {
        listen 80;
        server_name <your-domain>;

        location /.well-known/acme-challenge/ {
            root /var/www/certbot;
        }

        location / {
            return 301 https://$host$request_uri;
        }
    }

    server {
        listen 443 ssl;
        server_name <your-domain>;

        ssl_certificate /etc/letsencrypt/live/<your-domain>/cert.pem;
        ssl_certificate_key /etc/letsencrypt/live/<your-domain>/privkey.pem;

        location / {
            proxy_pass http://react_app;
            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;
        }
    }
}

Add your Nginx configuration here. It’s like programming the twists and turns of our ride!

docker compose file for easy installation:

version: '3.8'

services:
  react-app:
    build:
      context: .
      dockerfile: Dockerfile
    container_name: react-app
    networks:
      - app-network

  openresty:
    build:
      context: ./openresty-nginx
      dockerfile: Dockerfile
    container_name: openresty
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./openresty-nginx/nginx.conf:/usr/local/openresty/nginx/conf/nginx.conf:ro
      - ./certbot/conf:/etc/letsencrypt
      - ./certbot/www:/var/www/certbot
    depends_on:
      - react-app
    networks:
      - app-network

        #certbot:
        #image: certbot/certbot
        #container_name: certbot
        #volumes:
        #- ./certbot/conf:/etc/letsencrypt
        #- ./certbot/www:/var/www/certbot
        #command: certonly --webroot -w /var/www/certbot --force-renewal --email <your-email> -d <your-domain> --agree-tos --non-interactive --account cf5ff4c665282e9598ca561ea53b7829
        #depends_on:
        #- openresty

networks:
  app-network:
    driver: bridge

Step 7: Custom Nginx Config (aka “VIP Experience”) 🌟 For the ultimate experience, create a custom Nginx config file. This is where you add all the bells and whistles to make your ride truly unforgettable!

Now just spawn an instance on your oracle cloud and open ports 80 and 443 in the ingress on virtual cloud network then take your public ip address of your instance and put it on one of the CDN (optional) like cloudfare for free and setup accordingly to your domain or sub-domain.

Conclusion: Congratulations, intrepid developer! 🎉 You’ve successfully navigated the thrilling world of OCI, Docker, and Nginx to host your React website. Your virtual theme park is now open for business! Remember, in this park, the only screaming you’ll hear is from excitement when your website loads lightning-fast. 😄

So, hop aboard your Docker container, secure it with your SSL safety harness, and let Nginx guide you through the exhilarating twists and turns of web hosting. May your server response times be low and your user satisfaction be high! 🚀💻