DevOps NGINX Proxy and DNS Hosting

Overview

Configure Proxy and DNS Hosting for an admin panel running on a custom domain (e.g., admin.example.com).

Requirements

• Configure NGINX for Vue.js admin panel
• Create and configure self-signed SSL certificates
• Set up HTTP to HTTPS redirection
• Configure reverse proxy with DNS
• Deploy NGINX configuration using Docker Compose
• Set up Cloudflare DNS configuration

Implementation Steps

1. Configure NGINX for Vue.js Admin Panel

Dockerfile for NGINX

Create Dockerfile.nginx:

FROM nginx:alpine

COPY nginx/conf.d /etc/nginx/conf.d
COPY nginx/certs /etc/nginx/certs

EXPOSE 80
EXPOSE 443

2. Create NGINX Configuration File

Create nginx/conf.d/admin.conf:

server {
    listen 80;
    server_name admin.example.com;

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

server {
    listen 443 ssl;
    server_name admin.example.com;

    ssl_certificate     /etc/nginx/certs/admin.crt;
    ssl_certificate_key /etc/nginx/certs/admin.key;

    location / {
        root /usr/share/nginx/html;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
}

3. Generate Self-Signed SSL Certificates

mkdir -p nginx/certs
openssl req -x509 -nodes -days 365 -newkey rsa:2048 \
  -keyout nginx/certs/admin.key \
  -out nginx/certs/admin.crt \
  -subj "/CN=admin.example.com/O=Admin Panel/C=IN"

4. Docker Compose Configuration

Create docker-compose.yml:

version: '3.8'

services:
  nginx:
    build:
      context: .
      dockerfile: Dockerfile.nginx
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./nginx/conf.d:/etc/nginx/conf.d
      - ./nginx/certs:/etc/nginx/certs
      - ./dist:/usr/share/nginx/html

Note: Ensure your Vue.js admin panel build is available in the dist/ folder.

5. CI/CD Script in GitLab

Create .gitlab-ci.yml:

stages:
  - deploy

deploy_to_ec2:
  stage: deploy
  only:
    - main
  script:
    - chmod 400 dharti-devops.pem
    - scp -i dharti-devops.pem -r * ec2-user@<EC2_PUBLIC_IP>:/home/ec2-user/project
    - ssh -i dharti-devops.pem ec2-user@<EC2_PUBLIC_IP> << EOF
        cd project
        docker-compose down
        docker-compose up --build -d
      EOF

6. Configure Cloudflare DNS

1. Go to Cloudflare dashboard
2. Add your domain (example.com)
3. Create an A record:
   • Name: admin
   • IPv4: <EC2_PUBLIC_IP>
   • Enable the orange cloud (proxy)