Categories
Docker nginx 🏴‍☠️

Reverser Proxy ด้วย Nginx บน Docker

Spread the love

ใน workshop ครั้งนี้ จะใช้ digital ocean โดยไปตั้งค่า subdomain ก่อนที่ network โดยเพิ่มที่ CNAME ดังนี้ blog.zity.co , test.zity.co

เรามาเริ่มสร้างจากใช้ docker image ที่ชื่อว่า nginx-proxy

$ docker network create sandbox_network
docker run -d \
  --name reverse-proxy \
  -p 80:80 \
  -v /var/run/docker.sock:/tmp/docker.sock:ro \
  --net sandbox_network jwilder/nginx-proxy

เตรียมไฟล์ conf และ html สำหรับ 2 web ที่จะทดสอบ

sudo mkdir -p /nginx-proxy/nginx
nano /nginx-proxy/nginx/nginx-blog.conf
nano /nginx-proxy/nginx/nginx-test.conf

conf เหมือนกันทั้ง 2 ไฟล์

worker_processes  1;

events {
  worker_connections  1024;
}

http {
  include /etc/nginx/mime.types;

  server {
    listen 80;
    server_name localhost;
    
    root /var/www/html/web;
    index index.html;
  }
}

bloghtml/index.com

sudo mkdir -p /nginx-proxy/web/bloghtml
nano /nginx-proxy/web/bloghtml/index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Hello</title>
</head>
<body>
    <h1>Hello! blog</h1>
    <p>
        This is the blog.
    </p>
</body>
</html>

testhtml/index.com

sudo mkdir -p /nginx-proxy/web/testhtml
nano /nginx-proxy/web/testhtml/index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Hello</title>
</head>
<body>
    <h1>Hello! test</h1>
    <p>
        This is the test.
    </p>
</body>
</html>

สร้างไฟล์ docker-compose.yml

sudo mkdir -p /nginx-proxy/docker
nano /nginx-proxy/docker/docker-compose.yml
version: '2'
services:
  blog:
    image: nginx:1.13.0-alpine
    container_name: blog
    expose:
      - 80
    volumes:
      - /nginx-proxy/web/bloghtml:/var/www/html/web
      - /nginx-proxy/nginx/nginx-blog.conf:/etc/nginx/nginx.conf
    environment:
      VIRTUAL_HOST: 'blog.zity.co'

  test:
    image: nginx:1.13.0-alpine
    container_name: test
    expose:
      - 80
    volumes:
      - /nginx-proxy/web/testhtml:/var/www/html/web
      - /nginx-proxy/nginx/nginx-test.conf:/etc/nginx/nginx.conf
    environment:
      VIRTUAL_HOST: 'test.zity.co'

networks:
  default:
    external:
      name: sandbox_network

run command

docker-compose up -d

เสร็จแล้วตรวจสอบด้วยคำสั่ง

docker ps -a

ทอสอบเข้าจาก blog.zity.co

ทดสอบเข้าจาก test.zity.co

หลักการทำงาน

reverse proxy จุดสำคัญอยู่ที่บรรทัดนี้

-v /var/run/docker.sock:/tmp/docker.sock:ro

container จะอยู่ที่การ set VIRTUAL_HOST

environment:
  VIRTUAL_HOST: 'blog.gigapixel.dev'

ref : https://medium.com/@peerapat/host-%E0%B8%AB%E0%B8%A5%E0%B8%B2%E0%B8%A2-websites%E0%B9%83%E0%B8%99%E0%B9%80%E0%B8%84%E0%B8%A3%E0%B8%B7%E0%B9%88%E0%B8%AD%E0%B8%87%E0%B9%80%E0%B8%94%E0%B8%B5%E0%B8%A2%E0%B8%A7-%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2-docker-nginx-b5002660f196

Spread the love