Sebelum kita membahas cara mengatur code-server di Ubuntu 20.04, mari kita pahami secara singkat – Apa itu code-server?

Code-server adalah Microsoft Visual Studio Code yang berjalan pada server remote. Ini dapat diakses langsung dari browser dan merupakan editor kode modern. Selain itu, ia terintegrasi dengan dukungan Git, debugger kode, otomatisasi pintar, dan fitur kustomisasi lainnya.

Dengan demikian, ini berarti Anda dapat menggunakan berbagai perangkat yang menjalankan berbagai sistem operasi. Ini juga memungkinkan lingkungan pengembangan yang konsisten dengan mudah.

Dalam tutorial ini, Anda akan mengatur code-server di Ubuntu 20.04. Selain itu, kita akan menjawab beberapa pertanyaan umum seputar instalasi code-server. Prasyarat

  1. Sebuah server yang berjalan pada Ubuntu 20.04 dengan setidaknya 2GB RAM.
  2. Akses root yang sesuai, sudo, serta akun non-root.
  3. Nginx terinstal di server.
  4. Nama domain yang sudah terdaftar sepenuhnya untuk meng-host code-server langsung ke server Anda.

Langkah 1 – Menginstal code-server

  1. Unduh versi terbaru dari code-server. Buat layanan systemd yang akan menjalankan code-server di latar belakang. Juga, Anda perlu menentukan kebijakan restart untuk layanan tersebut, sehingga code-server tetap tersedia setelah kemungkinan crash atau reboot.
  2. Data yang berkaitan dengan code-server berada di dalam folder bernama ~/code-server. Buat folder tersebut dengan menjalankan perintah:
mkdir ~/code-server
  1. Setelah itu, navigasikan ke dalamnya:
cd ~/code-server
  1. Sekarang, kunjungi halaman rilis Github code-server dan dapatkan versi Linux terbaru. Unduh dengan menggunakan wget dengan menjalankan perintah berikut:
wget https://github.com/cdr/code-server/releases/download/3.2.0/code-server-3.2.0-linux-x86_64.tar.gz
  1. Setelah itu, ekstrak arsip dengan menggunakan perintah berikut:
tar -xzvf code-server-3.2.0-linux-x86_64.tar.gz
  1. Anda akan mendapatkan folder yang memiliki nama seperti file asli yang diunduh sebelumnya. Ini akan berisi kode sumber code-server. Sekarang, salin ke /usr/lib/code-server agar dapat diakses secara sistem-wide, jalankan perintah berikut:
sudo cp -r code-server-3.2.0-linux-x86_64 /usr/lib/code-server
  1. Setelah itu, buat tautan simbolik di /usr/bin/code-server. Tunjukkannya ke code-server yang dapat dieksekusi:
sudo ln -s /usr/lib/code-server/code-server /usr/bin/code-server
  1. Untuk menyimpan data pengguna, buat folder untuk code-server, jalankan perintah berikut:
sudo mkdir /var/lib/code-server
  1. Setelah mengunduh, buat layanan systemd. Ini akan menjalankan code-server di latar belakang sepanjang waktu. Simpan konfigurasi layanan dalam file, di direktori /lib/systemd/system. Buat menggunakan perintah berikut:
sudo nano /lib/systemd/system/code-server.service

Tambahkan juga baris berikut:

/lib/systemd/system/code-server.service
[Unit]
Description=code-server
After=nginx.service

[Service]
Type=simple
Environment=PASSWORD=your_password
ExecStart=/usr/bin/code-server --bind-addr 127.0.0.1:8080 --user-data-dir /var/lib/code-server --auth password
Restart=always

[Install]
WantedBy=multi-user.target
  1. Sekarang, tentukan deskripsi layanan. Nyatakan layanan nginx sebelum ini. Setelah bagian [Unit], tentukan jenis layanan, lalu berikan perintah untuk dieksekusi.
  2. Juga, tentukan code-server global yang dapat dieksekusi. Ini perlu dimulai dengan beberapa argumen ke server kode. –bind-addr 127.0.0.1:8080 mengikatnya ke localhost di port 8080, sehingga hanya dapat diakses dari dalam server. Selanjutnya, –user-data-dir /var/lib/code-server menetapkan direktori data pengguna, dan –auth password untuk mengautentikasi pengunjung dengan kata sandi. Ini ditentukan dalam variabel lingkungan PASSWORD.

Ganti sandi_anda dengan kata sandi yang diinginkan, lalu simpan dan tutup file. Di sini, bagian [Install] memberi perintah systemd untuk memulai layanan saat masuk ke server.

  1. Selanjutnya, mulai layanan code-server, dengan menjalankan perintah berikut:
sudo systemctl start code-server
  1. Untuk memeriksa apakah sistem dimulai dengan benar, perhatikan status dengan:
sudo systemctl status code-server

Anda akan mendapatkan keluaran berikut:

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
  1. Agar code-server dapat dimulai secara otomatis setelah reboot server. Jalankan perintah berikut:
sudo systemctl enable code-server

Sekarang, pengunduhan code-server selesai dan tersedia secara global. Kemudian, pembuatan layanan systemd untuknya juga selesai dan diaktifkan.

Setelah itu, konfigurasi Nginx untuk mengeksposnya ke domain Anda sebagai reverse proxy antara pengunjung dan code-server. Langkah 2 – Mengekspos code-server pada Domain Anda

  1. Sekarang, konfigurasikan Nginx sebagai reverse proxy untuk code-server.

File konfigurasi Nginx disimpan di bawah /etc/nginx/sites-available. Nantinya, ini perlu di-symlink ke /etc/nginx/sites-enabled untuk membuatnya aktif.

  1. Setelah itu, simpan konfigurasi untuk mengekspos code-server pada domain. Ini ada dalam file bernama code-server.conf, di bawah /etc/nginx/sites-available. Mulailah dengan membuatnya menggunakan editor.
sudo nano /etc/nginx/sites-available/code-server.conf

Sekarang, tambahkan baris berikut:

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;
    }
}
  1. Kemudian, gantilah code-server.your-domain dengan nama domain yang Anda inginkan.
  2. Setelah itu, simpan dan tutup file. Di sini, Anda perlu menentukan bahwa Nginx harus mendengarkan port HTTP 80. Selain itu, Anda menentukan server_name, yang memberi tahu Nginx untuk domain mana menerima permintaan dan menerapkan konfigurasi. Untuk lokasi root (/), ini menunjukkan bahwa permintaan harus diteruskan bolak-balik ke code-server di localhost:8080. Mulai dari proxy_set_header, perintahkan Nginx untuk membawa beberapa header permintaan HTTP. Ini diperlukan untuk fungsi yang benar dari WebSockets, yang digunakan secara optimal oleh code-server.
  3. Anda kemudian perlu membuat konfigurasi tersebut aktif. Untuk ini, buat symlink di folder /etc/nginx/sites-enabled dengan menjalankan perintah berikut:
sudo ln -s /etc/nginx/sites-available/code-server.conf /etc/nginx/sites-enabled/code-server.conf
  1. Selanjutnya, uji keabsahan konfigurasi dengan menjalankan perintah berikut:
sudo nginx -t

Anda akan melihat keluaran berikut:

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
  1. Kemudian, restart Nginx, agar konfigurasi berlaku. Jalankan perintah berikut:
sudo systemctl restart nginx

Sekarang, Anda akan memiliki instalasi code-server yang dapat diakses di domain Anda sendiri. Langkah 3 – Mengamankan Domain Anda

  1. Untuk mengamankan, gunakan sertifikat TLS Let’s Encrypt, yang akan Anda peroleh menggunakan Certbot.

Untuk menginstal versi terbaru Certbot, tambahkan repositori paketnya ke server. Jalankan perintah berikut:

sudo add-apt-repository ppa:certbot/certbot

Tekan ENTER untuk menerima.

  1. Anda akan menginstal Certbot dan plugin Nginx-nya.
sudo apt install python-certbot-nginx
  1. Jadi, Anda sudah mengaktifkan ufw dan mengonfigurasinya untuk mengizinkan lalu lintas HTTP tanpa enkripsi. Oleh karena itu, agar dapat mengakses situs yang aman, konfigurasikan untuk menerima lalu lintas terenkripsi. Jalankan perintah berikut:
sudo ufw allow https

Keluaran akan menjadi:

Rule added
Rule added (v6)
  1. Juga untuk Nginx, muat ulang untuk membuat konfigurasi berlaku, dengan:
sudo ufw reload

Keluaran akan menjadi:

Firewall reloaded
  1. Di browser, navigasi ke domain yang Anda gunakan untuk code-server. Kemudian, Anda akan melihat prompt login code-server. prompt login code-server
  2. Masukkan kata sandi yang telah diatur pada langkah sebelumnya dan kemudian tekan Enter IDE. Setelah itu, Anda akan melihat code-server dan GUI editor-nya. code-server Editor GUI
  3. Sekarang, code-server dengan benar terekspos ke domain Anda. Selanjutnya, Anda akan menginstal sertifikat TLS Let’s Encrypt untuk mengamankannya, menggunakan Certbot. Oleh karena itu, untuk meminta sertifikat untuk domain, jalankan kode berikut:
sudo certbot --nginx -d code-server.your-domain
  1. Di sini, certbot meminta sertifikat untuk domain Anda, yang dilewatkan dengan parameter -d. Juga bendera –nginx memberitahu untuk secara otomatis mengubah konfigurasi situs Nginx untuk mendukung HTTPS. Pastikan untuk mengganti code-server.your-domain dengan nama domain Anda.

Jika ini pertama kalinya Anda menjalankannya, Anda harus memberikan alamat email Anda untuk pemberitahuan mendesak. Serta untuk menerima Persyaratan Layanan EFF. Certbot juga akan meminta sertifikat untuk domain dari Let’s Encrypt. Lalu, itu akan bertanya apakah Anda ingin mengalihkan semua lalu lintas HTTP ke HTTPS:

Keluaran

Please choose whether or not to redirect HTTP traffic to HTTPS, removing HTTP access.

1: No redirect – Make no further changes to the webserver configuration. 2: Redirect – Make all requests redirect to secure HTTPS access. Choose this for new sites, or if you’re confident your site works on HTTPS. You can undo this change by editing your web server’s configuration.

Select the appropriate number [1-2] then [enter] (press ‘c’ to cancel):

  1. Disarankan untuk memilih opsi kedua untuk meningkatkan keamanan. Setelah Anda memasukkan pilihan Anda, tekan ENTER.

Keluaran akan terlihat seperti ini:

Keluaran

IMPORTANT NOTES:

  • Congratulations! Your certificate and chain have been saved at: /etc/letsencrypt/live/code-server.your-domain/fullchain.pem Your key file has been saved at: /etc/letsencrypt/live/code-server.your-domain/privkey.pem Your cert will expire on … To obtain a new or tweaked version of this certificate in the future, simply run certbot again with the “certonly” option. To non-interactively renew all of your certificates, run “certbot renew”
  • Your account credentials have been saved in your Certbot configuration directory at /etc/letsencrypt. You should make a secure backup of this folder now. This configuration directory will also contain certificates and private keys obtained by Certbot so making regular backups of this folder is ideal.
  • If you like Certbot, please consider supporting our work by:

Donating to ISRG / Let’s Encrypt: https://letsencrypt.org/donate Donating to EFF: https://eff.org/donate-le

Sekarang, Certbot telah berhasil menghasilkan sertifikat TLS dan menerapkannya pada konfigurasi Nginx. Sekarang dapat me-reload domain code-server di browser. Anda akan melihat gembok di sebelah kiri alamat situs, yang berarti koneksi Anda aman.

Jadi, Anda memiliki code-server yang dapat diakses di domain melalui proxy terbalik Nginx yang aman. Langkah 4 – Menggunakan Antarmuka code-server

Sekarang, Anda akan menggunakan beberapa fitur dari antarmuka code-server. Ini memiliki antarmuka yang mirip dengan versi desktop.

  1. Di sisi kiri IDE, ada baris vertikal dari 6 tombol. Ini membuka fitur yang paling sering digunakan dalam panel samping yang disebut Activity Bar. Activity Bar
  2. Bar ini sebagian besar dapat disesuaikan memungkinkan Anda untuk memindahkan tampilan ini ke urutan yang berbeda atau menghapusnya. Jadi, secara default, tombol pertama membuka menu umum di dropdown. Tampilan kedua membuka panel Explorer yang menyediakan navigasi berupa pohon struktur proyek. Anda dapat mengelola folder serta file. Anda dapat membuat, menghapus, memindahkan, dan bahkan mengganti namanya sesuai kebutuhan. Kemudian, tampilan berikutnya memberikan akses ke fungsi pencarian dan penggantian.

Demikian pula, dalam urutan default ini, ada tampilan sistem kontrol sumber, seperti Git. Visual Studio Code juga mendukung penyedia kontrol sumber lain dan Anda dapat menemukan informasi lebih lanjut di dokumentasi. source control

  1. Sekarang, opsi debugger yang ada di Activity Bar menyediakan semua tindakan yang diperlukan untuk debugging dalam suatu panel. Visual Studio Code memiliki dukungan bawaan untuk debugger runtime Node.js untuk bahasa yang mengubah transpile ke Javascript. Dan untuk bahasa lain, Anda dapat menginstal ekstensi untuk debugger yang diperlukan. Anda dapat menyimpan konfigurasi debugging dalam file launch.json. launch.json file
  2. Juga, tampilan terakhir di Activity Bar memberikan menu untuk mengakses ekstensi yang tersedia di Marketplace. view of activity bar
  3. Bagian utama dari GUI sebenarnya adalah editor Anda. Anda dapat memisahkannya dengan tab untuk mengedit kode. Juga, memungkinkan Anda untuk mengubah tampilan pengeditan Anda ke sistem grid atau file yang berdampingan. Explorer side panel
  4. Setelah itu, buat file baru dari menu File. Anda akan melihat file kosong terbuka dalam tab baru. Setelah menyimpan nama file akan terlihat di Explorer side panel.

Membuat folder baru dapat dilakukan dengan mengklik kanan pada sidebar Explorer, kemudian New Folder. Ini memungkinkan Anda untuk memperluas folder dengan mengklik namanya. Juga, memungkinkan untuk menyeret dan meletakkan file dan folder ke bagian atas, untuk memindahkannya ke lokasi baru. code-server New Folder

  1. Anda akan memiliki akses ke terminal dengan memasukkan CTRL+SHIFT+`, atau dengan mengklik Terminal di menu atas. Sekarang pilih New Terminal. Oleh karena itu, terminal akan terbuka di panel bawah. Juga, direktori kerjanya akan diatur ke workspace proyek, berisi file dan folder di panel samping Explorer.

Sekarang, Anda seharusnya memiliki gambaran tingkat tinggi tentang antarmuka code-server dan fitur umumnya.