Deploy a Static Website with Docker and Nginx

บทความนี้จะเป็นการใช้งาน Docker เบื้องต้น เหมาะสำหรับผู้เริ่มต้นใช้งาน Docker สามารถนำไปใช้สำหรับงานเล็กๆได้ เนื่องจากเป็นบทความแรก เลยขอเริ่มต้นกันแบบง่ายๆ ด้วยการนำ Static Website ไป Run บน Docker มาเริ่มกันเลย

1.Pull Image ของ Nginx ลงเครื่องกันก่อนเลย

$ docker pull nginx:alpine

2.หลังจากมี Image ในเครื่องแล้วลองทดสอบ Run ด้วย

$ docker run -d --name static-web -p 8080:80 nginx:alpine

-d Run container in background
-p Publish a container's port -p จากตัวอย่าง จะทำการ expose port 80 ใน container มาที่ port 8080 บน localhost
--name กำหนดชื่อให้ container

3.ลองดูว่าในเครื่องของเรานั้นมี Container อะไร Run อยู่บ้าง

$ docker container ls
CONTAINER ID   IMAGE          COMMAND                  CREATED          STATUS         PORTS                  NAMES
181930d29e68   nginx:alpine   "/docker-entrypoint.…"   10 seconds ago   Up 9 seconds   0.0.0.0:8080->80/tcp   static-web

จะเห็นได้ว่ามี Container ชื่อ static-web Run อยู่ สามารถไปที่ Browser ลองพิมพ์ localhost:8080 จะเห็บ Static Website แสดงแบบนี้ โดยจะแสดงหน้า Default ของ Nginx

4.เมื่อถ้าต้องการ Edit หน้านี้แบบง่ายๆ ลองเข้าไปที่ Container ใช้คำสั่งดังนี้

$ docker exec -it static-web sh
/ # vi usr/share/nginx/html/index.html

exec คือการเข้าไปใน container ที่กำลัง run อยู่

ลองแก้ข้อความให้เหลือแบบนี้

<!DOCTYPE html>
<html>
<head>
<title>Welcome!</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>

และลอง Reload ที่ Browser อีกครั้งก็จะเห็นข้อความที่เราแก้แบบนี้

อ้าว! แล้วถ้าไม่อยากเข้าไปแก้ HTML ใน Container แบบนี้ละทำยังไงละ

เราก็ใช้วิธีการ Bind mount a volume เข้าไปเลย โดยทำแบบนี้
โดยก่อนใช้วิธีนี้เราต้องมีไฟล์ index.html ในเครื่องของเราก่อน

$ ls
index.html

ls: list directory contents

และใช้คำสั่งนี้

$ docker run -d -v /$(pwd)/index.html:/usr/share/nginx/html/index.html -p:8080:80 —name static-web nginx:alpine

-v Bind mount a volume จากตัวอย่างจะทำการ Bind /$(pwd)/index.html เข้าไปที่ /usr/share/nginx/html/index.html ของ Container
$(pwd) คือ full path

หลังจาก Run เสร็จแล้วไปที่ Browser พิมพ์ localhost:8080 ก็จะเห็นเป็น Output ของ index.html ของเรา โดยตอนนี้เราสามารถแก้อะไรใน $(pwd)/index.html ที่อยู่ในเครื่องของเราก็ได้ หลังจากนั้นก็กด Reload ที่ Browser ก็จะเห็นความเปลี่ยนแปลงตามที่เราแก้ได้เลยทันที

ทั้งหมดนี้ก็เป็นวิธีง่ายๆ ในการนำ Static Website ไป Run บน Docker

Blog

Deploy a Static Website with Docker and Nginx

Pradist Keawborisut

Join Our Newsletter. No Spam, Only the good stuff.

Related