Memanfaatkan Visual Studio Code untuk Melakukan Remote Development di AWS Cloud9
Published: 2020-04-03 05:56:24

*Ketika anda mengikuti tutorial dari tulisan ini, mungkin anda akan dikenakan biaya karena melewati batas [free tier](https://aws.amazon.com/free/?all-free-tier.sort-by=item.additionalFields.SortRank&all-free-tier.sort-order=asc) ketika menggunakan AWS resources.*

Dikutip dan diterjemahkan dari [halaman resminya](https://aws.amazon.com/cloud9/), AWS Cloud9 adalah cloud-based [Integrated Development Environment (IDE)](https://en.wikipedia.org/wiki/Integrated_development_environment) yang memungkinkan kita untuk menulis kode, menjalankan kode dan melakukan [debugging](https://en.wikipedia.org/wiki/Debugging) dengan menggunakan browser. Selain itu, Cloud9 juga sudah dilengkapi terminal terintegrasi untuk kita menjalankan CLI command secara interaktif.

Cloud9 tidak bekerja sendirian, tetapi menggunakan [Amazon EC2](https://aws.amazon.com/ec2/) sebagai sumber daya komputasinya. Ketika kita [membuat sebuah environment](https://docs.aws.amazon.com/cloud9/latest/user-guide/tutorial-create-environment.html) di Cloud9, maka secara otomatis Cloud9 akan menggunakan [Amazon Machine Image (AMI) khusus](https://docs.aws.amazon.com/cloud9/latest/user-guide/ami-contents.html) yang di dalamnya sudah terinstall beberapa packages yang mungkin kita perlukan saat melakukan development.

Berikut adalah diagram yang diambil dari [halaman dokumentasi Cloud9](https://docs.aws.amazon.com/cloud9/latest/user-guide/welcome.html) tentang bagaimana Cloud9 dan EC2 bekerja bersamaan.

![cloud9-arch](https://dev-to-uploads.s3.amazonaws.com/i/1bmob0gdn8i4qtyuoi71.png)

Salah satu keuntungan menggunakan Cloud IDE adalah memungkinkan kita dapat dengan lebih leluasa melakukan komputasi ketika development, karena kita mempunyai sumber daya komputasi awan yang besar (tergantung dari besarnya EC2), tidak dibatasi dari besarnya komputasi laptop/komputer kita.

Nah, tetapi terkadang kita punya IDE favorit, juga plugins/extensions favorit pada IDE tersebut, sehingga kita tetap ingin menggunakan IDE tersebut. Tulisan ini akan membahas bagaimana kita tetap bisa menggukanan IDE favorit pada laptop kita, tetapi secara bersamaan juga menggunakan sumber daya komputasi awan di belakangnya.



### Langkah 1: Membuat Environment di Cloud9 dan 

1. Masuk ke [AWS Console](https://console.aws.amazon.com/), lalu klik Services dan pilih Cloud9.

2. Klik Create Environment, lalu beri nama `cloud9-and-vscode`.
3. Klik Next Step dan biarkan semua opsi default.
4. Klik Next Step untuk memastikan semua konfigurasi sudah benar.
5. Klik Create Environment.

Selain menggunakan AWS Console, kita bisa juga menggunakan [AWS CLI](https://aws.amazon.com/cli/) untuk membuat environment Cloud9 secara programatik.

```bash
aws cloud9 create-environment-ec2 --name "cloud9-and-vscode" --instance-type "t2.micro"
```



### Langkah 2: Mengatur [Security Groups](https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/ec2-security-groups.html) pada Instance EC2

Setelah itu, jangan lupa untuk menambahkan IP laptop kita ke security group EC2 instance, supaya kita bisa melakukan koneksi SSH. Caranya seperti di bawah ini.

1. Masuk ke AWS Console, lalu klik Services dan pilih EC2.
2. Di sidebar sebelah kiri, klik Instances. Kemudian, pilih instance Cloud9 anda, dan pastikan anda sudah berada di tab Description. Lalu klik security group seperti pada gambar.

![cloud9-security-groups](https://dev-to-uploads.s3.amazonaws.com/i/b6i3kr26nw7nw8ja3sgy.png)

3. Setelah masuk pada halaman ini, di panel bagian bawah, pastikan anda sudah berada di tab Inbound Rules. Lalu, klik Edit Inbound Rules.

![cloud9-security-groups-1](https://dev-to-uploads.s3.amazonaws.com/i/ma0zn1jbexan5kjt8tqp.png)

4. Klik Add Rule. Pilih SSH pada kolom Type, dan pilih My IP pada kolom Source. Kemudian klik Save Rules.

![cloud9-security-groups-2](https://dev-to-uploads.s3.amazonaws.com/i/hbamzgpev9y6id3pbp4x.png)



### Langkah 3: Instalasi Visual Studio Code dan Extension yang Diperlukan

1. Download [Visual Studio Code (VSCode)](https://code.visualstudio.com/) sesuai dengan OS anda, lalu lakukan instalasi seperti biasa.
2. Lakukan instalasi extension `Remote - SSH` pada VSCode (lihat gambar berikut).

![vscode-extension](https://dev-to-uploads.s3.amazonaws.com/i/kicbbtzzfgh1m216tqky.png)



### Langkah 4: Melakukan Konfigurasi SSH pada Laptop/Komputer Lokal

1. Pada laptop anda, tambahkan entry berikut pada file `~/.ssh/config` menggunakan text editor favorit anda. Jangan lupa ganti variabel `PUBLIC_IP_EC2_CLOUD9` dengan IP publik EC2 anda.

   ```
   Host c9-ide
       HostName PUBLIC_IP_EC2_CLOUD9
       User ec2-user
   ```

2. Tambahkan public key laptop anda pada EC2 yang digunakan oleh Cloud9 dengan menggunakan integrated terminal Cloud9. Tambahkan entry public key pada file `~/.ssh/authorized_keys`.

   

### Langkah 5: Menambahkan SSH Target dan Remote Folder

1. Tambahkan SSH target pada VSCode (lihat gambar berikut).

![vscode-add-new-host](https://dev-to-uploads.s3.amazonaws.com/i/hp21p531o1p4sbat824q.png)

2. Tambahkan folder pada EC2 yang akan dibuka pada Cloud9 (lihat gambar berikut). Masukkan `/home/ec2-user/environment`, lalu klik OK.

![vscode-add-new-folder](https://dev-to-uploads.s3.amazonaws.com/i/rpnpxvptdcjpvbx8k6si.png)



### Langkah 6: Selesai. Yuk, Mulai Menulis Kode di Visual Studio Code!

Setelah menyelesaikan langkah-langkah sebelumnya, ini adalah  tangkapan layar VSCode yang telah berhasil mengakses environment Cloud9.

![vscode-access-cloud9](https://dev-to-uploads.s3.amazonaws.com/i/95pskyf1xlylzpte1hly.png)

Hal ini memungkinkan kita untuk melakukan development di IDE lokal, tetapi menggunakan sumber daya komputasi awan yang secara umum kapasitasnya akan lebih besar dibandingkan sumber daya komputasi lokal laptop kita.



*Selamat mencoba!*



Setelah mencoba tutorial ini, jangan lupa untuk melakukan cleanup AWS resource-nya ya. Supaya tidak kena biaya.



&nbsp;

*Menemukan kesalahan dalam tulisan ini? [Kasih tau saya](mailto:teddy.aryono@gmail.com) ya!*