ทำการติดตั้ง Extention Remote – SSH ใน VSCode และทดลองใช้งาน EC2 โดยตรงใน VSCode

ครั้งนี้ผมจะมาแนะนำวิธี ทำการติดตั้ง Extention Remote - SSH ใน VSCode และทดลองใช้งาน EC2 โดยตรงใน VSCode ครับ

สิ่งที่ต้องมี

วิธีการติดตั้ง Visual Studio Code บน Windows 10/11 [2022]

ให้ทำการติดตั้งโปรแกรม Visual Studio Code ตามลิงก์ด้านล่างนี้ (สำหรับคนที่มีอยู่แล้วข้ามขั้นตอนนี้ไปได้เลยครับ)

วิธีติดตั้ง Amazon Linux 2 บน EC2 และเชื่อมต่อเซิร์ฟเวอร์ด้วยโปรแกรม PuTTY

ให้ทำการติดตั้ง EC2 Instance (Amazon Linux 2) โดยดูตามลิงก์ด้านล่างนี้เป็นตัวอย่างได้เลย (สำหรับคนที่มีอยู่แล้วข้ามขั้นตอนนี้ไปได้เลยครับ)
หมายเหตุ: ไม่ต้องทำหัวข้อย่อยของ ❌ การ Connect to EC2 by PuTTY เพราะว่าเราจะใช้ VSCode เชื่อมต่อกับ Server EC2 Instance ครับ

ส่วนที่ต้องระวังคือ ตอนสร้าง Key Pair เพราะมีส่วนของ Private key file format ที่ตั้งค่าไม่เหมือนกัน ซึ่งในบทความตัวอย่างจะเป็น [ Private key file format: ◉ .ppk ] แต่ในบทความนี้เราจะใช้เป็น [ Private key file format: ◉ .pem ] ครับ

ตัวอย่างตั้งค่าการสร้าง EC2 Instance ในบทความนี้

※Create Key pairs

Key pair

Key pairs:tinnakorn-test
Key pair type:RSA
Private key file format: ◉pem

※Launch instances

Name and tags

Name:tinnakorn-test

Application and OS Images (Amazon Machine Image)

Amazon Machine Image (AMI):Amazon Linux 2 AMI (HVM) - Kernel 5.10, SSD Volume Type(Default)

Instance type

Instance type:t3a.nano

Key pair (login)

Key pair name - required:tinnakorn-test

Network settings

Firewall (security groups)

Security group name - required:tinnakorn-test
Description - required:tinnakorn-test

Inbound security groups rules

Security group rule 1 (TCP, 22, 0.0.0.0/0)

Type:ssh ▼| Source type:My IP ▼| Source:xxx.xxx.x.xxx/32 ✕

Configure storage

1x:8GiBgp2 ▼Root volume (Default)

เมื่อทำการติดตั้ง Visual Studio Code และสร้าง EC2 Instance (Amazon Linux 2) ในหัวข้อ สิ่งที่ต้องมี เสร็จเรียบร้อยแล้ว ให้ทำขั้นตอนถัดไปได้เลยครับ

การติดตั้ง Extension [ Remote - SSH ]

เปิดโปรแกรม VSCode ขึ้นมา ถ้าเปิดอยู่แล้วให้มาที่แถบด้านซ้ายสุด แล้วทำตามขั้นตอนดังนี้:
① เลือกสัญลักษณ์ Extension ตามรูปภาพ
② พิมพ์คำว่าRemote - SSHลงในช่อง Extension
③ คลิกที่Remote - SSHอันแรกสุด
④ มาที่ด้านขวา คลิกที่Install

เมื่อติดตั้ง Remote - SSH เสร็จแล้ว ดูที่แถบด้ายซ้ายสุดจะเห็นว่ามีไอคอนเพิ่มขึ้นมาเหมือนกับรูปภาพนี้

ตั้งค่าการเชื่อมต่อโดยใช้ Extension [ Remote - SSH ]

ขั้นตอนนี้ผมจะทำการเชื่อมต่อกับ Server EC2 (Amazon Linux 2) โดยใช้ VSCode

ตั้งค่าการเชื่อมต่อดังนี้:
» คลิกที่ไอคอนRemote - SSH
» คลิกที่ไอคอน⚙ตั้งค่า
» เลือกอันที่เป็น User ของเราและตามด้วย~/.ssh/config

กรณีที่การตั้งค่านี้ไม่มีความจำเป็นหรือไม่ต้องการใช้ ให้ทำการลบออกได้เลยครับ

Copy ข้อมูลด้านล่างนี้ไปใส่ในไฟล์ config และแก้ไขข้อมูลบางส่วนให้เป็นของคุณดังนี้:
» Host (ตั้งชื่ออะไรก็ได้โดยใช้ภาษาอังกฤษเท่านั้น)
» Hostname (IP Address Instance)
» IdentityFile (~/.ssh/[your_key_pair.pem])
» ส่วน User กับ Port ไม่ต้องตั้งค่าอะไร
» เมื่อแก้ไขข้อมูลเสร็จแล้ว ทำการ Save โดยกดปุ่มCtrl + sที่แป้นพิมพ์ได้เลยครับ

Host [your_host]
    Hostname [your_ip_address_instance]
    User ec2-user
    Port 22
    IdentityFile ~/.ssh/[your_key_pair.pem]

ย้ายไฟล์key_pair.pemของเราไปวางในโฟลเดอร์.sshตาม Path ที่เราเลือกไว้ในตอนแรก เพื่อให้ IdentityFile สามารถมองเห็นไฟล์key_pair.pemได้ เช่น [ This PC › Windows-SSD (C:) › Users › your_name › .ssh ]

มาที่ช่องด้านซ้าย เอาเมาส์มาชี้ตรงชื่อ EC2 Instance ของเราค้างไว้ แล้วจะมีไอคอน Connect to Host in New Windows แสดงขึ้นมา จากนั้นคลิกที่ไอคอนนี้ได้เลย

เมื่อหน้าต่างโปรแกรม VSCode ใหม่เปิดขึ้นมาแล้ว เลือกLinuxครับ

เลือกContinueครับ

เมื่อเชื่อมต่อได้แล้ว ด้านล่างซ้ายสุดจะแสดงหน้าจอแบบนี้ครับ
จากนั้นให้ปิดโปรแกรม VSCode หน้าที่เราใช้ตั้งค่าเมื่อสักครู่นี้ได้เลยครับ

วิธีการ Start Terminal

ขั้นตอนนี้ผมจะสาธิตวิธีการเริ่มต้นใช้งาน Terminal โดยมี 2 วิธีครับ

กลับมาที่หน้าโปรแกรม VSCode ที่เชื่อมต่อกับ EC2 Instance (Amazon Linux 2) เมื่อสักครู่นี้
จากนั้นอ่านคำอธิบายและคลิกดูที่รูปภาพเพื่อดูวิธีการเริ่มต้นใช้งาน Terminal ได้เลยครับ

1. คลิกที่ View และเลือก Terminal

2. คลิกที่ Terminal และเลือก New Terminal

เมื่อ Start Terminal ได้แล้วจะแสดงหน้าจอแบบนี้ครับ

เปิด Folder Server EC2 Instance (Amazon Linux 2)

คลิกFileและเลือกOpen Folder...

เมื่อคลิก Open Folder แล้วจะแสดงหน้าจอแบบนี้ ซึ่งค่าเริ่มต้นจะเป็น [ /home/ec2-user/ ] จากนั้นคลิกปุ่มOKได้เลย (นอกจากโฟลเดอร์นี้แล้วเราสามารถเลือกโฟลเดอร์อื่นๆได้ด้วยครับ)

ติ๊ก✅Trust the authors of all file in the parent folder 'home'
จากนั้นคลิก [ Yes, I trust the authors Trust folder and enable all features ]

เมื่อเปิดโฟลเดอร์เสร็จแล้วจะแสดงหน้าจอแบบนี้ (ถ้าไอคอนข้างหน้าชื่อไฟล์ไม่เหมือนกันก็ไม่เป็นไร เพราะโปรแกรม VSCode ที่ผมใช้สาธิตนี้ ผมได้ติดตั้ง Extension [ vscode-icons ] ลงไป จึงทำให้ไอคอนไม่เหมือนกันครับ)
ในส่วนของหน้า Get started ให้คลิก✕ออกไปได้เลยครับ

เกี่ยวกับรหัสฟีดบรรทัด (New Line) [ LF, CRLF ]

การตั้งค่า LF

การใช้งานใน Linux จะใช้ LF กับ UTF8 ซึ่งเราสามารถเปลี่ยนจาก CRLF เป็น LF ได้ง่ายๆโดยคลิกที่CRLFและเลือกLFที่แสดงขึ้นมาด้านบน

ดูที่ด้านล่างขวาอีกครั้ง จะเห็นว่า Select End of Line Sequence (การเลือกลำดับท้ายบรรทัด) เปลี่ยนเป็นLFเรียบร้อยแล้ว

การตั้งค่า UTF-8

คลิกที่UTF-8และเลือกSave with Encoding

เลือกUTF-8 utf8

เพียงเท่านี้การตั้งค่า LF กับ UTF-8 ก็เสร็จเรียบร้อยครับ

อ้างอิง: VS Codeで改行コードを変更するには (การเปลี่ยนรหัสฟีดบรรทัดใน VS Code)

การสร้างไฟล์ใน Server EC2 Instance ผ่าน VSCode

ขั้นตอนนี้ผมจะสาธิตการอัปโหลดไฟล์โดยการสร้างไฟล์ลงใน Server EC2 ผ่าน VSCode โดยตรงเลยครับ

คลิกขวาที่ช่องด้านซ้าย เลือก New File

ตั้งชื่อไฟล์และนามสกุลไฟล์ที่ต้องการ เช่น test.txt + Enter

ใส่ข้อมูลอะไรที่เราต้องการ และทำการ Save เพียงเท่านี้ก็เสร็จเรียบร้อยครับ

ต่อไปผมจะลองสร้างและเพิ่มข้อมูลที่เป็นไฟล์ Markdown ขึ้นมาอีก 1 อันโดยใช้ชื่อว่าtest.mdและเพิ่มข้อมูลลงไปครับ (ไฟล์จะเปลี่ยนประเภทไปตามนามสกุลไฟล์ที่เราสร้างครับ)

เมื่อเพิ่มข้อมูลเสร็จแล้ว คลิกที่ไอคอนOpen Previewด้านขวาบนตามรูปภาพ

เมื่อ Preview ออกมาแล้ว จะแสดงหน้าจอแบบนี้ และหากไม่ต้องการใช้หน้าต่าง Preview นี้ให้คลิก✕ที่ [ Preview file_name.md ] ออกได้เลย (Open Preview นี้ใช้ได้เฉพาะไฟล์.mdเท่านั้นครับ)

เพียงเท่านี้การสร้างไฟล์ใน Server EC2 Instance ผ่าน VSCode ก็เสร็จเรียบร้อยแล้ว นอกจากนี้เรายังสามารถสร้างไฟล์โดยใช้viใน Terminal ของ VSCode เหมือนกับโปรแกรม PuTTY ได้อีกด้วยครับ

การอัปโหลดไฟล์

ขั้นตอนนี้ผมจะทำการอัปโหลดไฟล์ Image จาก Windows ไปยัง Server EC2 Instance ผ่าน VSCode

เพื่อให้เห็นภาพมากขึ้น ผมจะอัปโหลดไฟล์ Image จาก Windows ไปยัง Server EC2 Instance โดยการ Copy หรือคลิกที่ไฟล์ค้างไว้และลากไฟล์จากเครื่องคอมพิวเตอร์ของเรามาวางในส่วน Explorer ของ VSCode ครับ

เมื่อ Copy หรือลากไฟล์รูปภาพมาวางเสร็จแล้ว จะแสดงหน้าจอแบบนี้ครับ

เพียงเท่านี้การอัปโหลดไฟล์ Image จาก Windows ไปยัง Server EC2 Instance ผ่าน VSCode ก็เสร็จเรียบร้อยแล้วครับ

ตรวจสอบไฟล์ใน Server EC2 ผ่าน Terminal

เปิด Terminal ขึ้นมา แล้วรันคำสั่งด้านล่างนี้เพื่อตรวจสอบไฟล์ที่เราได้สร้างลงไป

ll

จะเห็นว่ามีไฟล์ที่ชื่อ [ test_image.png, test.md และ text.txt ] ตามที่เราได้สร้างไว้เมื่อสักครู่นี้ และถ้าเราต้องการออกจาก Terminal ก็สามารถคลิก✕ที่ด้านมุมขวาบนของหน้า Terminal ได้เลยครับ

การดาวน์โหลดไฟล์

ขั้นตอนนี้ผมจะสาธิตการดาวน์โหลดไฟล์จาก Server EC2 Instance ลงในเครื่องคอมพิวเตอร์โดยผ่าน VSCode ครับ

สมมติว่าผมต้องการไฟล์ text.md ไปใช้งานต่อที่โปรเจกต์อื่น ผมก็จะดาวน์โหลดไฟล์ดังนี้:
» คลิกซ้ายที่ไฟล์text.md1 ครั้ง
» คลิกขวาที่ไฟล์text.mdและเลือกDownload...
» เลือกที่เก็บไฟล์ในคอมพิวเตอร์ของคุณและคลิกDownload

ทีนี้ก็เปิดโฟลเดอร์ที่เราเก็บไฟล์ดาวน์โหลดไว้ ของผมเก็บไว้ที่ [ This PC › Download ] จะเห็นว่ามีไฟล์text.mdที่ผมทำการดาวน์โหลดมาเมื่อสักครู่นี้ครับ

※ข้อควรระวัง: User ที่กำลังเชื่อมต่อด้วยการตั้งค่านี้คือ ec2-user โปรดใช้ความระมัดระวัง ในกรณีที่จัดการไฟล์ที่ไม่สามารถแก้ไขได้ด้วย ec2-user เช่น ไฟล์ที่สร้างขึ้นด้วย Account root (User หลังจากทำการ sudo su - ไปแล้ว)

สำหรับคนที่ต้องการแก้ไขหรือเปลี่ยนแปลงโฟลเดอร์ด้วย VSCode แนะนำให้ทำการตั้งค่าโดยรันคำสั่งด้านล่างนี้ครับ

chmod -R ugo+rw [folder]

สรุป

การสาธิตวิธีทำการติดตั้ง Extention Remote - SSH ใน VSCode และทดลองใช้งาน EC2 โดยตรงใน VSCode ก็เสร็จเรียบร้อยแล้วครับ ซึ่งโปรแกรม VSCode นี้นอกจากจะสามารถเขียนโปรแกรมได้แล้ว ยังสามารถใช้ Remote ไปยัง Server EC2 Instance (Amazon Linux 2) ได้อีกด้วย สำหรับผมแล้วการใช้งาน Server EC2 ใน VSCode นี้มีความสะดวกในการจัดการข้อมูลเป็นอย่างมากครับ

บทความที่เกี่ยวข้อง

• วิธีการติดตั้ง Visual Studio Code บน Windows 10/11 [2022]
• 【Update】วิธีติดตั้ง Amazon Linux 2 บน EC2 และเชื่อมต่อเซิร์ฟเวอร์ด้วยโปรแกรม PuTTY
• https://code.visualstudio.com/ (ภาษาอังกฤษ)
• Visual Studio Code Remote - SSH (ภาษาอังกฤษ)
• VS Codeで改行コードを変更するには (ภาษาญี่ปุ่น)