เขียนโค้ดได้ทุกที่ด้วย Code-server

ช่วงนี้เจอปัญหาคือไม่ค่อยได้อยู่บ้านและ macbook pro ก็เกิดปัญหาคือจอเสียอีกแล้ว ซึ่งจำเป็นต้องเปลี่ยนเครื่อง พอเปลี่ยนเครื่องแต่ละครั้งกว่าจะเริ่ม dev ได้ก็เจอปัญหาอีกคือต้องมานั่งลง enviroment ในการพัฒนาเยอะมากกว่าจะได้ลงมือเขียนก็ใช้เวลาเป็น 1–2 ซึ่งใช้เวลาเยอะ แถมยังกังวลอีกว่าถ้าเกิดว่าสลับไปใช้ pc ที่บ้านเขียนอีกก็จะทำให้ต้องย้ายโค้ดไปมา ถึงแม้จะใช้งาน git แล้วแต่ก็อยากให้ทุกเครื่องสามารถที่จะมี code ที่เหมือนกันเปิดแล้วสามารถทำงานได้ทันที แรกสุดที่ทดลองใช้ VS code remote development คือคล้ายการ map drive ไปยัง server ที่เก็บ source code ผ่าน protocol ต่างๆ ซึ่งในที่นี้ก็คือ ssh server แต่ข้อเสียคือยังไงก็ต้องใช้ performance เครื่องซึ่งตอนนี้ผมมีแค่เครื่อง surface go เล็กๆ ก็เลยหาข้อมูลว่าเราสามารถที่จะลงมือเขียนโปรแกรมผ่าน cloud ได้ไหมเพราะคิดว่า trend กำลังมา จนสุดท้ายผมได้เจอกับ code-server ซึ่งคือ VS code ที่รันบนเว็บนั้นเอง

ตัวอย่าง code-server ที่รันเป็น chrome application

Code-server คืออะไร?

Code-server ก็คือ Visual studio code เวอร์ชั่นที่สามารถรันบนเว็บได้ ทำให้เราสามรรถเขียนโปรแกรมที่ไหนก็ได้โดยมีแค่ browser นั้นจึงทำให้สามารถใช้ tablet หรือ มือถือก็สามารถใช้ vs code เพื่อเขียนโปรแกรมได้

แล้ว Code-server ทำอะไรได้บ้าง

1. สามารถที่จะเขียนโปรแกรมโดยการใช้ enviroment เดิมตลอดผ่าน browser
2. สามารถใช้ทรัพยากรเท่าไรก็ได้ผ่าน cloud เราจะเพิ่ม cpu ram หรือ stroage เท่าไรก็ได้ในการพัฒนา(แล้วแต่เงินในกระเป๋านะ)
3. แน่นอนประหยัดแบตเพราะว่าเครื่องที่ทำงานหนักจะอยู่บน cloud
4. สามารถลง extension เพิ่มเติมได้เหมือน vs code ที่ติดตั้งบนเครื่องธรรมดา

วิธีการติดตั้ง

curl -fsSL https://code-server.dev/install.sh | sh

เมื่อติดตั้งเสร็จเรียบร้อยแล้วเราสามารถที่จะควบคุมการทำงานของ code-server ได้โดยใช้ systemctl

systemctl enable code-server@$USER //สำหรับ startup
systemctl start code-server@$USER //สำหรับเริ่มการทำงาน

ครั้งแรกเราสามารถเข้าใช้งาน code server ได้จาก http://localhost:8080 ซึ่งหากเข้าใช้งานจะต้องใส่รหัสผ่านในการใช้งานซึ่งสามารถดูได้จาก ~/.config/code-server/config.yaml

และหากต้องการให้ code-server สามารถเข้าใช้งานได้ผ่านทาง internet หรือ intranet เราต้องเข้าไปแก้ไข config.yaml เพื่อให้ code-server bind servicce ผ่าน interface ที่กำหนด

bind-addr: 0.0.0.0:9999
auth: password
password: xxxxxxxxxxxxx
cert: false

ในตัวอย่างคือให้ code-server สามารถเข้ามาได้จากทุกที่ผ่าน port 9999

Case study สำหรับการใช้งานจริง

สถาปัตยกรรมการเชื่อมต่อไปยัง ZchoolMate Dev machine farm

สำหรับการติดตั้งใช้งานของ ZchoolMate เนื่องจากเราได้มีเครื่อง server ที่ใช้ทำ virtualize อยู่แล้วและได้ทำการติดตั้ง proxmox สำหรับจัดการ vm เราจึงได้ทำการสร้าง vm ให้สำหรับ developer แต่ละคนโดยลงเป็น Ubuntu Desktop เพื่อให้ทุกคนสามารถ remote มาใช้งานได้โดยในแต่ละ vm ได้ติดตั้ง code-server และทำงานอยู่ที่ port 8080

ตัวอย่าง vm ที่ทำการติดตั้ง

เนื่องจาก promox อยู่ใน localnetwork เพื่อทำให้สามารถเข้าใช้งานจากด้านนอกได้ เราจึงใช้ Mikrotik เป็น router และ map public ip ไปยังเครื่อง promox เพื่อให้สามารถเข้าถึงเครื่อง promox จากด้านนอกได้ โดยในเครื่อง promox เพื่อให้ developer แต่ละคนสามารถเข้าถึงบริการจากเครื่องของตัวเองได้จึงได้มาการลง nginx reverse proxy ในเครื่อง promox เพื่อ redirect traffic ไปยัง vm ในแต่ละเครื่องของ developer

ตัวอย่าง Nginx Configuration

server {
  listen 80;
  server_name earn.dev.zchoolmate.com;
  return 301 https://$host$request_uri;
}
server {
  listen 443;
  server_name earn.dev.zchoolmate.com;
  ssl_certificate           /root/.acme.sh/earn.prox1.vz.zchoolmate.com/fullchain.cer;
  ssl_certificate_key       /root/.acme.sh/earn.prox1.vz.zchoolmate.com/earn.prox1.vz.zchoolmate.com.key;
  ssl on;
  ssl_session_cache  builtin:1000  shared:SSL:10m;
  ssl_protocols  TLSv1 TLSv1.1 TLSv1.2;
  ssl_ciphers HIGH:!aNULL:!eNULL:!EXPORT:!CAMELLIA:!DES:!MD5:!PSK:!RC4;
  ssl_prefer_server_ciphers on;
  access_log            /var/log/nginx/earn.dev.vz.zchoolmate.com.access.log;
  location / {
    proxy_set_header  X-Real-IP $remote_addr;
    proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header  X-Forwarded-Proto $scheme;
    proxy_set_header  Host $host;
    proxy_set_header  Upgrade $http_upgrade;
    proxy_set_header  Connection upgrade;
    proxy_set_header  Accept-Encoding gzip;
    proxy_pass        http://192.168.x.101:8080;
    proxy_read_timeout  90;
  }
}

จากตัวอย่างเป็นการสร้าง reverse proxy เมื่อเข้าหน้าเว็บ earn.dev.vz.zchoolmate.com ให้ลิงค์ไปยัง 192.168.x.101:8080 ซึ่งเป็นเครื่อง earn-dev และมี code-server รันอยู่ ซึ่งจะทำให้เราสามารถเข้าใช้งาน code-server จากเครื่องที่อยู่ใน internal ได้ผ่านทาง nginx http proxy

Forward http server on internal by nginx

ปัญหาอีกปัญหาเมื่อเรา develop บน cloud หากเราเช่า cloud server ที่ได้ public ip มาเลยก็คงไม่ต้องปวดหัวเราสามารถเข้าถึง http server ที่เรารันได้ผ่านทาง public ip เลยแต่หากเครื่อง vm เราอยู่ภายใต้ internal network ก็มีอีกวิธีในการทำคือการใช้ nginx ทำ reverse proxy เข้าไปยังเครื่อง vm ซึ่งในตัวอย่างจะเป็นการ expose port 3000 ใน vm ให้เข้าผ่านอินเตอร์เน็ตได้ผ่านทาง nginx reverse proxy

server {
 listen 80;
 server_name 3000.earn.dev.vz.zchoolmate.com;
location / {
 proxy_pass http://192.168.99.101:3000/;
 proxy_set_header Host $host;
 proxy_set_header Accept-Encoding gzip;
 }
}

หวังว่าทุกคนจะสนุกกับการเขียนโค้ดบน cloud ด้วย code-server

Reference

https://github.com/cdr/code-server