การ Deploy เว็บไซต์บน VPS ของวิราไบต์ – Nginx

หาก VPS ของคุณได้รับการติดตั้ง Web Server เป็น Nginx ให้ทำตามคู่มือนี้ได้เลย

ต้องดำเนินการเพิ่ม Domain ที่ Wirabyte Server Console ก่อน [คู่มือคลิก]

Path ที่ควรทราบ

CentOS 7 / Stream 8 / Stream 9

Path	รายละเอียด
/var/www/	เก็บระบบเว็บไซต์ แนะนำให้แยก Folder แต่ละโดเมน
/etc/nginx/	เก็บไฟล์การตั้งค่า Nginx ซึ่งจะอยู่ใน Folder conf.d

Ubuntu

Path	รายละเอียด
/var/www/	เก็บระบบเว็บไซต์ แนะนำให้แยก Folder แต่ละโดเมน
/etc/nginx/	เก็บไฟล์การตั้งค่า Nginx ซึ่งจะอยู่ใน Folder sites-enabled

ติดตั้งระบบเว็บไซต์

ก่อนอื่นให้นำไฟล์ระบบเว็บทั้งหมดมาติดตั้งก่อน

1. เข้า FTP แล้วสร้าง Folder ที่ชื่อเดียวกับโดเมนขึ้นมา (เพื่อง่ายต่อการจดจำ , กรณี SFTP ให้ดูที่อยู่ Path จากตารางด้านบน)

2. โอนไฟล์ระบบเว็บไซต์ไปยัง Server ให้เรียบร้อย

**สามารถดาวน์โหลดไฟล์บน Server โดยตรงก็ได้เช่นกัน (เช่น SFTP แล้วใช้ wget / git pull ที่ server)

การตั้งค่าโดเมน

Traffic Flow ของระบบ VPS วิราไบต์

การกำหนด Config Nginx เพื่อให้สามารถใช้งานเว็บไซต์ได้

ใน VPS โดยปกติทางเราจะติดตั้ง Webmin ซึ่งจะเป็น Tool สำหรับจัดการ Server ผ่าน Web GUI ซึ่งเหมาะสำหรับคนที่ไม่ถนัด CLI โดยในคู่มือนี้จะเป็นการแนะนำผ่านการใช้ Webmin

1. ทำการเข้า Webmin โดย URL จะอยู่ใน Email หรือจะเข้าผ่านระบบ Wirabyte Server Console ก็ได้เช่นกัน

2. เมื่อเข้ามาแล้วให้เข้าสู่ระบบ แล้วไปที่เมนู Servers > NginX webserver

3. คลิกที่ Create Virtual Host

4. ตั้งค่าโดยใช้ Nginx Server Block Configuration

Server Name: <domain/subdomain>.conf (เช่น www.wirabyte.com.conf , wirabyte.com.conf)
Config: ตั้งค่า Server Block โดยสามารถดูคำแนะนำจากวิธีการ Deploy ด้านล่างนี้

Block สำหรับเริ่มต้น

server {
    listen 80;
    root /var/www/<dir>;
    index index.html index.htm;

    server_name <domain/subdomain>;

    ...
}

- Deploy Static HTML

Deploy HTML ปกติที่มี CSS และ Javascript เพียว ๆ

server {
    listen 80;
    root /var/www/<dir>;
    index index.html index.htm;

    server_name <domain/subdomain>;

    location / {
        try_files $uri $uri/ =404;
    }
}

- Deploy PHP (remi)

คู่มือนี้สำหรับใช้งานกับ PHP remi เท่านั้น ซึ่งทางเราจะติดตั้งให้ตั้งแต่ส่งมอบ VPS (กรุณาตรวจสอบ Email หากรายละเอียดของเครื่องหากมี PHP หลาย Version = remi)

การกำหนด Version PHP ที่จะใช้กับ Site ให้กำหนดที่บรรทัด fastcgi_pass ซึ่งจะใช้งานได้เฉพาะ Version ที่มีการติดตั้งเท่านั้น กรุณาตรวจสอบใน Email หรือติดตั้งเพิ่มเติมด้วยตัวเอง

CentOS 7 / Stream 8 / Stream 9

PHP Version	Unix Socket
5.6	unix:/var/opt/remi/php56/run/php-fpm/www.sock
7.0	unix:/var/opt/remi/php70/run/php-fpm/www.sock
7.1	unix:/var/opt/remi/php71/run/php-fpm/www.sock
7.2	unix:/var/opt/remi/php72/run/php-fpm/www.sock
7.3	unix:/var/opt/remi/php73/run/php-fpm/www.sock
7.4	unix:/var/opt/remi/php74/run/php-fpm/www.sock
8.0	unix:/var/opt/remi/php80/run/php-fpm/www.sock
8.1	unix:/var/opt/remi/php81/run/php-fpm/www.sock
8.2	unix:/var/opt/remi/php82/run/php-fpm/www.sock
8.3	unix:/var/opt/remi/php83/run/php-fpm/www.sock
8.4	unix:/var/opt/remi/php84/run/php-fpm/www.sock

server {
    listen 80;
    root /var/www/<dir>;
    index index.php index.html index.htm;

    server_name <domain/subdomain>;

    location / {
        try_files $uri $uri/ /index.php?$args;
    }

    location ~ \.php$ {
        try_files $uri =404;
        fastcgi_pass unix:/var/opt/remi/php74/run/php-fpm/www.sock;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }
}

- Deploy Single Page Application (SPA)

เช่น Angular React Vue ที่ทำงานผ่านไฟล์ index.html

server {
    listen 80;
    root /var/www/<dir>;
    index index.html index.htm;

    server_name <domain/subdomain>;

    location / {
        try_files $uri$args $uri$args/ /index.html;
    }
}

- Deploy ผ่าน Reverse Proxy

เช่น Node Python NextJS Docker ที่ต้องใช้ Reverse Proxy

ตัวอย่างคือส่ง traffic ต่อไปยัง http://localhost:3000/api/ โดยตัวแปรต่าง ๆ สามารถปรับค่าตามความเหมาะสมได้

server {
    listen 80;
    root /var/www/<dir>;
    index index.html index.htm;

    server_name <domain/subdomain>;

    location /api/ {
        client_body_temp_path /tmp/;
        client_body_buffer_size 128K;
        client_max_body_size 4096M;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $http_host;
        proxy_pass http://localhost:3000/api/;
        proxy_redirect off;
        proxy_connect_timeout 60s;
        proxy_read_timeout 5400s;
        proxy_send_timeout 5400s;
    }
}

5. เมื่อตั้งค่าเรียบร้อยแล้วคลิกที่ Save

**สำหรับ CentOS จะขึ้น Error: Symlink couldn’t be created. แต่ไม่มีปัญหาให้คลิกที่ Return to previous page แล้วไปที่ Existing Virtual Hosts จากนั้น Refresh 1 ครั้ง

6. หาก Domain แสดงขึ้นมาแล้วให้คลิก Apply Changes

7. หากไม่มีแจ้งเตือนผิดพลาด ให้ทดลองเข้าเว็บไซต์ได้เลย