Cara menggunakan terowongan dev di Visual Studio 2022 dengan aplikasi ASP.NET Core

Fitur dev tunnels Visual Studio 2022 memungkinkan koneksi ad-hoc antara mesin yang tidak dapat langsung terhubung satu sama lain. URL dibuat yang memungkinkan perangkat apa pun dengan koneksi internet untuk terhubung ke proyek ASP.NET Core saat berjalan di localhost.

Kasus penggunaan

Beberapa skenario yang dimungkinkan oleh terowongan dev:

• Uji aplikasi web di perangkat lain, seperti ponsel dan tablet.
• Uji aplikasi dengan layanan eksternal. Misalnya, uji dan debug konektor Power Platform, API Azure Communication Services, atau webhook Twilio.
• Buat aplikasi tersedia untuk sementara waktu bagi orang lain melalui internet, untuk presentasi atau mengundang orang lain untuk meninjau pekerjaan Anda di aplikasi web atau API.
• Sebagai alternatif untuk solusi penerusan port lainnya.

Prasyarat

• Visual Studio 2022 versi 17.6 atau yang lebih baru dengan workload ASP.NET dan pengembangan web terinstal. Anda harus masuk ke Visual Studio untuk membuat dan menggunakan dev tunnels.
• Satu atau beberapa proyek ASP.NET Core. Artikel ini menggunakan solusi dengan dua proyek sampel untuk menunjukkan fitur tersebut.

Buat terowongan

Untuk membuat terowongan:

Di Visual Studio 2022, buka proyek web ASP.NET Core, atau solusi dengan setidaknya satu proyek web yang ditetapkan sebagai proyek startup.

Di menu dropdown debug, pilih Dev Tunnels>Create A Tunnel.

Dialog pembuatan terowongan akan terbuka.

• Pilih akun yang akan digunakan untuk membuat tunnel. Jenis akun yang dapat digunakan untuk membuat terowongan termasuk Azure, Akun Microsoft (MSA), dan GitHub.
• Masukkan nama untuk terowongan. Nama ini mengidentifikasi tunnel di UI Visual Studio.
• Pilih jenis terowongan, Persisten atau Sementara:
  • Terowongan sementara mendapatkan URL baru setiap kali Visual Studio dimulai.
  • Tunnel persisten mendapatkan URL yang sama setiap kali Visual Studio dimulai. Untuk informasi selengkapnya, lihat Terowongan persisten vs. sementara nanti di artikel ini.
• Pilih autentikasi yang diperlukan untuk akses ke terowongan. Opsi berikut ini tersedia:
  • Pribadi: Terowongan hanya dapat diakses oleh akun yang membuatnya.
  • Organisasi: Terowongan dapat diakses oleh akun di organisasi yang sama dengan yang membuatnya. Jika opsi ini dipilih untuk akun Microsoft pribadi (MSA), efeknya sama dengan memilih Privat. Akun GitHub tidak mendukung organisasi.
  • Publik: Tidak diperlukan autentikasi. Pilih opsi ini hanya jika aman untuk membuat aplikasi web atau API dapat diakses oleh siapa pun di internet.
• Pilih OK.

Visual Studio menampilkan konfirmasi pembuatan tunnel:

Terowongan muncul di flyout Dev Tunnels pada dropdown debug:

Tentukan terowongan aktif

Proyek atau solusi dapat memiliki beberapa terowongan, tetapi hanya satu yang aktif pada satu waktu. Flyout Dev Tunnels di dropdown debug memungkinkan Anda menentukan terowongan aktif. Ketika ada tunnel aktif, ini digunakan untuk semua proyek ASP.NET Core yang dimulai di Visual Studio. Setelah terowongan dipilih sebagai aktif, terowongan tetap aktif hingga Visual Studio ditutup. Dalam ilustrasi berikut, My Temporary Tunnel aktif:

Pilih untuk tidak menggunakan terowongan dengan memilih None di flyout. Saat Visual Studio dimulai ulang, Visual Studio akan default kembali ke None.

Gunakan terowongan

Saat terowongan aktif dan Visual Studio menjalankan aplikasi web, browser web membuka URL terowongan alih-alih URL localhost. URL terowongan terlihat seperti contoh berikut:

https://0pbvlk3m-7032.usw2.devtunnels.ms

Sekarang setiap pengguna yang diautentikasi dapat membuka URL yang sama di perangkat lain yang terhubung ke internet. Selama proyek terus berjalan secara lokal, perangkat apa pun dengan koneksi internet dapat mengakses aplikasi web yang berjalan pada komputer pengembangan.

Untuk proyek web yang memiliki dukungan browser, halaman peringatan ditampilkan pada permintaan pertama yang dikirim ke URL terowongan dari setiap perangkat:

Setelah Lanjutkan dipilih, permintaan dirutekan ke aplikasi web lokal. Halaman pemberitahuan ini tidak ditampilkan untuk permintaan API menggunakan terowongan dev.

Gunakan terowongan untuk menguji di ponsel atau tablet

Untuk menguji aplikasi web dari perangkat eksternal seperti ponsel atau tablet, navigasikan ke URL terowongan. Untuk mempermudah memasukkan kembali URL pada perangkat eksternal:

• Navigasikan ke URL terowongan di browser Edge di komputer lokal.
• Buat kode QR untuk URL di browser Edge di komputer lokal:
  • Saat bilah URL dipilih, tombol kode QR muncul.
  • Pilih tombol kode QR untuk menghasilkan dan melihat kode QR.
• Pindai kode QR ini dengan ponsel atau tablet untuk menavigasi ke URL.

Jendela output Dev Tunnels

Untuk menampilkan URL terowongan proyek yang sedang berjalan, pilih Dev Tunnels di menu dropdown Tampilkan output dari .

Jendela ini sangat berguna untuk proyek yang secara default tidak terbuka di browser. Misalnya, saat bekerja dengan Azure Function, ini mungkin cara termudah untuk menemukan URL publik yang sedang digunakan oleh terowongan pengembangan.

Jendela alat Dev Tunnels

Lihat dan kelola terowongan dev di jendela alat Dev Tunnels :

Untuk membuka jendela Dev Tunnels, pilih opsi menu Tampilkan Jendela Dev Tunnels di menu dropdown debug. Atau, pilih Tampilkan>Jendela Lain>Dev Tunnels.

Dari jendela Dev Tunnels , buat terowongan baru dengan memilih tombol hijau + .

Hapus terowongan dengan menggunakan tombol merah x di sebelah kanan terowongan.

Menu konteks untuk terowongan menyediakan opsi berikut:

• Reset Terowongan Aktif: Ditampilkan ketika terowongan dikonfigurasi sebagai aktif (ditunjukkan oleh tanda centang di sisi kiri), ini mengatur ulang sehingga solusi tidak menggunakan terowongan.
• Jadikan Terowongan Aktif: Ditampilkan untuk terowongan yang tidak dikonfigurasi sebagai aktif.
• Salin Token Akses Terowongan: Disediakan untuk skenario di mana terowongan dibuat dengan akses privat atau organisasi, dan aplikasi adalah API web. Untuk melakukan autentikasi untuk tunnel, salin dan tempel token akses terowongan sebagai header dengan format X-Tunnel-Authorization tunnel <TOKEN> dalam permintaan. Jika header ini tidak ditentukan, permintaan akan diblokir karena pemeriksaan autentikasi gagal.
• Hapus

Variabel lingkungan URL tunnel

Fitur dev tunnels menyediakan cara untuk mendapatkan URL terowongan proyek secara terprogram pada waktu proses. Saat aplikasi yang menggunakan tunnel diluncurkan, Visual Studio membuat variabel lingkungan VS_TUNNEL_URL. Nilai VS_TUNNEL_URL adalah URL untuk terowongan yang digunakan untuk proyek saat ini. VS_TUNNEL_URL dapat berguna saat mengintegrasikan aplikasi dengan layanan eksternal, di mana URL terowongan perlu diteruskan ke layanan eksternal.

Jika beberapa proyek ASP.NET Core dikonfigurasi untuk dimulai di Visual Studio, aplikasi yang sedang dimulai mendapatkan variabel lingkungan untuk setiap proyek yang dimulai sebelumnya. Pola untuk nama variabel ini adalah VS_TUNNEL_URL_{ProjectName}, di mana {ProjectName} adalah nama proyek lain. Misalnya, pertimbangkan contoh ini yang menunjukkan dua proyek yang diatur untuk memulai:

Karena MyWebApi berada di atas MyWebApp, MyWebApi dimulai sebelum proyek MyWebApp. Ketika proyek MyWebApi dimulai, proyek tersebut menerima URL terowongannya dalam VS_TUNNEL_URL variabel lingkungan. Ketika proyek MyWebApp dimulai, proyek menerima URL terowongannya sendiri di VS_TUNNEL_URL dan URL terowongan proyek lainnya disediakan dalam VS_TUNNEL_URL_MyWebApi variabel lingkungan.

Untuk mengilustrasikan, baris kode yang disorot berikut telah ditambahkan ke file Program.cs di MyWebApp:

public class Program
{
    public static void Main(string[] args)
    {
        Console.WriteLine($"Tunnel URL: {Environment.
            GetEnvironmentVariable("VS_TUNNEL_URL")}");
        Console.WriteLine($"API project tunnel URL: {Environment.
            GetEnvironmentVariable("VS_TUNNEL_URL_MyWebApi")}");

Saat aplikasi web dimulai, output konsol terlihat seperti contoh berikut:

Tunnel URL: https://lxm0ltdt-7175.usw2.devtunnels.ms/
API project tunnel URL: https://lxm0ltdt-7042.usw2.devtunnels.ms/
info: Microsoft.Hosting.Lifetime[14]
      Now listening on: https://localhost:7175
info: Microsoft.Hosting.Lifetime[14]
      Now listening on: http://localhost:5228
info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down.
info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: Development
info: Microsoft.Hosting.Lifetime[0]
      Content root path: C:\DevTunnelsDemo\MyWebApp

Untuk informasi tentang cara menyiapkan beberapa proyek startup, lihat Cara: Mengatur beberapa proyek startup.

Terowongan persisten versus terowongan sementara

Tunnel persisten adalah tunnel yang menggunakan URL yang sama setelah keluar dan memulai ulang Visual Studio. Memiliki URL yang tidak berubah dapat berguna saat mengintegrasikan aplikasi web dengan layanan eksternal. Misalnya, menerapkan webhook GitHub, atau mengembangkan API untuk diintegrasikan dengan aplikasi Power Platform. Dalam kasus seperti itu, Anda mungkin perlu menentukan callback URL ke layanan eksternal. Dengan terowongan persisten, URL layanan eksternal hanya perlu dikonfigurasi sekali. Saat menggunakan terowongan sementara, URL terowongan harus dikonfigurasi setiap kali Visual Studio dimulai ulang.

Persisten tidak berarti terowongan berfungsi saat Visual Studio tidak terbuka. URL terowongan terhubung ke komputer lokal hanya jika proyek ASP.NET Core yang dihubungkan oleh URL terowongan berjalan di Visual Studio.

Tunnel sementara dapat digunakan ketika URL tunnel dev perlu berfungsi untuk waktu yang singkat. Misalnya, berbagi pekerjaan yang sedang berlangsung di aplikasi web dengan orang lain, atau menguji aplikasi di perangkat eksternal. Dalam beberapa kasus, mungkin yang terbaik adalah mendapatkan URL baru setiap kali Visual Studio dimulai.

Lihat juga

Sumber daya berikut menggunakan versi pratinjau awal dari fitur terowongan dev, sehingga bagian dari mereka sudah kedaluarsa:

• Gunakan dev tunnel di Visual Studio untuk men-debug API web Anda
• Automasi Panggilan ACS dan Layanan Azure OpenAI
• Gunakan terowongan dev Visual Studio untuk menangani Webhook Twilio