IDE sebagai Kode dengan GitHub Codespaces di Visual Studio Code

Salah satu hal tersulit bagi pengembang adalah memulai proyek yang sudah berjalan.

Sering terjadi bahwa persyaratan untuk proyek baru memaksa kami untuk memodifikasi versi SDK dan alat yang telah kami instal secara lokal untuk men-debug lingkungan, yang membuat kami kehilangan waktu hingga semuanya berfungsi seperti yang diharapkan.

Jika kami mempertimbangkan versi yang berada dalam fase beta atau pratinjau, segalanya menjadi lebih rumit. Untuk mencegah hal ini terjadi, saya ingin memperkenalkan Anda ke GitHub Codespaces, yang tidak hanya memungkinkan Anda untuk menghasilkan lingkungan pengembangan yang dibutuhkan aplikasi Anda dalam sebuah wadah tetapi juga memungkinkan untuk berkembang di mana saja dan dari perangkat apa pun.

Mari kita mulai!

Apa itu Codespace GitHub?

Ruang kode Github adalah lingkungan cloud yang dapat diakses dari browser dan memiliki semua fitur yang diperlukan untuk mengembangkan kode khusus.

Anda mungkin pernah melihat pengumuman GitHub, setiap kali Anda berada di repo dan menekan periode “kunci.” Editor web akan terbuka dengan repositori yang dimaksud.

Namun, Anda tidak akan dapat menjalankan terminal karena ini hanyalah editor web dan tidak ada mesin backend. Terkadang ini bisa lebih dari cukup, tetapi bayangkan Anda perlu menjalankan lingkungan atau mengkompilasi proyek tetapi Anda tidak memiliki sistem yang memenuhi kebutuhan (iPad, Surface Go, dll.) di tangan.

GitHub Codespaces memecahkan masalah ini dengan memungkinkan Anda menjalankan IDE di cloud agar berfungsi seolah-olah Anda menggunakan sistem lokal dan itu juga dengan konfigurasi yang Anda tentukan.

Catatan: Fitur ini hanya tersedia di akun Tim dan Perusahaan.

Kode sampel

Untuk contoh ini saya akan menggunakan aplikasi Node.js yang sangat sederhana:

 const express = require('express'); const app = express(); const port = 8080; app.use(express.static('public')); app.get('/', (req, res) => { res.sendFile(__dirname + '/index.html'); }) app.listen(port, () => { console.log(`Example app listening at http://localhost:${port}`); })

Kode di atas memiliki struktur sebagai berikut:

Anda dapat meluncurkan proyek ini secara lokal tanpa masalah, selama Anda telah menginstal Node.js, git, dan ekstensi Kode VS yang berguna untuk proyek dalam bahasa ini. Anda mungkin juga ingin menggunakan alat seperti Nodemon, yang akan menyegarkan aplikasi secara otomatis.

Masalah muncul ketika Anda tidak hanya bekerja dengan konfigurasi ini tetapi menggunakan banyak lainnya seperti pengembangan dengan .NET Core, Python, Docker, atau Kubernetes dan itu membuat Anda menginstal lebih banyak alat dan ekstensi yang tidak selalu Anda butuhkan, dan mereka pada akhirnya dapat merusak kinerja lingkungan pengembangan Anda.

Masalahnya tidak terbatas pada kinerja Anda sendiri. Jika orang lain bergabung dengan tim dan perlu "siap" sistem mereka dengan alat dan kerangka kerja yang diperlukan untuk memulai aplikasi, maka mereka juga akan kehilangan beberapa jam yang akan merusak kinerja tim secara keseluruhan (akan menjadi lebih buruk jika Anda bekerja menggunakan sistem operasi yang berbeda).

Bekerja dengan Kontainer Jarak Jauh

Visual Studio Code menawarkan ekstensi yang disebut Remote Containers , atau Dev Containers, yang memungkinkan Anda menghasilkan lingkungan pengembangan yang dibutuhkan aplikasi Anda dalam sebuah wadah. Dengan cara ini, semua pengembang di tim Anda yang mengerjakan proyek akan memiliki lingkungan pengembangan yang sama secara otomatis.

Ini akan membuat pengalaman memulai proyek Anda seakurat mungkin dan juga jika Anda adalah orang yang telah menentukan lingkungan, Anda dapat memisahkan beberapa lingkungan kerja per proyek dengan konfigurasi berbeda pada mesin yang sama. Keren ya?

Bagaimana cara memulai?

Untuk menggunakan fitur ini, Anda harus menginstal Docker di mesin Anda karena container akan berjalan di dalamnya. Anda juga perlu menginstal ekstensi Remote Containers, yang akan membantu kami membangun lingkungan pengembangan.

Hal pertama yang perlu Anda lakukan adalah membuat folder bernama .devcontainer di direktori root. Ini adalah ekstensi yang akan coba diidentifikasi untuk mengetahui apakah ia memiliki konfigurasi untuk memasang wadah dengan indikasi yang disertakan di dalamnya.

Di dalamnya, Anda harus memiliki setidaknya satu file bernama devcontainer.json yang merupakan salah satu yang akan memiliki konfigurasi lingkungan.

Untuk contoh ini saya telah menggunakan yang berikut ini:

 { "name": "dev-demo", "dockerFile": "Dockerfile", "forwardPorts": [ 8080 ], "settings": { "workbench.colorTheme": "Visual Studio Light" }, "containerEnv": { "NODE_ENV": "development", }, "extensions": [ "coenraads.bracket-pair-colorizer-2", "eg2.vscode-npm-script", "christian-kohler.npm-intellisense", "dbaeumer.vscode-eslint", "streetsidesoftware.code-spell-checker", "formulahendry.auto-close-tag", "mikestead.dotenv", "christian-kohler.path-intellisense", "davidanson.vscode-markdownlint", "pkief.material-icon-theme", "humao.rest-client" ], "postCreateCommand": "/bin/bash -c .devcontainer/post-create.sh", "postAttachCommand": "nodemon server.js" }

Seperti yang Anda lihat, ini adalah JSON dengan bagian yang berbeda:

• name : itu adalah nama yang akan dimiliki wadah dev. Idealnya, ini harus berupa nama deskriptif.
• dockerFile : digunakan untuk menunjukkan nama Dockerfile yang akan kita gunakan untuk membuat lingkungan. Dalam kasus saya, di folder .devcontainer yang sama, saya punya satu seperti berikut:

 FROM node:12.16.1-alpine WORKDIR /code RUN apk update && apk upgrade \ && apk add git bash curl \ && npm install -g nodemon COPY . .

Dalam contoh ini, saya menggunakan node: 12.16.1-alpine image hanya untuk menunjukkan bahwa konfigurasi yang saya miliki dalam lingkungan pengembangan ini berbeda dari yang saya miliki secara lokal, di mana saya menggunakan Node.js versi 14. Di sisi lain, saya menginstal beberapa utilitas seperti git, bash, dan cURL, selain modul Nodemon yang akan saya gunakan selama pengembangan.

• fordwardPorts : ini adalah port yang digunakan aplikasi saya sehingga saya dapat mengaksesnya dari mesin lokal dan debugging menjadi mudah.
• settings : untuk contoh ini, dan ketika Anda memiliki banyak lingkungan, ini sangat berguna, saya telah memodifikasi tema Visual Studio Code sehingga terbukti bahwa saya tidak berada di lingkungan lokal dalam instance IDE tersebut. Saya biasanya menggunakan versi gelap dan di sini saya telah mengatur versi terang.
• containerEnv : Saya juga telah menambahkan variabel lingkungan, yang biasanya sangat berguna saat berkembang.
• postCreateCommand : Saya telah menambahkan properti ini sehingga Anda dapat melihat bahwa dimungkinkan untuk mengeksekusi perintah atau skrip selama siklus hidup wadah dev. Dalam hal ini, skrip ini akan diluncurkan saat pembuatan selesai. Isi dari ini adalah:

   #!/bin/bash # this runs in background after UI is available #Remove node_modules folder echo "Remove node_modules folder first" rm -rf node_modules #Install npm dependencies echo "Install dependencies" npm install

• postAttachCommand: Akhirnya saya telah menambahkan perintah nodemon server.js ke properti ini sehingga setiap kali Anda menghubungkan ke wadah itu akan secara default mengangkat aplikasi.

Ada lebih banyak opsi untuk ditambahkan ke file devcontainer.json, ini hanyalah contoh kecil dari apa yang dapat Anda lakukan.

Sekarang setelah Anda mengetahui semua yang ada di folder ini dan cara kerja konfigurasi yang ditentukan, bagaimana kami meluncurkannya?

Cara termudah adalah melalui tombol ini di sini:

Pilih opsi Buka Kembali di Penampung dan proses akan mulai membuat wadah dan IDE khusus Anda. Hasilnya akan terlihat seperti berikut:

Pada akhirnya, hasilnya, dalam hal ini, akan menjadi jendela Visual Studio Code dengan tema Light, dengan versi Node.js tertentu, beberapa ekstensi yang dipilih untuk dikembangkan lebih nyaman, dan aplikasi saya sudah berjalan dan diekspos oleh port 8080.

Dan bagian terbaiknya adalah: konfigurasi ini diversi dalam repo proyek sehingga setiap anggota dapat menggunakannya. Cukup spektakuler!

Sekarang kita telah melihat semua ini, dan kita telah memahami semua langkah, hapus folder .devcontainer, pilih ikon di kiri bawah lagi, pilih Buka kembali di Wadah lagi dan Anda akan melihat bahwa kali ini memungkinkan Anda memilih di antara beberapa pra -konfigurasi yang dibangun.

Anda tidak perlu memulai konfigurasi Anda dari awal, dan juga Anda sudah tahu di mana Anda harus menyentuh untuk menyelesaikan memberikan sentuhan nerd Anda.

Kembali ke Github Spaces

Sekarang kita akan menggunakan proyek yang sama yang kita gunakan di Visual Studio Remote Containers, tapi kali ini dengan GitHub. Setelah ini selesai di bagian Kode Anda akan memiliki opsi baru yang disebut Codespaces:

Di sini Anda dapat memilih jenis mesin yang Anda butuhkan untuk bekerja dengan repositori khusus ini:

Setelah dipilih, proses pembuatan akan dimulai. Ini akan menggunakan konfigurasi folder .devcontainer, yang kami buat untuk Remote Containers, untuk mengonfigurasi lingkungan.

Setelah proses selesai, Anda akan melihat bahwa Kode Visual Studio akan muncul dalam format web dengan aplikasi yang berjalan, dengan cara yang sama seperti yang kami lakukan pada sistem lokal kami.

Kata-kata Terakhir

Seperti yang Anda lihat pada contoh di atas, Github Codespaces menggunakan Remote Containers adalah solusi yang sangat baik untuk masalah kita mereplikasi konfigurasi dan lingkungan pengembangan kita dan juga merupakan cara yang bagus untuk meningkatkan kinerja tim kita.