Dev tunnels trong Visual Studio 2022

Nguồn: Dev tunnels in Visual Studio 2022

Tính năng dev tunnels (đường hầm phát triển) của Visual Studio 2022 cho phép kết nối ad-hoc (tạm thời) giữa các máy tính không thể kết nối trực tiếp với nhau. Một URL được tạo ra cho phép bất kỳ thiết bị nào có kết nối internet đều có thể kết nối đến một dự án ASP.NET Core trong khi nó đang chạy trên localhost.

Trường hợp sử dụng

Một số tình huống mà dev tunnels cho phép:

Kiểm thử ứng dụng web trên các thiết bị khác, như điện thoại di động và máy tính bảng.
Kiểm thử ứng dụng với các dịch vụ bên ngoài. Ví dụ: kiểm thử và debug Power Platform connectors, Azure Communication Services APIs, hoặc Twilio webhooks.
Tạm thời cung cấp ứng dụng cho người khác qua internet, cho một buổi thuyết trình hoặc để mời người khác xem xét công việc của bạn trên một ứng dụng web hoặc API.
Như một giải pháp thay thế cho các giải pháp port-forwarding (chuyển tiếp cổng) khác.

Điều kiện tiên quyết

Visual Studio 2022 phiên bản 17.6 trở lên với workload ASP.NET and web development (ASP.NET và phát triển web) được cài đặt. Bạn cần đăng nhập vào Visual Studio để tạo và sử dụng dev tunnels.
Một hoặc nhiều dự án ASP.NET Core. Bài viết này sử dụng một solution với hai dự án mẫu để minh họa tính năng.

Tạo tunnel

Để tạo một tunnel:

Trong Visual Studio 2022, mở một dự án web ASP.NET Core, hoặc một solution với ít nhất một dự án web được đặt làm startup project.

Trong dropdown debug, chọn Dev Tunnels > Create A Tunnel (Tạo một Tunnel).

!Debug dropdown hiển thị tùy chọn dev tunnels với Create tunnel được chọn

Hộp thoại tạo tunnel mở ra.

!Hộp thoại tạo Dev Tunnel.

Chọn tài khoản để sử dụng tạo tunnel. Các loại tài khoản có thể sử dụng để tạo tunnel bao gồm Azure, Microsoft Account (MSA), và GitHub.
Nhập tên cho tunnel. Tên này xác định tunnel trong giao diện Visual Studio.
Chọn loại tunnel, Persistent (Bền vững) hoặc Temporary (Tạm thời):
Một tunnel tạm thời nhận được URL mới mỗi khi Visual Studio được khởi động.
Một tunnel bền vững nhận được cùng một URL mỗi khi Visual Studio được khởi động. Để biết thêm thông tin, xem Persistent vs. temporary tunnels (Tunnel bền vững so với tunnel tạm thời) ở phần sau bài viết này.
Chọn xác thực (authentication) được yêu cầu để truy cập tunnel. Các tùy chọn sau có sẵn:
Private (Riêng tư): Tunnel chỉ có thể truy cập bởi tài khoản đã tạo nó.
Organization (Tổ chức): Tunnel có thể truy cập bởi các tài khoản trong cùng tổ chức với tài khoản đã tạo nó. Nếu tùy chọn này được chọn cho tài khoản Microsoft cá nhân (MSA), hiệu ứng tương tự như chọn Private. Hỗ trợ Organization cho tài khoản GitHub không được hỗ trợ.
Public (Công khai): Không cần xác thực. Chỉ chọn tùy chọn này nếu việc làm cho ứng dụng web hoặc API có thể truy cập với bất kỳ ai trên internet là an toàn.
Chọn OK.

Visual Studio hiển thị xác nhận tạo tunnel thành công:

!Thông báo tạo tunnel thành công.

Tunnel xuất hiện trong flyout Dev Tunnels của dropdown debug:

!Flyout Dev Tunnels trong dropdown debug hiển thị tunnel mới.

Chỉ định tunnel đang hoạt động

Một dự án hoặc solution có thể có nhiều tunnel, nhưng chỉ một tunnel hoạt động tại một thời điểm. Flyout Dev Tunnels trong dropdown debug có thể chỉ định tunnel đang hoạt động. Khi có một tunnel đang hoạt động, nó được sử dụng cho tất cả các dự án ASP.NET Core được khởi động trong Visual Studio. Khi một tunnel được chọn làm active (đang hoạt động), nó vẫn active cho đến khi Visual Studio được đóng. Trong hình minh họa sau, My Temporary Tunnel đang active:

!Dropdown debug hiển thị tunnel đang hoạt động trong flyout Dev Tunnels.

Chọn không sử dụng tunnel bằng cách chọn None (Không có) trong flyout. Khi Visual Studio được khởi động lại, nó mặc định trở lại None.

Sử dụng tunnel

Khi một tunnel đang active và Visual Studio chạy một ứng dụng web, trình duyệt web mở đến URL tunnel thay vì URL localhost. URL tunnel trông giống như ví dụ sau:

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

Bây giờ bất kỳ người dùng được xác thực nào cũng có thể mở cùng một URL trên bất kỳ thiết bị kết nối internet nào khác. Miễn là dự án tiếp tục chạy cục bộ, bất kỳ thiết bị nào có kết nối internet đều có thể truy cập ứng dụng web đang chạy trên máy phát triển.

Đối với các dự án web có hỗ trợ trình duyệt, một trang cảnh báo được hiển thị trên request đầu tiên được gửi đến URL tunnel từ mỗi thiết bị:

!Trang thông báo dev tunnels.

Sau khi chọn Continue (Tiếp tục), request được chuyển đến ứng dụng web cục bộ. Trang thông báo này không được hiển thị cho các API request sử dụng dev tunnels.

Sử dụng tunnel để kiểm thử trên điện thoại hoặc máy tính bảng

Để kiểm thử ứng dụng web từ thiết bị bên ngoài như điện thoại hoặc máy tính bảng, điều hướng đến URL tunnel. Để dễ dàng tái tạo URL trên thiết bị bên ngoài:

Điều hướng đến URL tunnel trong trình duyệt Edge trên máy cục bộ.
Tạo mã QR cho URL trong trình duyệt Edge trên máy cục bộ:
Chọn thanh URL và nút mã QR xuất hiện.
Chọn nút mã QR để tạo và xem mã QR. !Mã QR với nút tạo được làm nổi bật.
Quét mã QR này bằng điện thoại hoặc máy tính bảng để điều hướng đến URL.

Cửa sổ đầu ra Dev Tunnels

Để hiển thị URL của tunnel đang chạy của dự án, chọn Dev Tunnels trong dropdown Show output from (Hiển thị đầu ra từ).

!Cửa sổ đầu ra Dev Tunnels.

Cửa sổ này đặc biệt hữu ích cho các dự án mặc định không mở trình duyệt. Ví dụ, khi làm việc với Azure Function, đây có thể là cách dễ dàng nhất để khám phá URL công khai đang được sử dụng bởi dev tunnel.

Cửa sổ công cụ Dev Tunnels

Xem và quản lý dev tunnels trong cửa sổ công cụ Dev Tunnels:

!Cửa sổ công cụ Dev Tunnels.

Để mở cửa sổ Dev Tunnels, chọn tùy chọn menu Show Dev Tunnels Window (Hiển thị Cửa sổ Dev Tunnels) trong dropdown debug. Hoặc chọn View > Other Windows > Dev Tunnels.

Từ cửa sổ Dev Tunnels, tạo một tunnel mới bằng cách chọn nút + màu xanh.

Xóa một tunnel bằng cách sử dụng nút x màu đỏ ở bên phải của tunnel.

Context menu (menu ngữ cảnh) cho tunnel cung cấp các tùy chọn sau:

Clear Active Tunnel (Xóa Tunnel Active): Hiển thị khi một tunnel được cấu hình là active (được chỉ định bởi dấu kiểm ở bên trái), điều này đặt lại để solution không sử dụng tunnel.
Make Active Tunnel (Đặt làm Tunnel Active): Hiển thị cho các tunnel không được cấu hình là active.
Copy Tunnel Access Token (Sao chép Token Truy cập Tunnel): Được cung cấp cho các tình huống mà tunnel được tạo với quyền truy cập private hoặc organizational, và ứng dụng là web API. Để xác thực cho tunnel, sao chép và dán tunnel access token như một header có dạng X-Tunnel-Authorization tunnel <TOKEN> trong request. Nếu header này không được chỉ định, request sẽ bị chặn vì kiểm tra xác thực thất bại.
Remove (Xóa)

Biến môi trường URL Tunnel

Tính năng dev tunnels cung cấp một cách để lấy URL tunnel của một dự án theo cách lập trình tại thời gian chạy. Khi một ứng dụng được khởi chạy sử dụng tunnel, Visual Studio tạo biến môi trường VS_TUNNEL_URL. Giá trị VS_TUNNEL_URL là URL cho tunnel được sử dụng cho dự án hiện tại. VS_TUNNEL_URL có thể hữu ích khi tích hợp ứng dụng với một dịch vụ bên ngoài, nơi URL tunnel cần được truyền đến dịch vụ bên ngoài.

Nếu nhiều dự án ASP.NET Core được cấu hình để khởi động trong Visual Studio, ứng dụng đang khởi động sẽ nhận được biến môi trường cho bất kỳ dự án nào đã khởi động trước nó. Pattern (mẫu) cho tên biến này là VS_TUNNEL_URL_{ProjectName}, trong đó {ProjectName} là tên của dự án khác. Ví dụ, hãy xem ví dụ này hiển thị hai dự án được đặt để khởi động:

!Trang chọn startup projects hiển thị cả MyWebApi và MyWebApp đều khởi động, theo thứ tự đó.

Vì MyWebApi nằm trên MyWebApp, nó được khởi động trước dự án MyWebApp. Khi dự án MyWebApi được khởi động, nó nhận được URL tunnel của nó trong biến môi trường VS_TUNNEL_URL. Khi dự án MyWebApp được khởi động, nó nhận được URL tunnel của chính nó trong VS_TUNNEL_URL và URL tunnel của dự án khác được cung cấp trong biến môi trường VS_TUNNEL_URL_MyWebApi.

Để minh họa, các dòng code được tô sáng sau đã được thêm vào file Program.cs trong MyWebApp:

csharp

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")}");

Khi ứng dụng web được khởi động, đầu ra console trông giống như ví dụ sau:

console

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

Để biết thông tin về cách thiết lập nhiều startup projects, xem How to: Set multiple startup projects.

Tunnel bền vững (Persistent) so với tunnel tạm thời (Temporary)

Tunnel bền vững là tunnel sử dụng cùng một URL sau khi thoát và khởi động lại Visual Studio. Có một URL không thay đổi có thể hữu ích khi tích hợp một ứng dụng web với một dịch vụ bên ngoài. Ví dụ, triển khai một GitHub webhook, hoặc phát triển một API để tích hợp với một ứng dụng Power Platform. Trong những trường hợp như vậy, bạn có thể cần chỉ định URL callback (gọi lại) cho dịch vụ bên ngoài. Với tunnel bền vững, URL dịch vụ bên ngoài chỉ cần được cấu hình một lần. Sử dụng tunnel tạm thời, URL tunnel phải được cấu hình mỗi khi Visual Studio khởi động lại.

Bền vững không có nghĩa là tunnel hoạt động khi Visual Studio không mở. Một URL tunnel kết nối đến máy cục bộ chỉ khi dự án ASP.NET Core mà URL tunnel kết nối đến đang chạy trong Visual Studio.

Tunnel tạm thời phù hợp khi URL dev tunnel chỉ cần hoạt động trong thời gian ngắn. Ví dụ, chia sẻ công việc đang thực hiện trên ứng dụng web với người khác, hoặc kiểm thử ứng dụng trên thiết bị bên ngoài. Trong một số trường hợp, có thể tốt hơn khi nhận URL mới mỗi khi Visual Studio khởi động.