Bagikan melalui

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

  • Artikel

Fitur terowongan pengembangan 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 mengaktifkan 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 beban kerja ASP.NET dan pengembangan web terinstal. Anda harus masuk ke Visual Studio untuk membuat dan menggunakan terowongan dev. Fitur ini tidak tersedia di Visual Studio untuk Mac.
  • Satu atau beberapa proyek ASP.NET Core. Artikel ini menggunakan solusi dengan dua proyek sampel untuk menunjukkan fitur tersebut.

Membuat 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.

Debug dropdown showing dev tunnels option with Create tunnel selected

Dialog pembuatan terowongan terbuka.

Dev Tunnel creation dialog.

  • Pilih akun yang akan digunakan untuk membuat terowongan. Jenis akun yang dapat digunakan untuk membuat terowongan termasuk Azure, Akun Microsoft (MSA), dan GitHub.
  • Masukkan nama untuk terowongan. Nama ini mengidentifikasi terowongan di UI Visual Studio.
  • Pilih jenis terowongan, Persisten atau Sementara:
    • Terowongan sementara mendapatkan URL baru setiap kali Visual Studio dimulai.
    • Terowongan 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:
    • Privat: 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. Dukungan organisasi untuk akun Github tidak didukung.
    • 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 terowongan:

Notification of successful tunnel creation.

Terowongan muncul di flyout Dev Tunnels dropdown debug:

Debug dropdown Dev Tunnels flyout showing new tunnel.

Tentukan terowongan aktif

Proyek atau solusi dapat memiliki beberapa terowongan, tetapi hanya satu per satu yang aktif. Flyout Dev Tunnels di dropdown debug dapat menentukan terowongan aktif. Ketika ada terowongan 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, Terowongan Sementara Saya aktif:

Debug dropdown showing active tunnel in Dev Tunnels flyout.

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

Menggunakan terowongan

Saat terowongan aktif dan Visual Studio menjalankan aplikasi web, browser web terbuka ke 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:

Dev tunnels notification page.

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

Menggunakan terowongan untuk menguji ponsel atau tablet

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

  • Navigasikan ke URL terowongan di browser Edge di komputer lokal.
  • Buat kode QR ke URL di browser Edge di komputer lokal:
    • Pilih bilah URL dan tombol kode QR muncul.
    • Pilih tombol kode QR untuk menghasilkan dan melihat kode QR. QR code with button to create it highlighted.
  • 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 .

Dev Tunnels output window.

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

Jendela alat Dev Tunnels

Lihat dan kelola terowongan dev di jendela alat Dev Tunnels :

Dev Tunnels tool window.

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

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:

  • Hapus Terowongan Aktif: Ditampilkan ketika terowongan dikonfigurasi sebagai aktif (ditunjukkan oleh tanda centang di sisi kiri), ini mengatur ulang sehingga solusi tidak menggunakan terowongan.
  • Buat 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 mengautentikasi terowongan, salin dan tempel token akses terowongan sebagai header formulir X-Tunnel-Authorization tunnel <TOKEN> dalam permintaan. Jika header ini tidak ditentukan, permintaan akan diblokir karena pemeriksaan autentikasi gagal.
  • Hapus

Variabel lingkungan URL Terowongan

Fitur terowongan dev menyediakan cara untuk mendapatkan URL terowongan proyek secara terprogram pada waktu proses. Saat aplikasi diluncurkan yang menggunakan terowongan, Visual Studio membuat variabel VS_TUNNEL_URLlingkungan . Nilainya 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 memulai mendapatkan variabel lingkungan untuk proyek apa pun yang dimulai sebelum proyek tersebut. 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:

Startup projects selection page showing MyWebApi and MyWebApp both starting, in that order.

Karena MyWebApi berada di atas MyWebApp, myWebApp 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 memulai 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 sementara

Terowongan persisten adalah terowongan 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 URL panggilan balik ke layanan eksternal. Dengan terowongan persisten, URL layanan eksternal hanya perlu dikonfigurasi sekali. 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 disambungkan URL terowongan berjalan di Visual Studio.

Terowongan sementara tidak masalah ketika URL terowongan 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.

Baca juga

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