Trik Programing Laptop Super Kentang

[adibite]

adibite ReactJS Dev Problem Solver VueJS Dev Angular Dev last edited by adibite

Sudah lama tidak menulis di sini lagi, maunya rajin nulis lagi hehe. langsung saja kali ini saya akan membagikan trik saya untuk developing program di laptop "kentang", saya menulis ini karena laptop saya juga bisa di bilang kentang sih walapun enggak begitu kentang banget / low spect. Untuk mengatasi masalah saya ini saya menggunakan code-server mirip seperti VSCODE tapi ini online seperti code editor lainnya Che Openship atau yang Gitpod. Alasan saya pakai code server yang karena sangat mirip dengan VSCODE dan setup di vps simple aja.

1. Install Code Server

Untuk instalasi ini saya ikuti yang ada di readme mereka yang bagian Quick Install
2. Kemudian saya membuat code server bisa di jalankan code-server di terminal dan membuka di browser.

Kalau kalian menggunakan VPS server seperti azure atau aws perlu open inbonding dan outboding port agar bisa di akses di internet

2. Menjalankan Sebagai Service

Ketika terminal session berakhir maka code server akan terhenti untuk mengatasi ini saya mengubah menjadi service dengan cara membuat file pada /lib/systemd/system/code-server.service

seperti berikut ini

[Unit]
Description=code-server
After=nginx.service

[Service]
User=CodeUser
Group=CodeUser
Environment=PASSWORD=PASSWORD_HERE 
ExecStart=/usr/local/bin/code-server --host 127.0.0.1 --user-data-dir /var/lib/code-server --auth password
Restart=always

[Install]
WantedBy=multi-user.target

pastikan telah membuat folder sudo mkdir /var/lib/code-server sebelum menjalankan service ini untuk yang lokasi code server bisa di cari dengan which code-server

terus tinggal enable dan menjalan service ini

sudo systemctl start code-server

dan untuk mengecek apa sudah berjalan

sudo systemctl status code-server

Output harus seperti ini

Output
● code-server.service - code-server
   Loaded: loaded (/lib/systemd/system/code-server.service; disabled; vendor preset: enabled)
   Active: active (running) since Tue 2020-05-12 20:53:29 UTC; 11s ago
 Main PID: 3236 (node)
    Tasks: 14 (limit: 2362)
   CGroup: /system.slice/code-server.service
           ├─3236 /usr/lib/code-server/node /usr/lib/code-server/out/node/entry.js --bind-addr 127.0.0.1:8080 --user-data-dir /var/lib/code-server --auth pas
           └─3258 /usr/lib/code-server/node /usr/lib/code-server/out/node/entry.js --bind-addr 127.0.0.1:8080 --user-data-dir /var/lib/code-server --auth pas

May 12 20:53:29 code-server-update systemd[1]: Started code-server.
May 12 20:53:30 code-server-update code-server[3236]: info  code-server 3.2.0 fd36a99a4c78669970ebc4eb05768293b657716f
May 12 20:53:30 code-server-update code-server[3236]: info  HTTP server listening on http://127.0.0.1:8080
May 12 20:53:30 code-server-update code-server[3236]: info    - Using custom password for authentication
May 12 20:53:30 code-server-update code-server[3236]: info    - Not serving HTTPS
May 12 20:53:30 code-server-update code-server[3236]: info  Automatic updates are enabled

Untuk menjalankan otomatis ketika server di start jalankan perintah ini

sudo systemctl enable code-server

3. Menambah Domain dan Link ke HTTPS

Untuk server ini saya menggunakan nginx terus mengaplikasi reverse proxy, jadi nanti bisa diakses menggunakan domain saya gitu. Bikin konfigruasi terlebih dahulu
sudo nano /etc/nginx/sites-available/code-server.conf

dan isi filenya seperti ini

server {
    listen 80;
    listen [::]:80;

    server_name code-server.your-domain;

    location / {
      proxy_pass http://localhost:8080/;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection upgrade;
      proxy_set_header Accept-Encoding gzip;
    }
}

portnya sama dengan port dari code server, tinggal di aktifkan dengan
sudo ln -s /etc/nginx/sites-available/code-server.conf /etc/nginx/sites-enabled/code-server.conf terus tinggal restart si Nginx sudo systemctl restart nginx

sekarang bisa di buka lewat domain menggunakan protokol HTTP.
Tapi jika di perhatikan jika membuka code server menggunakan protokol HTTP makan akan terdapat waring / peringatan kalau tidak bisa melakukan kegiatan copy / paste dan tidak bisa melakukan live preview. Live preview / prevew mode ini maskudnya kita bisa mengakses proxy dari local server yang di jalankan contoh localhost:4000 bisa diakses code-server.your-domain/proxy/4000

kita install HTTPS dengan menggunakan lets ecrypt seperti berikut ini

sudo add-apt-repository ppa:certbot/certbot

instal ke dalam nginx

sudo apt install python-certbot-nginx

sudo ufw allow https

Sekarang bisa deh buka di HTTPS

Permasalahan Dan Cara Mengatasi

Selama saya menggunakan kode server ini saya mengalami beberapa masalah diantaranya sebagai berikut

1. User di VSCODE server tidak sama dengan yang saya gunakan di mana dia adalah root dan akibatanya program yang saya pasang tidak ada untuk itu bisa dilakukan dengan su - NAMA_USER ganti nama username pribadi

2. Ketika menjalankan program menggunakan live preview terjadi error ini karena endoint beda contoh untuk program seperti nextjs. untuk itu saya menggunakan trik forwading remote port ke local dengan menggunakan

ssh -N user@host -L 8080:localhost:9090

Jadi remote port pada posisi 9090 bisa saya akses di localhost 8080 dan sekarang bisa diakses dengan normal. : )

[wayanjimmy]

wayanjimmy last edited by @adibite

@adibite wah keren nih. Aku dulu ngakalin laptop kentang dengan ngoding pake vim

[alfrcr]

alfrcr JS Warrior last edited by

mantap jiwa, jd tinggal beli iPad Pro aja