Latihan - Menambahkan kontainer pengembangan ke proyek yang sudah ada

  • 4 menit

Saat menyiapkan kontainer pengembangan untuk proyek, Anda harus menambahkan konfigurasi kontainer ke proyek tersebut terlebih dahulu. Konfigurasi kontainer mengatur lingkungan Anda di Visual Studio Code.

Dalam latihan ini, Anda akan menambahkan kontainer pengembang dan membuka proyek Dasbor Produk di kontainer.

Menambahkan kontainer pengembangan

  1. Kembali ke Visual Studio Code dan proyek yang Anda kloning sebelumnya.

  2. Tekan F1 untuk membuka Palet Perintah.

  3. Ketik tambahkan kontainer dev dan pilih Kontainer Dev: Tambahkan File Konfigurasi Kontainer Pengembangan. Ini menyajikan daftar Templat Kontainer Dev. Templat berisi file sumber yang diperlukan untuk mengonfigurasi lingkungan pengembangan lengkap untuk tumpukan teknologi yang ditentukan.

  4. Pilih Tambahkan konfigurasi ke ruang kerja.

  5. Pilih opsi berikut:

    Opsi Nilai
    Pilih templat konfigurasi kontainer Python 3
    Versi Python 3.11
    Pilih fitur tambahan untuk diinstal Pilih OK

Penting

Pada langkah pertama saat memilih templat konfigurasi, Anda mungkin perlu memilih "Tampilkan Semua Definisi..." dari daftar, lalu pilih Python setelah kumpulan templat lengkap dimuat.

Konfigurasi Dev Container akan ditambahkan ke proyek Anda. Visual Studio Code akan memberi tahu bahwa Anda sekarang dapat membuka proyek dalam kontainer. Untuk saat ini, tutup pemberitahuan ini.

Memeriksa file konfigurasi

  1. Perhatikan bahwa folder baru bernama '.devcontainer' telah ditambahkan ke proyek.
  2. Perluas folder tersebut dan perhatikan bahwa folder tersebut berisi file devcontainer.json.

Buka proyek dalam kontainer

  1. Tekan F1 untuk membuka Palet Perintah.
  2. Ketik buka kembali dalam kontainer.
  3. Pilih Kontainer Dev: Buka kembali di Kontainer dari daftar opsi yang tersedia.

Kontainer akan mulai mengompilasi. Kompilasi awal mungkin memerlukan waktu beberapa menit, karena citra baru harus ditarik ke bawah dan dibangun pada komputer Anda. Setelah kontainer telah dikompilasi pertama kali, proses kompilasi berikutnya akan jauh lebih cepat.

Melihat Indikator Jarak Jauh

Ketika build kontainer selesai, Anda dapat mengonfirmasi bahwa Anda tersambung ke kontainer dengan memeriksa Indikator Jarak Jauh. Anda sekarang juga akan melihat file proyek Anda dimuat dalam VS Code.

  • Periksa Indikator Jarak Jauh dengan melihat sudut kiri bawah VS Code. Perhatikan bahwa sekarang menampilkan "Dev Container: Python 3".

    Cuplikan layar Indikator Jarak Jauh dengan teks yang bertuliskan kontainer pengembangan python 3

Penting

Anda mungkin melihat pemberitahuan tentang Pylance atau meningkatkan performa di Windows. Anda dapat dengan aman mengabaikan notifikasi apa pun yang Anda lihat di VS Code. Anda tidak perlu melakukan hal-hal itu.

Memeriksa kontainer

  1. Tekan Ctrl + ` untuk membuka terminal yang terintegrasi di Visual Studio Code jika belum terbuka.

  2. Perhatikan bahwa perintah terminal mungkin terlihat berbeda dari perintah terminal normal Anda.

    Perintah terminal terintegrasi VS Code

  3. Jalankan perintah berikut untuk memastikan Python terinstal:

    python --version

    Output terminal harus berupa versi Python yang digunakan dalam kontainer.

Menginstal dependensi proyek

  • Jalankan perintah berikut di terminal untuk menginstal dependensi Flask yang Anda butuhkan untuk menjalankan proyek:

    pip3 install --user -r requirements.txt

Jalankan proyek

  1. Masukkan perintah berikut di terminal untuk memulai proyek:

    python app.py

  2. Buka proyek di browser dengan menavigasi ke http://127.0.0.1:5000.

    Cuplikan layar aplikasi Dasbor Produk Python.

Bagus sekali! Anda memiliki aplikasi web Python yang menjalankan Flask di komputer, dan Anda mungkin tidak tahu apa itu. Tidak masalah! Anda tidak perlu mengetahuinya. Kontainer mengurus pengaturan seluruh lingkungan.

Di bagian berikutnya, Anda akan mempelajari cara menggunakan devcontainer.json file untuk mengotomatiskan penginstalan dependensi dan menyesuaikan Visual Studio Code untuk proyek Python ini.