อยากมีเว็บไซต์เป็นของตัวเอง ต้องทำยังไง ? [ตอนที่ 3] ตอนสุดท้ายแล้ว มารัน Application กัน
เกริ่นนำในตอนที่ 2 เราได้สร้างเครื่อง Server และกำหนดให้ Doman ของเราถูกชี้มายังเครื่อง Server เป็นที่เรียบร้อย และในตอนสุดท้ายนี้ ผมมาแชร์วิธีกำหนดเครื่อง Server ให้สามารถรันแอพและเข้าถึงได้จาก Internet
ตอน… เว็บแอพพลิเคชั่น (web application) สร้างขึ้นแล้วรันไว้ยังไง กำหนดค่ายังไงบ้าง
ลุย !! ก่อนอื่นเรา Setup เครื่อง Server กันก่อน โดยผมจะรัน Nginx Proxy Manager ข้อดีคือ มี Web Application ให้เราสามารถกำหนดค่าต่างๆ ได้ง่ายมากขึ้น และที่สำคัญ ไอ้เจ้า Nginx Proxy Manager มีฟังก์ชันที่กำหนดให้เว็บเรามี Certificate (SSL Certificate) ได้แบบง่ายมาก โดยมี Certificate Free ให้เราใช้คือ Let’s Encrypt นั่นเอง ปล.ใจดีมากกกกกกกเค้าออก Certificate รับรองเว็บไซต์ให้เราฟรีๆ ปกติแล้วเราจะต้องไปซื้อใช้ แพงมาก!!!
เกริ่นถึง ขั้นตอนการ Setup Server มีดังนี้
- ลง Docker เพื่อใช้เป็น Engine ในการรัน Nginx Proxy Manager ของเรานั่นเอง
- สร้าง docker-compose ไฟล์ เพื่อ Config Nginx Proxy Manager และรันขึ้นมา
- Setup Nginx Proxy Manager ด้วย Web Application ของ Nginx Proxy Manager เอง
- รัน Web Application ของเรา และกำหนดค่า Nginx เพื่อชี้ไปยังแอพที่เรารันขึ้นมา
- ทดสอบผลลัพธ์ โดยการเข้า Domain Name ของเพื่อนๆ
++มาเริ่มทำแต่ละขั้นตอนกันนนน++
ลง Docker เพื่อใช้เป็น Engine ในการรัน Nginx Proxy Manager ของเรา
อันดับแรก กระโดดเข้าไปยังเครื่อง Server ของเราด้วยคำสั่ง SSH และใส่ Password ให้ถูกต้อง
ssh root@209.xxx.xxx.xxx
ติดตั้ง Docker วิธีการ ก็จิ้มลิ้งนี้ https://docs.docker.com/engine/install/ubuntu และทำตาม และผมก็จะพาทำตามไปด้วยเลยละกัน
-> Copy ไปวางได้เลย
# Add Docker's official GPG key:
sudo apt-get update
sudo apt-get install ca-certificates curl
sudo install -m 0755 -d /etc/apt/keyrings
sudo curl -fsSL https://download.docker.com/linux/ubuntu/gpg -o /etc/apt/keyrings/docker.asc
sudo chmod a+r /etc/apt/keyrings/docker.asc
# Add the repository to Apt sources:
echo \
"deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.asc] https://download.docker.com/linux/ubuntu \
$(. /etc/os-release && echo "$VERSION_CODENAME") stable" | \
sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
sudo apt-get updateรอไป….. ปล. อย่าลืม รัน sudo apt-get update ในลำดับท้ายสุดด้วย
เสร็จแล้วก็จะได้ผลลัพธ์ประมาณนี้ ทำต่อ Copy ด้านล่างไปรันอีกที
sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
พิมพ์ Y ไปและกด Enter เพื่อติดตั้ง Package …. รอต่อไป
ทำการทดสอบ โดยการรัน Application Hello → Copy ด้านล่างไปรัน
sudo docker run hello-world
เย้ ทำงานได้ ไปดูหัวข้อถัดไป
สร้าง docker-compose ไฟล์ เพื่อ Config Nginx Proxy Manager และรันขึ้นมา
เข้าไปยัง Website Nginx Proxy Manager เล้ยยยย ไปกันต่อ !!
จิ้ม https://nginxproxymanager.com/guide/
เลือกแบบ Quick Setup ไปแบบไวๆ หรือจิ้ม ที่นี่
Copy คำสั่งนี้ไป เพื่อสร้าง Folder nginx-proxy-manager และสร้างไฟล์ docker-compose.yml
เพื่อนๆ สามารถ Copy ทั้งหมดไปรันทีเดียวได้เลย หรือ รันทีละคำสั่ง คือ mkdir และตามด้วย echo กับที่เหลือพร้อมกัน
mkdir nginx-proxy-manager
echo 'version: "3.8"
services:
app:
image: "jc21/nginx-proxy-manager:latest"
restart: unless-stopped
ports:
- "80:80"
- "81:81"
- "443:443"
volumes:
- ./data:/data
- ./letsencrypt:/etc/letsencrypt' > nginx-proxy-manager/docker-compose.ymlรันเสร็จแล้ว เช็คดูว่ามี Folder nginx-proxy-manager และข้างในมีไฟล์ docker-compose.yml หรือเปล่า
ต่อไปเราจะทำการรันไฟล์ docker-compose.yml เพื่อรัน Nginx Proxy Manager ขึ้นมาค้าบบบบ
docker compose up -dอย่าลืมนะครับ คำสั่ง docker compose จะไม่มีขีด (-) ตรงกลางนะครับ
ทดสอบให้แน่ใจโดยการรัน
docker ps
ทดสอบจากการเข้าที่ Web Browser หน่อยเพื่อนๆ ว่าทำงานได้ละยางเอ๋ยย http://[ชื่อโดเมนของเพื่อนๆ] ย้ำว่า http ไม่ใช่ https
ตัวอย่างของผม -> http://9zax.me/
เย้ๆ เพื่อนๆ ได้เดินทางมาด้วยกันกับผมได้ 95% แล้ว เหลืออีก 5% เท่านั้น
Setup Nginx Proxy Manager ด้วย Web Application
เพื่อนๆลอง เข้าไปยังหน้าเว็บที่รันขึ้นโดย เข้าที่ Web Browser -> http://209.xxx.xxx.xxx:81 ย้ำว่า Port 81 โดยเลข Ip Address ให้ใส่เป็น Public Ip Address ของเพื่อนๆ นะครับ
ตัวอย่าง http://232.123.212.1:81
ปล. Port 81 เค้าเอาไว้รันหน้าเว็บ กับ Service ไว้ควบคุม Config ไฟล์ หรือค่าต่างๆและส่วน Port 80 เค้าใช้รัน Nginxที่อ่านค่า Config ที่เกิดจากการกำหนดค่าบน Web Application ที่รันอยู่บน Port 81 ครับ
Default: Email, Password คือ
Email: admin@example.com
Password: changemeใส่แล้วกด Sign in ให้เรียบร้อย ระบบจะให้กรอก ข้อมูลใหม่เข้าไป โดย Email เราใส่เป็นอะไรก็ได้ ไม่ต้องเป็น Email ที่มีอยู่จริงก็ได้ ขอให้ถูก Pattern Email ครับ
ใส่รหัสผ่านเดิม (changeme) และตั้งรหัสผ่านใหม่ที่เพื่อนๆ จะใช้เข้าระบบรอบต่อไปครับ แล้วกด Save
กดไปที่แถบ Hosts -> Proxy Hosts เพื่อที่เราจะเพิ่ม Domain Name ของเราเข้าไปครับ เพื่อให้ Nginx รู้จัก
Add Proxy Host
ใส่ตามนี้เลยครับ โดย
Domain Name ใส่เป็น https://[โดเมนเนมของเพื่อนๆ]
Forward Hostname / IP ใส่เป็น Public Ip Addres ของเครื่อง Server ของเพื่อนๆ ซึ่งของผมก็ 209.xxx.xxx.xxx
อย่าพึ่งกด Save ไปแถบที่ 2 -> Custom locations เพื่อจะระบุ path ที่ต่อหลังจาก Domain name เพื่อจะระบุว่าให้ส่งต่อไปยัง Application ไหนบ้างในเครื่อง ทำให้เห็นภาพขึ้น คือ
https://9zax.me/ -> localhost:9000 (ซึ่ง localhost Port 9000) ได้รันหน้าเว็บไซต์ไว้อยู่บนเครื่อง Server หรือเข้าจาก 209.xxx.xxx.xxx:9000 ก็จะเจอเช่นเดียวกัน
https://9zax.me/apis -> localhost:3000 (และ localhost Port 3000) ได้รัน Api (Service) ไว้อยู่
ถ้าเพื่อนๆ สงสัย ก็ถูกแล้วแหละครับ ผมยังไม่ได้พาเพื่อนๆ รัน Web Application หรือ Service ไหนไว้เลยครับ บนเครื่อง Server ของเรา ยกเว้น Nginx Proxy Mananger 55+++
รัน Web Application ของเรา และกำหนดค่า Nginx เพื่อชี้ไปยังแอพที่เรารันขึ้นมา
สร้าง docker-compose.yml ที่เอาไว้รัน Web Application เราย้อนกลับไป Step นึง
โดย cd .. Enter
แล้วเราสร้าง Folder Web Application ของเรากัน
mkdir my-web-application
cd my-web-applicationคำสั่ง สร้าง folder my-web-application
echo 'version: "3.8"
services:
webapp:
image: nginx:latest
restart: unless-stopped
volumes:
- ./webapp:/usr/share/nginx/html:ro
ports:
- "8080:80"' > docker-compose.ymlคำสั่ง สร้างไฟล์ docker-compose.yml ที่มี config เพื่อที่เราจะรันไฟล์ index.html ที่เรากำลังจะสร้างขึ้น เพื่อแสดงผลในหน้าหลักของเว็บไซต์เพื่อนๆ
โดยเราจะสร้าง Folder อีกอันนึงที่อยุ่ข้างกันกับไฟล์ docker-compose.yml ซึ่งมีชื่อว่า webapp ตาม config ภายใน docker-compose.yml ที่เขียนไว้
mkdir webapp
เข้าไปใน Folder webapp และสร้างไฟล์ที่ชื่อว่า index.html ที่มีข้อมูลหน้าเว็บเรา ที่เขียนด้วยภาษา HTML ครับ เสร็จแล้ว เช็คดูว่ามีข้อมูลและ content ข้างในไฟล์ index.html ไหม
รันคำสั่ง cat index.html เพื่อดูเนื้อหาข้างในครับ
ถ้าทุกคนพร้อมแล้ว ผมก็พร้อมเหมือนกันครับ
เรากระโดนย้อนหลังไป 1 Step ให้ไปอยู่ที่ folder my-web-application รัน “cd ..” และ รัน “pwd” เพื่อดู location path ว่าเราอยู่ตำแหน่งไหนครับ
cd ..
pwd
เราจะอยู่ตำแหน่งเดียวกันกับ docker-compose.yml แล้วนะครับ ดูข้อมูลภายในไฟล์ cat docker-compose.yml จะเจอว่าแอพของเรานั้นรันด้วย Nginx อีกทีนึง อยู่ที่ Port 80 และถูก Export ออกมายังเครื่อง Server คือ Port 8080 อีกทีครับ
พร้อมกันยัง 5 4 3 2 1 1 1 1 1 1 …..
docker compose up -dรันเลย ตู้ม!! รอแป๊ปๆ ถ้าเสร็จแล้วลองรัน docker ps เพื่อดูรายการ container ที่รันอยู่
docker ps
ใช้ได้จริงไหม เข้าดูจาก Web Browser เล้ยยยย!!!
แต่ไม่อยากเข้าผ่าน Public Ip Address อะครับ มันไม่เท่ห์
ไปกันต่อ เราจะชี้ Domain Name ของเรา ไปยัง Web ของเรา ที่รันอยู่บน Port 8080. กันครับ
ไปเปิด Nginx Proxy Manager หน้าเว็บขึ้นมาครับ
เมื่อตะกี้เราได้ ตั้งค่าตามนี้ไปแล้ว Check List #1 -> Check List #2 ถ้าใครหายไปก็ทำมาใหม่ ให้อยู่จุดนี้นะครับ ดูจากภาพ Check List #2
แล้วเราจะเพิ่ม Path และ Forward Hostname / IP เพื่อชี้ไปยัง Web ที่เรารันอยู่บน Port 8080 เมื่อตะกี้นี้
Path -> /
Forward Hostname / IP -> 209.xxx.xxx.xxx ( Public Ip Address ของเพื่อนๆ)
Port -> 8080 ( Port local ของ Web ที่เรารันอยู่)
กด Save แรงๆ เสร็จสักที ลองเข้าซิ
http://9zax.me ( domain ของเพื่อน ๆ เป็นอะไร เข้าไปเลย )
!!!! ทำไม เจอหน้านี้
ถูกแล้วแหละ เพราะเราไม่ได้จะทำให้ Web ของเราเข้าด้วย http (Port 80) แต่เราจะเข้าด้วย https:// (Port 443)
ต่อผมจะใช้ฟีเจอร์ของ Nginx Proxy Manager มาทำให้เว็บของเพื่อนๆ ปลอดภัยขึ้น (Secure) ด้วย https ซึ่งออก Certificate ให้โดย Let’s Encrypt นั่นเอง ไปดูกันว่า ทำไง
ปล. http:// ไม่ปลอดภัย ส่วน https:// ปลอดภัยจ้าาา
กด Edit เราจะแก้ไข และทำให้ domain เรา เข้าด้วย https:// กันนนน!!
ไปที่แถบ SSL -> กด Request new SSL Certificate -> Check Force SSL -> I Agree -> กด Save แรงๆ
รอ.. ระหว่างนี้ Service เบื้องหลังของ Nginx Proxy Manager จะทำการขอ Certificate ที่ Let’s Encrypt และทำโจทย์ที่ได้มา เพื่อยืนยันว่าเราคือเจ้าของ domain และ Server ครับ
ส่วนใครที่กดแล้ว Error ก็รอสักพักนะครับ แล้วเข้ามาทำใหม่ บางที Let’s Encrypt อาจยังไม่รู้จัก Domain Name ของเรา
ส่วนใครที่ได้ จะได้แบบนี้ นี่ อวดๆ !!
SSL ที่ออกโดย Let’s Encrypt นอกจากนี้เรายังสามารถนำ SSL ที่เราซื้อมาใช้ได้ด้วยนะ
ทดสอบผลลัพธ์ โดยการเข้า Domain Name ของเพื่อนๆ
รอบนี้ ลองเข้าด้วย https:// ซิ
*** ปรบมืออออ 🥳 🥳 🥳 ปรบมือให้กับความพยายามของตัวเอง ที่อดทนมาจนถึงผลลัพธ์อันสวยงามนี้ ยอดเยี่ยมครับทุกคน !! ***
หากใครมีข้อสงสัย ก็ติดต่อผมมาได้เลยนะครับ Email มาสอบถามพูดคุยกันได้ครับ
email: nakarin.w@odds.team, nakarin.weerasak@gmail.com
ท้ายที่สุดนี้ ผมก็อยากจะบอกทุกคนว่า เนื้อหาที่ผมเขียนขึ้นในบทความนี้ เป็นเพียงประสบการณ์ส่วนตัวของผมเองล้วนๆ ที่ได้จากการศึกษามา อาจจะถูกบ้าง ผิดบ้างผมก็ขอโทษเพื่อนๆ ทุกคนด้วยนะครับ หวังว่าจะไม่ว่ากันน้าาา
Zzz ฝันดีครับทุกคน ไว้เจอกันในบทความถัดไปครับ 🍻 🍻 🍻
