Deployment Using Cloudflare One Dash (Cloudflared)

Prerequisites

• A computer :)
• Docker Compose
• Cloudflare Account
• cloudflared daemon

Setup

Prepare for Deployment - App Settings

Below are the checkpoints before deploying the app:

• Build the Go app for the server

• Setup the Docker Compose file

• Deploy the Containers

  docker compose up -d --build

Cloudflare One Dash - Deploy

After installing cloudflared, following are the steps to set up the tunnel (as of 11-Nov-23):

1. Authenticate the daemon with the cloudflare account using

   cloudflared login

2. Create a tunnel using

   cloudflared tunnel create <tunnel-name>

   Replace <tunnel-name> with the actual tunnel name.

   After this, cloudflare will create a .cloudflared directory in the user's home directory. In this directory, create a file called config.yml with the following content:

   tunnel: <tunnel-id>
   
   # use / for unix based systems and \ for windows for paths
   credentials-file: <home-directory>\.cloudflared\<tunnel-id>.json
   
   ingress:
   - hostname: <public-frontend-uri>
      service: http://localhost:3000
   - hostname: <backend-uri>
      service: http://localhost:3001
   
   - service: http_status:404
   

3. Create a DNS CNAME record for the domain for the front-end and the back-end using

   cloudflared tunnel route dns quizmaster <frontend-uri>
   cloudflared tunnel route dns quizmaster <backend-uri>

4. Run the tunnel using

   cloudflared tunnel run <tunnel-name>

References

Docker Compose File

Place a file called docker-compose.yaml in the root directory of the project with the following content:

version: '3.8'
services:
  mongo:
    image: mongo
    restart: always
    environment:
      MONGO_INITDB_ROOT_USERNAME: root
      MONGO_INITDB_ROOT_PASSWORD: example

  backend:
    restart: always
    build:
      context: .
      dockerfile: ./Dockerfile
    ports:
      - "3001:3001"
    environment:
      - MONGODB_URI=mongodb://root:example@mongo:27017/
      - ALLOWED_ORIGINS=...
      - API_KEY=...

  frontend:
    restart: always
    build:
      context: ./web
      dockerfile: ./Dockerfile
    ports:
      - "3000:3000"
    environment:
      - BACKEND_URI=...
      - BACKEND_API_KEY=...
      - NEXTAUTH_SECRET=...
      - GITHUB_ID=...
      - GITHUB_SECRET=...
      - GOOGLE_CLIENT_ID=...
      - GOOGLE_CLIENT_SECRET=...
      - FACEBOOK_CLIENT_ID=...
      - FACEBOOK_CLIENT_SECRET=...

The above file creates three containers:

1. Go app container, backend
2. Next app container, frontend
3. MongoDB container, mongo

Note: More information on environment variables is available here