Tutorial: Membuat aplikasi kontainer dengan Visual Studio Code

2025-05-14

Tutorial ini adalah awal dari seri empat bagian yang memperkenalkan Docker untuk digunakan dengan Visual Studio Code (VS Code). Anda akan belajar membuat dan menjalankan kontainer Docker, menyimpan data, dan mengelola beberapa kontainer dengan Docker Compose.

Visual Studio Code menawarkan ekstensi Alat Kontainer yang memungkinkan Anda bekerja dengan layanan Docker Desktop lokal. Docker Desktop berjalan di komputer Anda dan mengelola kontainer lokal Anda, yang merupakan lingkungan virtual ringkas yang menyediakan platform untuk membangun dan menjalankan aplikasi. Kontainer tidak memerlukan ukuran besar dan overhead dari sebuah sistem operasi lengkap.

Dalam tutorial pertama ini, Anda mempelajari cara:

Buat kontainer Docker.
Buat gambar kontainer.
Mulai kontainer aplikasi.

Prasyarat

Visual Studio Code terinstal.
Ekstensi Alat Kontainer VS Code terinstal.
Docker Desktop dikonfigurasi untuk menggunakan kontainer Linux.
Akun Docker Hub. Anda dapat membuat akun secara gratis.

Tutorial ini berfungsi dengan Windows 10 atau yang lebih baru dan Docker Desktop dikonfigurasi untuk menggunakan kontainer Linux.

Membuat kontainer

Kontainer adalah proses pada komputer Anda. Ini terisolasi dari semua proses lain di komputer host. Isolasi tersebut menggunakan namespace kernel dan kelompok kontrol.

Kontainer menggunakan sistem file terisolasi. Sistem file kustom ini disediakan oleh gambar kontainer . Gambar berisi semua yang diperlukan untuk menjalankan aplikasi, seperti semua dependensi, konfigurasi, skrip, dan biner. Gambar juga berisi konfigurasi lain untuk kontainer, seperti variabel lingkungan, perintah default untuk dijalankan, dan metadata lainnya.

Setelah menginstal ekstensi Alat Kontainer untuk Visual Studio Code, Anda dapat bekerja dengan kontainer di Visual Studio Code. Selain menu konteks di Container Explorer, Anda dapat memilihTerminal Baru> untuk membuka jendela baris perintah. Anda juga dapat menjalankan perintah di jendela Bash. Kecuali ditentukan, perintah apa pun yang diberi label sebagai Bash dapat berjalan di jendela Bash atau terminal Visual Studio Code.

Atur Docker ke mode kontainer Linux. Untuk beralih ke kontainer Linux, jika saat ini Anda menggunakan kontainer Windows, klik kanan ikon Docker di baki sistem ketika Docker Desktop sedang berjalan, lalu pilih Beralih ke kontainer Linux.
Di Visual Studio Code, pilih Terminal >Terminal Baru.
Di jendela terminal atau jendela Bash, jalankan perintah ini.
```
docker run -d -p 80:80 docker/getting-started
```
Perintah ini berisi parameter berikut:
- -d Jalankan kontainer dalam mode dilepaskan, di latar belakang.
- -p 80:80 Petakan port 80 host ke port 80 dalam kontainer.
- docker/getting-started Menentukan gambar yang akan digunakan.
Tips

Anda dapat menggabungkan bendera karakter tunggal untuk mempersingkat perintah lengkap. Sebagai contoh, perintah di atas dapat ditulis sebagai:
```
docker run -dp 80:80 docker/getting-started
```
Di Visual Studio Code, pilih ikon Kontainer di sebelah kiri untuk melihat Penjelajah Kontainer.

Ekstensi Container Tools VS Code menunjukkan kepada Anda kontainer yang berjalan di komputer Anda. Anda dapat mengakses log kontainer dan mengelola siklus hidup kontainer, seperti menghentikan dan menghapus.

Nama kontainer, modest_shockley dalam contoh ini, dibuat secara acak. Namamu akan berbeda.
Klik kanan pada docker/getting-started untuk membuka menu konteks. Pilih Buka di Browser.

Sebagai gantinya, buka browser dan masukkan http://localhost/tutorial/.

Anda akan melihat halaman, yang dihosting secara lokal, tentang DockerLabs.
Klik kanan pada docker/getting-started untuk membuka menu konteks. Pilih Hapus untuk menghapus kontainer ini.

Untuk menghapus kontainer dengan menggunakan baris perintah, jalankan perintah ini untuk mendapatkan ID kontainernya:
```
docker ps
```
Kemudian hentikan dan hapus kontainer:
```
docker stop <container-id>
docker rm <container-id>
```
Segarkan browser Anda. Halaman Memulai yang Anda lihat beberapa saat yang lalu hilang.

Membuat gambar kontainer untuk aplikasi

Tutorial ini menggunakan aplikasi Todo sederhana.

Cuplikan layar memperlihatkan aplikasi sampel dengan beberapa item ditambahkan dan kotak teks dan tombol untuk menambahkan item baru.

Aplikasi ini memungkinkan Anda membuat item kerja dan menandainya sebagai selesai atau menghapusnya.

Untuk membangun aplikasi, buat Dockerfile. Dockerfile adalah skrip instruksi berbasis teks yang digunakan untuk membuat gambar kontainer.

Buka Tutorial Memulai Docker repositori, lalu pilih kode >Unduh ZIP. Ekstrak isi ke folder lokal.
Di Visual Studio Code, pilih File >Buka Folder. Navigasikan ke folder aplikasi di proyek yang diekstrak dan buka folder tersebut. Anda akan melihat file yang disebut package.json dan dua folder yang disebut src dan spesifikasi .
Buat file bernama Dockerfile di folder yang sama dengan file package.json dengan konten berikut.
```
FROM node:lts-alpine
RUN apk add --no-cache python3 g++ make
WORKDIR /app
COPY . .
RUN yarn install --production
CMD ["node", "/app/src/index.js"]
```
Nota

Pastikan bahwa file tidak memiliki ekstensi file seperti .txt.
Di penjelajah file, di sebelah kiri di VS Code, klik kanan Dockerfile lalu pilih Build Image. Masukkan memulai sebagai tag untuk gambar dalam kotak entri teks.

Tag adalah nama yang ramah untuk gambar.

Untuk membuat gambar kontainer dari baris perintah, gunakan perintah berikut dari folder app yang memiliki Dockerfile.
```
docker build -t getting-started .
```

Anda telah menggunakan Dockerfile untuk membangun gambar kontainer baru. Anda mungkin telah memperhatikan bahwa banyak "lapisan" diunduh. Dockerfile dimulai dari image node:lts-alpine. Kecuali gambar itu sudah ada di komputer Anda, gambar itu perlu diunduh.

Setelah gambar diunduh, Dockerfile menyalin aplikasi Anda dan menggunakan yarn untuk menginstal dependensi aplikasi Anda. Nilai CMD dalam Dockerfile menentukan perintah default yang akan dijalankan saat memulai kontainer dari gambar ini.

. di akhir perintah docker build memberi tahu bahwa Docker harus mencari Dockerfile di direktori saat ini.

Memulai kontainer aplikasi Anda

Sekarang setelah Anda memiliki gambar, Anda dapat menjalankan aplikasi.

Untuk memulai kontainer Anda, gunakan perintah berikut.
```
docker run -dp 3000:3000 getting-started
```
Parameter -d menunjukkan bahwa Anda menjalankan kontainer dalam mode terpisah, di latar belakang. Nilai -p membuat pemetaan antara port host 3000 dan port kontainer 3000. Tanpa pemetaan port, Anda tidak akan dapat mengakses aplikasi.
Setelah beberapa detik, di Visual Studio Code, di Penjelajah Kontainer, di bawah KONTAINER, klik kanan memulai dan pilih Buka di Browser. Sebagai gantinya, Anda dapat membuka browser web Anda ke http://localhost:3000.

Anda akan melihat aplikasi berjalan.
Tambahkan satu atau dua item untuk diuji jika berfungsi seperti yang Anda harapkan. Anda dapat menandai item sebagai selesai dan menghapus item. Frontend Anda berhasil menyimpan item di backend.

Langkah berikutnya

Anda telah menyelesaikan tutorial ini dan Anda memiliki manajer daftar todo yang sedang berjalan dengan beberapa item. Anda telah belajar membuat gambar kontainer dan menjalankan aplikasi kontainer.

Simpan semua yang telah Anda lakukan sejauh ini untuk melanjutkan rangkaian tutorial ini. Selanjutnya, coba bagian II dari seri ini:

Memperbarui dan berbagi aplikasi kontainer

Berikut adalah beberapa sumber daya yang mungkin berguna bagi Anda:

Bagikan melalui