Config Server ง่าย ๆ ด้วย NGINX ตอนที่ 1

สมมุติว่าเราทำเว็บสักเว็บที่เขียนด้วย javascript แล้วจำเป็นต้องเรียก services ต่างๆที่อาจจะเป็น micro services ลองจินตนาการว่า ตัวเว็บรันด้วย port 4200 เขียน service a รันด้วย port 3000 หรืออาจจะมี service b ที่อาจจะต้องรันด้วย port 3001

แล้ว…….ถ้าจะเปิดใช้งานเว็บเหล่านี้ยังไงดี ?

เข้าเว็บด้วย myweb.com:4200 แล้วให้ เว็บเราไปต่อ service a ด้วย myweb.com:3000 และ service b ด้วย myweb.com:3001 ก็ดูท่าทางไม่ค่อยสวยเท่าไหร่เนอะ

งั้น….ลองเปลี่ยนใหม่

คราวนี้ถ้าเราอยากทำให้มันง่ายขึ้น เราอาจจะต้องการให้ทุก service ของเราและเว็บรันด้วย port เดียวกัน เป็น 80 (http) หรือ 443 (https) คราวนี้ลองเปลี่ยนมาอ้างอิง services ต่างๆด้วย sub-domain ดีกว่า เช่น https://www.myweb.com , https://service-a.myweb.com และ https://service-b.myweb.com แบบนี้ดูท่าทางสวยขึ้นเยอะ แล้ว เราจะทำไงหละ ในเมื่อ เว็บของเรามันรันที่ port 4200 และ services มันรันที่ 3000 และ 3001 จึงได้นำเอา Nginx มาใช้ทำ reverse proxy จะได้ไม่ต้องเรียกเว็บ หรือ services ผ่าน port อีกต่อไป

อธิบาย Reverse Proxy แบบรวบรัด
Reverse Proxy คือการรับ request มาแล้ว forward ไปยังที่ ๆ นึง เช่น 
ถ้า request ไปที่ localhost:8080 จะรับ request แล้ว forward ไป Web Container ที่ port 80

**REFS:เพิ่มเติม

พอจะรู้ข้อดีของ Nginx คร่าว ๆ ละ เรามาเริ่มลง Tools ที่ต้องใช้กันดีกว่า

1.Docker

$ curl -fsSL get.docker.com -o get-docker.sh
$ sh get-docker.sh

2.Docker Compose

$ sudo curl -L  https://github.com/docker/compose/releases/download/1.17.0/docker-compose-`uname -s`-`uname -m` -o /usr/local/bin/docker-compose
$ sudo chmod +x /usr/local/bin/docker-compose

ส่วน NGINX พระเอกของเราไม่ต้องลงนะครับ เพราะเราจะใช้ images ของ Docker แทน

หลังจากลงโปรแกรมที่ต้องใช้ครบและรู้ Concept คร่าว ๆแล้ว ตอนนี้เราจะมารัน Docker แบบ Reverse Proxy กัน เอ้าลุย!!!!

$ sudo bash 
สร้าง folder และสร้างไฟล์ตามนี้ครับ
website --
         |
         nginx --
                |
                 -- nginx.conf
                 -- conf.d
                         |
                         -- site_a.conf
                         -- site_b.conf
         |
         site_a --
                 |
                 -- index.html
         |
         site_b --
                 |
                 -- index.html
         |
         docker-compose.yml

แก้ไขไฟล์ตามนี้ครับ

nginx/nginx.conf

events {
  worker_connections  1024;
}
http {
  server {
    listen 80;
    server_name localhost;
root /var/www/html/website;
    index index.html;
  }
}

nginx/conf.d/site_a.conf

server {
   listen       80;
   server_name  a.site.com;
   location / {
       root   /usr/share/nginx/html;
       index  index.html index.htm;
       proxy_pass http://site_a;
   }
}

nginx/conf.d/site_b.conf

server {
   listen       80;
   server_name  b.site.com;
   location / {
       root   /usr/share/nginx/html;
       index  index.html index.htm;
       proxy_pass http://site_b;
   }
}

site_a/index.html

<h1> Hello Site A </h1>

site_b/index.html

<h1> Hello Site B </h1>

docker-compose.yml

version: '2'
services:
  site_a:
    image: nginx:1.13.0-alpine
    container_name: site_a
    ports:
      - "8080:80"
    volumes:
      - ./site_a:/var/www/html/website
      - ./nginx/nginx.conf:/etc/nginx/nginx.conf
site_b:
    image: nginx:1.13.0-alpine
    container_name: site_b
    ports:
      - "8081:80"
    volumes:
      - ./site_b:/var/www/html/website
      - ./nginx/nginx.conf:/etc/nginx/nginx.conf
docker_proxy:
    image: nginx
    container_name: docker_proxy
    volumes:
      - ./nginx/conf.d:/etc/nginx/conf.d
    ports:
      - "80:80"

หลังจากแก้ไขไฟล์ตามด้านบนแล้ว

$ docker-compose up -d
$ docker ps

ถ้ารันไม่ผิด Terminal จะบ่นออกมาประมาณนี้นะครับ

หลังจากนั้นเปิด Browser แล้วใส่ URL

— 127.0.0.1 จะได้หน้า Welcome to nginx

— 127.0.0.1:8080 จะได้หน้า Hello Site A

— 127.0.0.1:8081 จะได้หน้า Hello Site B

เราเคยกำหนด url a.site.com และ b.site.com ที่ไฟล์ site_a.conf และ site_b.conf

แต่เรายังไม่สามารถเข้าเพราะยังไม่ได้ตั้งชื่อ host

$ vim /etc/hosts

เพิ่ม a.site.com และ b.site.com ต่อจากท้าย localhost

พอเพิ่มตรงนี้เสร็จแล้วก็สามารถเข้าเว็บได้ด้วยชื่อ a.site.com และ b.site.com ได้แว้ววว

ตอนนี้พอเท่านี้ก่อนดีกว่า ไว้มาต่อเรื่อง Load Balance ด้วย Nginx ในตอนต่อไปครับ บ๊าย บายยยยยยยยยยยยยยยย !!!

CODE: https://github.com/tongzcomradez/nginx_blog.git

REFS: https://www.nginx.com/resources/admin-guide/reverse-proxy/