ฝึกใช้งาน WSL 2, Docker Desktop, VS Code Remote — WSL Extension

ในบทความที่แล้ว เราได้ทำการ Update Windows 10, ติดตั้ง WSL 2 และ Docker Desktop กันแล้วน่ะครับ ในบทความนี้เราเลยจะมาลงรายละเอียดการติดตั้ง Software เพิ่มเติมเพื่อให้ Windows ของเราทำงานกับ Linux และ Docker ได้อย่างมีประสิทธิภาพมากขึ้นน่ะครับ

[บันทึก]การติดตั้ง WSL 2, Docker Desktop บน Windows 10 Home

ก่อนที่จะเริ่มติดตั้ง Ubuntu เรามาทบทวนเรียนรู้ประวัติศาสตร์ของ Unix, Linux รวมไปถึงรายละเอียดของระบบปฎิบัติการในการเชื่อมต่อ Hardware และ Software กันก่อนน่ะครับ เพื่อให้เราเข้าใจคำศัพท์ที่เกี่ยวข้องเช่น Linux Kernel, Linux Distribution

ติดตั้ง Linux Distribution

ใน Microsoft Store เตรียม Linux Distribution ไว้แบบพร้อมติดตั้งให้เราตามนี้น่ะครับ

• Ubuntu 16.04 LTS
• Ubuntu 18.04 LTS
• Ubuntu 20.04 LTS
• openSUSE Leap 15.1
• SUSE Linux Enterprise Server 12 SP5
• SUSE Linux Enterprise Server 15 SP1
• Kali Linux
• Debian GNU/Linux
• Fedora Remix for WSL
• Pengwin
• Pengwin Enterprise
• Alpine WSL

ซึ่งในบทความนี้ผมจะเลือกติดตั้ง Ubuntu 18.04 LTS นะครับ โดยมีขั้นตอนดังนี้

• ติดตั้ง Ubuntu 18.04 LTS ผ่าน Microsoft Store

• เสร็จแล้วเราสามารถเข้าใช้งาน Ubuntu ของเราได้จาก Start Menu เลยน่ะครับ โดยครั้งแรกที่เข้าไปเราจะต้องสร้าง User และ Password ก่อนน่ะครับ

กรอกชื่อ User, Password ก็เรียบร้อยครับง่ายมากเลย

• ดูรายชื่อ Linux Distributions ที่อยู่ในเครื่องของเราทั้งหมดได้ด้วย การเปิด Windows Terminal และรันคำสั่ง

wsl -l -v

Ubuntu 18.04 ที่เราพึ่งติดตั้งมาแล้วครับ ส่วนอีก 2 Linux Distributions มาจากตอนที่เราติดตั้ง Docker Desktop จากบทความที่แล้ว

• นอกจากที่เราจะใช้งาน WSL ผ่าน Application ใน Start Menu แล้วเรายังสามารถใช้งานได้ผ่าน Windows Terminal เลยด้วยครับเทพมาก ถ้าเรามีหลาย Linux Distribution ในเครื่องเราก็แค่เปิดหลายๆ Tab ก็พอ

• ทดลองตรวจสอบการทำงานของ WSL ผ่าน Windows Tereminal ด้วยคำสั่งข้างล่างนี้น่ะครับ

htop

วิธีการจัดการ Linux Files บน Windows

#1: ตำแหน่งของ Program ที่ติดตั้ง

ถ้าเราต้องการตรวจสอบขนาดของ WSL Image เราสามารดูได้ที่ Path นี้น่ะครับ

C:\Users\<username>\AppData\Local\Packages\<wsl>\LocalState

Image ของเราค้าบ

#2: วิธีการเข้าถึง Linux File จาก Windows

วิธีแรกให้เราเข้าถึงด้วย Path \\wsl$ บน Window File Explorer

\\wsl$

จากตัวอย่างเรามี 3 Linux Distributions เราจึงเห็น 3 Folders ครับ และผมได้ทำการเปรียบเทียบให้เห็น Linux Files ใน Windows File Explorer เทียบกับ Windows Terminal ครับ

วิธีที่สองให้เราเข้าผ่าน WSL เลยครับ โดยให้เราเข้า Windows Terminal, เลือก Linux Distribution และรันคำสั่งข้างล่างนี้

explorer.exe .

#3: วิธีการเข้าถึง Windows File จาก Linux

WSL ช่วยให้เราสามารถเข้าถึง Windows Disks ได้ภายใน Linux ครับ

• โดยปรกติแล้ว Windows Drive C: จะถูก mounted ที่ Linux Path/mnt/c
  ซึ่ง Files ที่เราเห็นใน /mnt/c ก็คือ Files เดียวกันกับใน Drive C: นั้นเองครับ
• ถ้าเรามีมากกว่า 1 disk, เช่นในตัวอย่างของผมมี Drive D: จะถูก mounted ที่ Linux Path /mnt/d

ใช้งาน Docker Desktop ร่วมกันกับ WSL

ในบทความที่แล้วเราได้ทดลองรันคำสั่ง Docker ผ่าน PowerShell ซึ่งทำงานได้ตามปรกติน่ะครับ

ทีนี้เราลองเปลี่ยนมารัน Docker บน WSL กันบ้างครับ เริ่มโดยการเปิด Windows Terminal และเลือก Ubuntu ของเราก่อน เสร็จแล้วลองรัน Docker เพื่อตรวจสอบ Version ที่ลง

docker --version
docker-compose --version

ผลที่ได้คือรันไม่ผ่านน่ะครับ เพราะว่าเรายังไม่ได้ติดตั้ง Docker ไปยัง WSL

วิธีติดตั้ง Docker Desktop ลง WSL

• เปิด Docker Desktop > Setting > Resources > Enable WSL Distros ที่ต้องการ

• ปิด Windows Terminal แล้วเข้า WSL และรันคำสั่ง Docker อีกครั้ง รอบนี้จะใช้งานได้แล้วครับ มาทั้ง Docker, Docker Compose เลย ถ้าเราต้องการติดตั้ง Docker ลงยัง WSL อื่นๆในภายหลังก็ทำผ่าน Docker Desktop ได้แบบนี้เลยครับ รวดเร็ว สะดวกสบายมากๆๆๆ

Best Practice ในการ Mount File สำหรับ Docker

Microsoft และ Docker แนะนำให้ใช้การ Mount Linux File แทน Windows File น่ะครับ เพราะจะได้ประสิทธิภาพที่รวดเร็วกว่ากันมาก

ตัวอย่าง Linux File System (แนะนำเพราะได้ Performance ที่ดีกว่า)

docker run -v ~/my-project:/sources <...>

ตัวอย่าง Windows File System (ไม่แนะนำ)

docker run -v /mnt/c/Users/Simon/windows-project:/sources <...>

/mnt/c คือ Mountpoint ไปยัง Windows Files (Drive C)

รายละเอียดเพิ่มเติมน่ะครับ

Docker Desktop: WSL 2 Best practices - Docker Blog

An overview on the the Windows Subsystem for Linux

Docker Volumes

เราจะมาทดลองใช้งาน Docker Compose และทำการ Share Files ระหว่าง WSL และ Docker Container กันน่ะครับ ซึ่งถ้าเราไม่ทำการ Copy Files เหล่านี้ออกมาที่ WSL แล้วเก็บไว้แค่ใน Docker Container เมื่อเราปิด Container ไป Uploaded File ก็จะหายไปด้วยครับ เพราะงั้นเราจึงทำการ ใช้ Docker Volume สำหรับการเก็บ Upload Files

ตัวอย่างใน Lab นี้จะเป็นการรัน Website ที่พัฒนาด้วย Node.js ซึ่ง User สามารถที่จะ Upload File ได้

ขอบคุณภาพจาก GitHub ของอาจารย์ Issaret Prachitmutita

• ขั้นตอนแรกให้ Clone Source Code มาก่อนที่

Ima8/node-express-multer-image-upload

git clone https://github.com/Ima8/node-express-multer-image-upload.git
cd node-express-multer-image-upload

• ก่อนที่จะเริ่มเขียน Dockerfile เราต้องเข้าไปศึกษาก่อนว่า Project ที่เรากำลังทำอยู่นั้นมีการ Map Port, Volume ที่ไหนบ้าง ในตัวอย่างนี้คือให้ดูที่ Readme ของ Repository และ Source Code (app.js) เลยครับ เราจะพบว่า Project นี้ใช้ Port 3333 และมี Docker Path ในการเก็บ Uploaded Files ที่ Path ./uploads

• สร้าง Dockerfile ด้วย Command ดังนี้

• Build Docker Image

docker build -t ponggun/nodeupload .

• Run Docker Image

docker run \
-p 3333:3333 \
-v /home/ponggun/node-express-multer-image-upload/uploads:/app/uploads \
ponggun/nodeupload
# ทำการ Mount จาก External path
#   /home/ponggun/node-express-multer-image-upload/uploads
#ไปที่ Docker Path
#   /app/uploads

• ดูผลลัพธ์จะพบว่า เมื่อเรา Upload Files จากหน้า Web แล้ว Host System จะได้ Uploaded File นั้นมาเก็บไว้ด้วยครับ

ขอบคุณภาพจาก kaihuaror.com

ติดตั้งและใช้งาน VS Code Remote — WSL Extension

Remote — WSL Extension ช่วยให้เราเรียกใช้ Command ต่างๆบน WSL ได้ผ่าน VS Code บน Windows ของเรา รวมไปถึงการแก้ไข Files ต่างๆบน WSL ได้ด้วยเช่นกัน

ขั้นตอนการใช้งาน

• เปิด VS Code และติดตั้ง Remote — WSL Extension

Remote - WSL - Visual Studio Marketplace

• เข้าถึง WSL ผ่าน Windows Terminal
• ไปที่ตำแหน่งของ Project ที่เราทำงานอยู่แล้วรันคำสั่งข้างล่างนี้เพื่อเปิดใช้ VS Code Remote — WSl Extension

# เข้าถึงตำแหน่งของ Project ที่เราทำงานอยู่
cd /home/ponggun/node-express-multer-image-upload
code .

ครั้งแรกที่รันคำสั่ง code . นั้นจะใช้เวลาสักพักนึงเพื่อติดตั้ง VS Code Server ลง WSL น่ะครับ

• เราจะพบว่า VS Code เปิดขึ้นมาพร้อมกับการเข้าถึง Files บน WSL แล้วครับ !

• จากตัวอย่างที่แล้วเราสร้าง file บน WSL ด้วยคำสั่ง nano ครับ แต่ในตัวอย่างนี้เราจะเปลี่ยนวิธีเป็นการสร้าง file สร้าง docker-compose.yml และใส่ Command ข้างล่างนี้ผ่าน VS Code บน Windows ของเราเลยครับ

• รัน Docker Compose ผ่าน Terminal บน VS Code เลยครับ

docker-compose up

• ผลลัพธ์ที่ได้ครับ

ศึกษารายละเอียดเพิ่มเติมได้ที่นี้น่ะครับ

Developing in the Windows Subsystem for Linux with Visual Studio Code

แถม Video แนะนำ WSL 2, Docker Desktop และ VS Code WSL Extension ครับ

Linux Command

List files: $ ls -lh
- l to get more detail of d (directory), 
- (-) file, (l) soft link and permissions, h to get KB, MB, GB
Access directoty: $ cd <dirname>
- Linux is case sensitive !!!
Where am I?: $ pwd
Check disk space: $ df -h
Create directory: $ mkdir -p <dirname or dir path>
Create file: $ touch <filename>
Remove file / dir: $ rm -vrf
Copy files: $ cp -r <source> <destination>
Move files: $ mv -vf <source> <destination>
Rename: $ mv <source> <new name>
Edit file: $ nano <file>
View file content: $ cat <file>
Create/edit file content: $ cat > <file>
Pipe file: $ <first command> | <second command>
- output of st is the input of 2nd
Soft Link: $ ln -s blah2 blah2-soft
Hard Link: $ ln blah1 blah1-hard
Find manual: $ man <command>
Change permission: $ chmod <permission code> <file>
Change owner: $ chown <user> <folder>
ตัวอย่างใช้รวมกัน:
- $ sudo chown -R apache:apache /var/www/html/ # make apache owner of the html folder
- $ sudo /usr/sbin/usermod -a -G apache bob # add bob to apache group, to be able to create and edit files
- $ sudo chmod -R 775 /var/www/ # set 775 permissions to /var/www recursively
Get login info: $ id
Allow user to run superuser command:
   - sudo อ่านจับใจความแบบชาวบ้านได้ว่า เป็นการสื่อให้รู้ว่าคำสั่งที่ต่อท้าย sudo จะกระทำในสิทธิของ superuser หรือผู้ใช้สูงสุด  ที่อ้างอิงอยู่ในไฟล์ /etc/sudoers
   - $ sudo su # execute all commands as root

Docker Cheat Sheet

Docker Cheat Sheet

จัดการ Docker Images

docker images #View docker images
docker image ls #View docker images
docker build -t {name}:{tag} . #Build image
docker image rm {docker image name/ image id} #remove image
docker run -p {server port}:{docker port} -d {image name}:{image tag} #Run image

จัดการ Docker Container

docker ps #List running containers
docker ps -a #List all containers
docker start {docker container id} #start container
docker stop {docker container id} #stop container
docker rm {docker container id} #remove container
docker container rm -f $(docker ps -aq) #remove all container

จัดการ Docker Compose

docker-compose start #start docker compose
docker-compose stop #stop docker compose
docker-compose pause #pause running containers
docker-compose unpause #unpause running containers
docker-compose ps #List containers
docker-compose up 
#Builds,creates,starts,attaches to containers
docker-compose down 
#Stops containers and removes containers, networks, volumes, and images created by up

สรุป

ในบทความนี้เราได้เรียนรู้ประโยชน์ในการทำงานเพิ่มเติมจาก WSL, Docker Desktop, VS Code ซึ่งช่วยให้การเตรียม Environment ของเราบน Windows เป็นเรื่องที่สะดวกมากขึ้นเยอะเลยครับ

• วิธีการติดตั้ง Ubuntu 18.04 บน WSL
• การจัดการ Linux Files บน Windows
• ปรับแต่งให้ WSL ให้ใช้ร่วมกันกับ Docker Desktop ด้วย Lab Docker Volume
• ใช้งานร่วมกับ VS Code WSL Extension ด้วย Lab Docker Compose

ขอบคุณผู้อ่านทุกๆท่านครับ

นายป้องกัน