ผมเป็นผู้ใช้ Windows ตั้งแต่จำได้ ได้เล่น Linux บ้าง แต่คงอยู่กับ Windows เพราะรู้สึก น้อยกว่า Neckbeardy สำหรับผม ทั้งคู่มี Pros และ Cons แตข้อเสียใหญ่ของ Windows ตอนเริ่มเรียน Web Development คือ ขาด Command Line Tools ของ Linux ทั้งหมด
จนกว่า Windows Subsystem Linux (WSL) จะมา ?
ผมชอบมัน! คุณได้ Bash Shell ใน Windows รัน Node.js Apps ทั้งหมดผ่านมัน และ Windows 10 Fall Creators Update ทำให้ WSL ตั้งค่าง่ายมาก
Backstory สั้นๆ ทำไมถึงโพสต์นี้ ผม Nuke ลา็ปทอปเมื่อวาน เพราะปัญหา Bash on Windows เกี่ยวกับการใช้ nvm กับ WSL ผม沮丧กับ Performance ของเครื่อง แต่ตระหนักตอนนี้ว่า Overreact
หลังนำเครื่องกลับมาทำงานใหม่ ต้องตั้งค่า Development Environment ใหม่จากศูนย์ โชคดีที่ผมเก็บ Settings และ Config ทั้งหมดใน GitHub Repo เผื่อได้เครื่องใหม่ หรือ Recover จากเหตุการณ์วินาศกรรม (Nukee Computer)
ในบทความนี้ ผมอยากแสดง วิธีที่ผมตั้งค่า WSL สำหรับ Development Environment
นี่คือมุมมองที่มีอคติ (Opinionated) ของ Setup และ Usage WSL ของผม และคู่มือขั้นตอนต่อขั้นตอน สำหรับครั้งหน้าที่ต้อง Spin Up Dev Environment จากศูนย์บน Windows
หลังติดตั้ง WSL จาก Microsoft Store และเพิ่ม Default User อย่างแรกคือ Update และ Upgrade ทุกอย่าง
sudo apt updatesudo apt -y upgradeถ้ายังไม่เคยใช้ Linux Distributions -y ใน Upgrade Statement คือ Default คำตอบ "Yes" สำหรับ Prompts ที่แสดงใน Terminal อาจไม่อยากทำ เพราะอาจมีโปรแกรมบางอย่างไม่อยาก Update แตผมทำ
เพิ่ม Flag -y คุณจะไม่เจอข้อความเหล่านี้ ?
Build Tools
เพื่อ Compile และ Install Native Add-ons จาก npm อาจต้องติดตั้ง Build Tools ผมต้องการสำหรับ Gatsby Images ที่ใช้ sharp ซึ่งใช้ node-gyp:
sudo apt install -y build-essentialติดตั้ง Node
ติดตั้ง Node.js ตามคำแนะนำ nodejs.org ไม่ตั้งค่า Permissions ถูกต้องสำหรับผม ตอน npm install อะไรก็ตาม ได้ Errors พบว่าใช้ n ช่วย:
ติดตั้ง Node ด้วย n
เพราะ Fresh Install จึงไปต่อ n-install:
curl -L https://git.io/n-install | bashจะติดตั้ง Node เวอร์ชัน Stable ล่าสุด ?
Script เสร็จ Restart Bash ด้วย:
. /home/my_user_name/.bashrc # แสดงให้ Copy Pasteเช็ค Node และ NPM Versions:
node -v && npm -vติดตั้ง Fish ?
Fish ตอนนี้เป็น Shell หลักของผม เพราะ Auto-complete/Intellisense ? มี Themes สวยๆ ด้วย
sudo apt -y install fishsudo apt -y upgrade && sudo apt -y autoremoveติดตั้ง Oh My Fish | OMF
Oh My Fish เหมือน Package Manager สำหรับ Fish ให้ติดตั้ง Packages และ Themes
curl -L https://get.oh-my.fish | fishติดตั้ง OMF Theme
omf install clearanceจุดเริ่มต้นของการเริ่มต้น
Ok นี่คือ Basic Setup สำหรับ WSL คุณน่าจะอยากตั้ง Git ตอนนี้ ผมใช้ SSH แทน HTTPS บน WSL มาพักใหญ่
หมายเหตุ: ตอนเขียน WSL Git Integration กับ VSCode ไม่ทำงาน ผมเพิ่ม Git Install บน Windows Machine คุณสามารถข้ามไป ทำ Git ผ่าน Terminal ทั้งหมด แต่ผมชอบ VSCode Git Integration จริงๆ
ตั้ง SSH บนเครื่อง ดูที่ SSH Setup นี้ สะดวก ผมเลือก SSH แทน HTTPS เพราะมีปัญหา Git Credential Manager และ Keyring Manager สุดท้าย สร้าง SSH Key และ Authenticate กับ GitHub เร็วกว่า Guide ที่ลิงก์เดินทางคุณผ่าน
ย้าย Dotfiles
ถ้าคุณ Backup Dotfiles ทั้งหมดใน GitHub Repo ตอนนี้เวลาดีที่จะเพิ่มเข้า WSL Folder ครั้งก่อน ผมตั้ง Permission ด้วยมือหลัง Move ไฟล์แต่ละไฟล์ แต่ค้นพบ rsync ย้ายไฟล์ทั้งหมด
rsync -avzh /mnt/c/Users/dotfiles/ ~/จะ Copy เนื้อหา dotfiles Folder ไป ~/ (Home) Directory ใน WSL เช็คได้ด้วย:
ls -la ~/
ผม Copy .gitconfig, .gitignore และ .npmrc Dotfiles รูปที่นี่ เห็นว่า Permissions ไม่ Consistent กับ .bashrc File
เปลี่ยน File Permissions ด้วย chmod และดู Attributes ไฟล์คล้ายกันด้วย stat:
stat -c "%a %n" ~/.*จะ List ทุกอย่างขึ้นต้นด้วย . นี่คือของผม:
777 /home/scott/.755 /home/scott/..600 /home/scott/.bash_history644 /home/scott/.bash_logout644 /home/scott/.bashrc777 /home/scott/.cache777 /home/scott/.config777 /home/scott/.gitconfig777 /home/scott/.gitignore777 /home/scott/.local777 /home/scott/.npm777 /home/scott/.npmrc644 /home/scott/.profile644 /home/scott/.sudo_as_admin_successfulผมอยากเปลี่ยนแค่ .gitconfig, .gitignore และ .npmrc ตรงนี้:
chmod 644 .gitconfig .gitignore .npmrcตอนนี้ไฟล์ของผมเป็นแบบนี้ ?
Ok ตอนนี้ Up and Running กับ Ubuntu Updated, Node และ Fish Terminal ยังมี Global NPM Packages ที่ต้องติดตั้งสำหรับ Development
Good Luck!
ขอบคุณที่อ่าน
ถ้าคิดว่าน่าสนใจ ให้ Clap หรือ Subscribe อัปเดตอนหน้า หรือ Tweet ความคิดเห็น
ถ้ามีอะไรพลาด หรือมีวิธีดีกว่า บอกผมได้
ติดต่อ Twitter หรือ Ask Me Anything บน GitHub
อ่านบทความแบบนี้เพิ่มได้ที่ Blog ของผม
