Bagikan melalui

Tutorial: Berbagi aplikasi kontainer dengan Visual Studio Code

Tutorial ini adalah bagian kedua dari seri empat bagian yang memperkenalkan Docker untuk digunakan dengan Visual Studio Code (VS Code).

Dalam tutorial ini, Anda akan belajar cara:

  • Perbarui kode dan ganti kontainer.
  • Bagikan gambar Anda.
  • Jalankan gambar pada instans baru.

Prasyarat

Tutorial ini melanjutkan tutorial sebelumnya, Membuat aplikasi kontainer dengan Visual Studio Code. Untuk melanjutkan di sini, Anda memerlukan manajer daftar todo yang sedang berjalan dari bagian 1.

Memperbarui kode dan mengganti kontainer

Mari kita buat beberapa perubahan dan pelajari tentang mengelola kontainer Anda.

  1. src/static/js/app.js Dalam file, perbarui baris 56 untuk menggunakan label teks baru ini:

    - <p className="text-center">No items yet! Add one above!</p>
+ <p className="text-center">You have no todo items yet! Add one above!</p>

    Simpan perubahan Anda.

  2. Hentikan dan hapus versi kontainer saat ini. Lebih dari satu kontainer tidak dapat menggunakan port yang sama.

    Klik kanan kontainer memulai dan pilih Hapus.

    Cuplikan layar memperlihatkan ekstensi Alat Kontainer dengan kontainer dipilih dan menu konteks dengan Hapus dipilih.

    Atau, dari baris perintah, gunakan perintah berikut untuk mendapatkan ID kontainer.

    docker ps

    Kemudian hentikan dan hapus kontainer:

    docker stop <container-id>
docker rm <container-id>

  3. Buat versi gambar yang diperbarui. Di penjelajah file, klik kanan Dockerfile, lalu pilih Bangun Gambar.

    Atau, untuk membangun pada baris perintah, ubah direktori ke folder yang berisi Dockerfile, dan gunakan perintah yang sama dengan yang Anda gunakan sebelumnya.

    docker build -t getting-started .

  4. Mulai kontainer baru yang menggunakan kode yang diperbarui.

    docker run -dp 3000:3000 getting-started

  5. Segarkan browser Anda pada http://localhost:3000 untuk melihat teks bantuan yang diperbarui.

    Cuplikan layar memperlihatkan aplikasi sampel dengan teks yang dimodifikasi, dijelaskan di atas.

Bagikan gambar Anda

Setelah membuat gambar, Anda dapat membagikannya. Untuk berbagi gambar kontainer, gunakan registri kontainer. Registri default adalah Docker Hub, yang merupakan tempat asal semua gambar yang kami gunakan.

Untuk mengunggah gambar, pertama Anda perlu membuat repositori di Docker Hub.

  1. Buka Docker Hub dan masuk ke akun Anda.

  2. Pilih Buat Repositori.

  3. Untuk nama repositori, masukkan getting-started. Pastikan visibilitas adalah Publik.

  4. Pilih Buat.

    Di sebelah kanan halaman, Anda akan melihat bagian bernama perintah Docker. Bagian ini memberikan contoh perintah yang bisa dijalankan untuk melakukan push ke repositori ini.

    Cuplikan layar memperlihatkan halaman Docker Hub dengan perintah Docker yang disarankan.

  5. Di Visual Studio Code, di Penjelajah Kontainer, di bawah REGISTRI, klik ikon plug, untuk menyambungkan ke registri, dan pilih Docker Hub.

    Masukkan nama akun dan kata sandi Docker Hub Anda.

  6. Di Container Explorer pada Visual Studio Code, di bawah IMAGES, klik kanan tag gambar, dan pilih Push. Masukkan namespace dan tag, atau terima default.

  7. Untuk mendorong ke Docker Hub dengan menggunakan baris perintah, gunakan prosedur ini.

    Masuk ke Docker Hub:

    docker login -u <username>

  8. Gunakan perintah berikut untuk beri nama baru pada gambar getting-started.

    docker tag getting-started <username>/getting-started

  9. Gunakan perintah berikut untuk mendorong kontainer Anda.

    docker push <username>/getting-started

Menjalankan gambar pada instans baru

Sekarang setelah gambar Anda dibangun dan didorong ke registri, coba jalankan aplikasi pada instans baru yang belum pernah melihat gambar kontainer ini. Untuk menjalankan aplikasi Anda, gunakan Play with Docker.

  1. Buka browser Anda untuk Bermain dengan Docker.

  2. Masuk dengan akun Docker Hub Anda.

  3. Pilih Mulai lalu pilih tautan + TAMBAHKAN INSTANS BARU di bilah sisi kiri. Setelah beberapa detik, jendela terminal terbuka di browser Anda.

    Cuplikan layar memperlihatkan situs Play with Docker dengan tautan tambahkan instans baru.

  4. Di terminal, mulai aplikasi Anda.

    docker run -dp 3000:3000 <username>/getting-started

    Bermain dengan Docker menarik gambar Anda dan memulainya.

  5. Pilih lencana 3000 , di samping BUKA PORT. Anda seharusnya dapat melihat aplikasi dengan modifikasi Anda.

    Jika lencana 3000 tidak muncul, pilih BUKA PORT dan masukkan 3000.

Membersihkan sumber daya

Simpan semua yang telah Anda lakukan sejauh ini untuk melanjutkan rangkaian tutorial ini.

Langkah selanjutnya

Selamat. Anda telah menyelesaikan bagian 2 dan mempelajari cara memperbarui kode dan menjalankan gambar Anda pada instans baru.

Berikut adalah beberapa sumber daya yang mungkin berguna bagi Anda:

Selanjutnya, coba tutorial berikutnya dalam seri ini:

Menyimpan data dan menggabungkan aplikasi Docker