การตั้งค่าโดเมน, ซับโดเมน, และการจัดการ CORS ใน Nginx

ถ้าคุณกำลังรันเว็บไซต์หรือ API โอกาสที่คุณจะต้องจัดการกับโดเมน, ซับโดเมน, และปัญหา CORS ที่น่ารำคาญนั้นมีสูง มาทำความเข้าใจทีละขั้นตอนและตั้งค่าทุกอย่างให้เรียบร้อยกันเถอะ.

การตั้งค่าโดเมนและซับโดเมนใน Nginx

Nginx ทำให้การตั้งค่าหลายโดเมนและซับโดเมนเป็นเรื่องง่ายมาก คุณแค่ต้องตั้งค่า server blocks (หรือที่เรียกว่า virtual hosts) เพื่อบอก Nginx ว่าโดเมนไหนควรชี้ไปที่ไหน.

การใช้ Nginx เป็น Reverse Proxy

ในกรณีนี้ เราจะใช้ Nginx เป็น reverse proxy ซึ่งหมายความว่า Nginx จะรับคำขอที่เข้ามาและส่งต่อไปยังเซิร์ฟเวอร์ backend ที่เหมาะสมตามซับโดเมน การตั้งค่านี้มีประโยชน์สำหรับการกระจายโหลด, ความปลอดภัย, และการจัดการคำขอในศูนย์กลาง.

เปลี่ยนเส้นทาง HTTP ไปยัง HTTPS

เพื่อให้แน่ใจว่าทุกการรับส่งข้อมูลถูกส่งผ่าน HTTPS อย่างปลอดภัย ให้ตั้งค่า redirect จากพอร์ต 80 ไปยัง 443:

server {
    listen 80;
    server_name example.com *.example.com;
    return 301 https://$host$request_uri;
}

การจัดการโดเมนและซับโดเมนหลายตัวด้วย Dynamic Proxy Pass

ถ้าคุณต้องการจัดการทั้งโดเมนหลัก (example.com) และซับโดเมนหลายตัว (api.example.com, blog.example.com, ฯลฯ) แบบไดนามิก คุณสามารถดึงซับโดเมนและ proxy คำขอตามนั้นได้:

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

    ssl_certificate /etc/nginx/ssl/example.com.crt;
    ssl_certificate_key /etc/nginx/ssl/example.com.key;

    set $subdomain "default";
    if ($host ~* ^(.+?)\.example\.com$) {
        set $subdomain $1;
    }

    location / {
        proxy_pass http://backend.$subdomain.example.com;
        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;
        proxy_set_header Connection "upgrade";
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Authorization $http_authorization;
    }
}

การตั้งค่านี้จะดึงซับโดเมนจากคำขอและ proxy คำขอไปยังเซิร์ฟเวอร์ backend ที่ตรงกัน (backend.<subdomain>.example.com) นอกจากนี้ยังมั่นใจว่าหัวข้อที่จำเป็นทั้งหมดจะถูกส่งต่ออย่างถูกต้อง.

ตอนนี้ เพียงแค่เปิดใช้งานการตั้งค่าและรีสตาร์ท Nginx:

sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

เย้! โดเมนและซับโดเมนทั้งหมดของคุณควรทำงานได้แล้วด้วย HTTPS และการ proxy แบบไดนามิก.

การจัดการกับ CORS (Cross-Origin Resource Sharing) ใน Nginx

CORS คืออะไร?

CORS คือสิ่งที่บล็อก frontend ของคุณจากการเรียก API ที่โฮสต์อยู่บนโดเมนอื่น ถ้า frontend ของคุณอยู่ที่ app.example.com และ API ของคุณอยู่ที่ api.example.com คุณจะต้องอนุญาตให้มีการร้องขอข้ามโดเมน.

การเปิดใช้งาน CORS ใน Nginx

เพื่อให้ API ของคุณรับคำขอจากโดเมนอื่น คุณต้องเพิ่ม headers ที่ถูกต้องใน Nginx.

อนุญาตทุกโดเมน (ไม่แนะนำเสมอไป)

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

    ssl_certificate /etc/nginx/ssl/api.example.com.crt;
    ssl_certificate_key /etc/nginx/ssl/api.example.com.key;

    location / {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type';

        if ($request_method = OPTIONS) {
            return 204;
        }
    }
}

นี่จะทำให้ใครก็ได้เข้าถึง API ของคุณ ซึ่งก็โอเคสำหรับ API สาธารณะ แต่มีความเสี่ยงสำหรับ API ส่วนตัว.

อนุญาตเฉพาะโดเมนที่เฉพาะเจาะจง

ต้องการจำกัดการเข้าถึงที่ app.example.com? ให้ทำแบบนี้แทน:

add_header 'Access-Control-Allow-Origin' 'https://app.example.com';

การจัดการคำขอ Preflight

เบราว์เซอร์บางครั้งส่งคำขอ OPTIONS ก่อนที่จะทำการเรียก API จริง ถ้าคุณไม่จัดการกับมัน ทุกอย่างจะพัง นี่คือวิธีการอนุญาตคำขอ preflight:

location / {
    if ($request_method = OPTIONS) {
        add_header 'Access-Control-Allow-Origin' 'https://app.example.com';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type';
        return 204;
    }
}

สรุป

การตั้งค่าโดเมน, ซับโดเมน, และ CORS ให้ถูกต้องใน Nginx ไม่ใช่เรื่องยากเมื่อคุณรู้ว่าต้องปรับอะไร ด้วยการตั้งค่าที่ถูกต้อง คุณสามารถหลีกเลี่ยงความยุ่งยากและทำให้แอปของคุณทำงานได้อย่างราบรื่น ขอให้สนุกกับการเขียนโค้ด!