Mulai cepat: Menggunakan Docker dengan aplikasi React Single-page di Visual Studio

Dengan Visual Studio, Anda dapat dengan mudah membuat, men-debug, dan menjalankan aplikasi ASP.NET Core dalam kontainer, termasuk yang memiliki JavaScript sisi klien seperti React.js aplikasi halaman tunggal (SPA), dan menerbitkannya ke Azure Container Registry, Docker Hub, Azure App Service, atau Container Registry Anda sendiri. Dalam artikel ini, kami menerbitkan ke Azure Container Registry.

Prasyarat

• Desktop Docker
• Visual Studio 2022 dengan beban kerja Pengembangan Web, Alat Azure, dan/atau beban kerja pengembangan .NET Core lintas platform yang terpasang
• Untuk menerbitkan ke Azure Container Registry, langganan Azure. Daftar untuk percobaan gratis.
• Node.js
• Untuk kontainer Windows, Windows 10 versi 1809 atau yang lebih baru, untuk menggunakan gambar Docker yang dirujuk dalam artikel ini.

Penginstalan dan konfigurasi

Untuk penginstalan Docker, pertama-tama tinjau informasi di Desktop Docker untuk Windows: Apa yang perlu diketahui sebelum Anda menginstal. Berikutnya, pasang Desktop Docker.

Membuat proyek dan menambahkan dukungan Docker

Ikuti langkah-langkah ini jika Anda menggunakan Visual Studio 2022 versi 17.8 atau yang lebih baru:

1. Buat proyek baru menggunakan templat React dan ASP.NET Core .

   

2. Pada layar Informasi tambahan, pilih Aktifkan dukungan kontainer. Pastikan untuk memilih opsi Dockerfile , karena Anda harus membuat perubahan secara manual pada file tersebut.

   

   Catatan

   Di beberapa versi Visual Studio 2022, opsi ini tidak diaktifkan, tetapi Anda dapat menambahkan dukungan tersebut nanti.

   Visual Studio membuat dua proyek - satu untuk kode klien React JavaScript, dan satu lagi untuk kode server ASP.NET Core C#.

3. Jika Anda tidak menambahkan dukungan kontainer Docker selama pembuatan proyek, klik kanan pada simpul proyek server, dan pilih Tambahkan>Dukungan Docker dan pastikan untuk memilih opsi Dockerfile untuk membuat Dockerfile.

   

4. Pilih jenis kontainer.

Gunakan langkah-langkah berikut untuk Visual Studio 2022 versi 17.0 hingga 17.7:

1. Buat proyek baru menggunakan ASP.NET Core dengan templat React.js.

   

2. Pada layar Informasi tambahan, Anda tidak dapat memilih Aktifkan Dukungan Docker, tetapi jangan khawatir, Anda dapat menambahkan dukungan tersebut nanti.

   

3. Klik kanan pada node proyek, dan pilih Tambahkan>Dukungan Docker untuk menambahkan Dockerfile ke proyek Anda.

   

4. Pilih jenis kontainer.

Debug

Dengan Visual Studio 2022 versi 17.9 atau yang lebih baru dan templat React dan ASP.NET Core yang menggunakan vite.js, proyek sudah dikonfigurasi untuk memulai proyek klien dan server dengan dukungan debugging, tetapi Anda perlu menyiapkan port yang tepat untuk proksi aplikasi halaman tunggal (SPA) yang digunakan untuk mengakses server ASP.NET Core yang berjalan di kontainer. Anda bisa mendapatkan port host dari jendela Kontainer di Visual Studio dan mengaturnya di proyek React seperti yang dijelaskan di Membuat aplikasi React - Docker.

Anda juga dapat menonaktifkan peluncuran di browser untuk server, yang disiapkan untuk dibuka dengan Swagger, yang tidak diperlukan untuk skenario ini. Untuk menonaktifkan peluncuran browser, buka Properti (Alt+Enter), buka tab Debug, dan klik tautan Buka antarmuka pengguna profil peluncuran debug, dan kosongkan kotak centang Luncurkan browser.

Jika Anda menggunakan versi Visual Studio 2022 yang lebih lama, lanjutkan membaca untuk menyiapkan penelusuran kesalahan dengan server proksi aplikasi halaman tunggal (SPA).

Proyek menggunakan Proksi SPA selama penelusuran kesalahan. Lihat Templat aplikasi halaman tunggal (SPA) yang disempurnakan. Saat penelusuran kesalahan, klien JavaScript berjalan di komputer host, tetapi kode server ASP.NET Core berjalan dalam kontainer. Saat diterbitkan, proksi tidak dijalankan, dan kode klien berjalan di server yang sama dengan kode ASP.NET Core. Anda sudah memiliki profil Debug *Docker yang dapat Anda gunakan untuk men-debug kode server. Untuk men-debug kode klien JavaScript, Anda dapat membuat profil debug tambahan. Anda juga perlu memulai proksi secara manual dari prompt perintah saat men-debug JavaScript. Anda dapat membiarkannya berjalan melalui beberapa sesi debug.

1. Bangun proyek, jika belum dibangun.

2. Buka perintah dev Visual Studio, buka folder ClientApp di proyek Anda, lalu berikan perintah, npm run start. Anda seharusnya melihat sesuatu seperti berikut:

   Compiled successfully!
   
   You can now view project3_spa in the browser.
   
     Local:            https://localhost:44407
     On Your Network:  https://192.168.1.5:44407
   
   Note that the development build isn't optimized.
   To create a production build, use npm run build.
   
   webpack compiled successfully
   

   Catatan

   Perhatikan URL lokal. Anda perlu menyediakan ini di profil peluncuran debug, yang disimpan dalam file Anda launchSettings.json .

3. Buka daftar dropdown yang berisi profil debug (di samping ikon segitiga hijau atau tombol Mulai ), dan pilih {ProjectName} Properti Debug, dan pilih profil Docker .

4. Periksa bagian Variabel lingkungan dan tambahkan variabel lingkungan berikut jika belum ada:

   ASPNETCORE_ENVIRONMENT=Development,ASPNETCORE_HOSTINGSTARTUPASSEMBLIES=Microsoft.AspNetCore.SpaProxy

5. Atur URL ke https://localhost:{proxy-port} tempat {proxy-port} port dari server proksi (dari langkah 1).

   

   Tindakan ini mengubah entri Docker dalam launchSettings.json file dan meluncurkan URL yang benar untuk proksi lokal yang berjalan di host. launchSettings.json Temukan file di Penjelajah Solusi di bawah Properti.

6. Anda akan melihat sesuatu seperti kode berikut:

   "profiles": {
      "Docker": {
         "commandName": "Docker",
         "launchBrowser": true,
         "environmentVariables": {
           "ASPNETCORE_ENVIRONMENT": "Development",
           "ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Microsoft.AspNetCore.SpaProxy"
         },
         "launchUrl": "https://localhost:44407",
         "useSSL": true
      }
   }
   

   Penting

   Jangan atur opsi publishAllPorts pengaturan peluncuran ke true jika Anda menggunakan proksi. Opsi tersebut menerbitkan semua port yang diekspos ke port acak, yang tidak akan berfungsi saat Anda mengatur port tertentu di proksi SPA.

7. Buka file ClientApp/src/setupProxy.js dan ubah baris yang mengatur target untuk menggunakan localhost alamat dan port pada kontainer. Anda dapat menemukan port pada tab Port di jendela Kontainer.

   const target =  'https://localhost:{container-port}';
   

   Jika Anda menggunakan HTTPS, pastikan untuk memilih port yang tepat untuk HTTPS, yaitu 443 dalam tutorial ini.

8. Luncurkan aplikasi dengan penelusuran kesalahan (F5).

   

   Jika Anda mendapatkan kesalahan build yang mencoba menulis rakitan output, Anda mungkin harus menghentikan kontainer yang berjalan sebelumnya untuk membuka kunci file.

9. Verifikasi bahwa Anda dapat mencapai titik henti dalam kode JavaScript sisi klien dengan mengatur titik henti di ClientApp/src/components/Counter.js dalam fungsi incrementCounter , lalu coba tekan titik henti dengan mengklik tombol Kenaikan pada halaman Penghitung.

   

10. Selanjutnya, coba tekan titik henti di sisi server ASP.NET Kode inti. Atur titik henti dalam Get WeatherController.cs metode dan coba tambahkan /weatherforecast ke URL dasar localhost dan port untuk mengaktifkan kode tersebut.

    

11. Jika port kontainer berubah, yang dapat terjadi jika Anda membuat perubahan signifikan, seperti memperbarui launchSettings.json atau memperbarui profil peluncuran debug di IDE, Anda perlu memperbarui port di setupProxy.js dan juga memulai ulang proksi. Hentikan proksi saat ini (Ctrl+C di jendela perintah tempat proksi dijalankan), lalu mulai ulang menggunakan perintah npm run startyang sama .

Jendela Containers

Buka jendela alat Kontainer. Anda dapat menemukannya di menu di bawah Tampilkan>Jendela Lainnya>Kontainer, atau tekan Ctrl+Q dan mulai ketik containers di kotak pencarian, lalu pilih Jendela kontainer dari hasil. Saat jendela muncul, dock di bagian bawah di bawah panel editor.

Jendela Kontainer menunjukkan kontainer yang sedang berjalan dan memungkinkan Anda melihat informasi tentang kontainer tersebut. Anda dapat melihat variabel lingkungan, label, port, volume, sistem file, dan log. Tombol toolbar memungkinkan Anda membuat terminal (perintah shell) di dalam kontainer, melampirkan penelusur kesalahan, atau memangkas kontainer yang tidak digunakan. Lihat Menggunakan jendela Kontainer.

Klik pada tab File, dan perluas folder app untuk melihat file aplikasi yang diterbitkan.

Anda juga dapat melihat gambar dan memeriksa informasi tentang gambar tersebut. Pilih tab Gambar, temukan yang untuk proyek Anda, lalu pilih tab Detail untuk melihat file json yang berisi informasi tentang gambar.

Catatan

Gambar dev tidak berisi biner aplikasi dan konten lainnya, karena konfigurasi Debug menggunakan pemasangan volume untuk memberikan pengalaman pengeditan dan debug berulang. Untuk membuat gambar produksi yang berisi semua konten, gunakan konfigurasi Rilis.

Menerbitkan gambar Docker

Setelah siklus debug dan pengembangan aplikasi selesai, Anda dapat membuat gambar produksi aplikasi.

1. Ubah daftar dropdown konfigurasi menjadi Rilis dan buat aplikasi.

2. Klik kanan proyek Anda di Penjelajah Solusi dan pilih Terbitkan.

3. Pada dialog terbitkan target, pilih Docker Container Registry.

   

4. Selanjutnya, pilih Azure Container Registry.

   

5. Pilih Buat Azure Container Registry Baru.

6. Isi nilai yang Anda inginkan di layar Buat Azure Container Registry baru.

   Pengaturan	Nilai yang disarankan	Deskripsi
   Prefiks DNS	Nama unik secara global	Nama yang mengidentifikasi registri kontainer Anda secara unik.
   Langganan	Memilih langganan Anda	Langganan Azure untuk digunakan.
   Grup Sumber Daya	myResourceGroup	Nama grup sumber daya untuk membuat registri kontainer Anda. Pilih Baru untuk membuat grup sumber daya baru.
   SKU	Standard	Tingkat layanan registri kontainer
   Lokasi Registri	Lokasi yang dekat dengan Anda	Pilih Lokasi di wilayah di dekat Anda atau di dekat layanan lain yang menggunakan registri kontainer Anda.

   

7. Pilih Buat, lalu pilih Selesai.

   

   Saat proses penerbitan berakhir, Anda dapat meninjau pengaturan penerbitan, dan mengeditnya, saat diperlukan, atau menerbitkan gambar lagi menggunakan tombol Terbitkan.

   

   Untuk mulai lagi menggunakan dialog Terbitkan, hapus profil terbitkan dengan menggunakan tautan Hapus di halaman ini, lalu pilih Terbitkan lagi.

Langkah berikutnya

Anda sekarang dapat menarik kontainer dari registri ke host apa pun yang mampu menjalankan gambar Docker, misalnya Azure Container Instances.

Sumber Daya Tambahan:

• Pengembangan kontainer dengan Visual Studio
• Memecahkan masalah pengembangan Visual Studio dengan Docker
• Repositori GitHub Alat Kontainer Visual Studio