DEV Community

loading...

Deploy a Static Website with Docker and Nginx

pradist profile image Pradist Keawborisut ・1 min read

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

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

$ docker pull nginx:alpine
Enter fullscreen mode Exit fullscreen mode

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

$ docker run -d --name static-web -p 8080:80 nginx:alpine
Enter fullscreen mode Exit fullscreen mode

-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
Enter fullscreen mode Exit fullscreen mode

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<title>Welcome!</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

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

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

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

$ ls
index.html
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

-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

Discussion (1)

pic
Editor guide
Collapse
rdamrong profile image
Damrongsak Reetanon

เป็นกำลังใจให้ เขียนเรื่องต่อไปครับ