Azure Front Door는 동적 사이트 가속, 글로벌 부하 분산, TLS 종료 및 애플리케이션 계층 보안을 제공하는 최신 클라우드 네이티브 ADN(애플리케이션 배달 네트워크)입니다. HTTP/HTTPS 계층(계층 7)에서 작동하며, URL 경로, 대기 시간 및 백 엔드의 상태와 같은 특성에 따라 트래픽을 라우팅하고 최적화하는 웹 애플리케이션의 진입점 역할을 합니다.
Azure Front Door의 주요 이점은 WebSocket 및 WSS(WebSocket Secure) 연결에 대한 기본 지원입니다. 이 지원을 사용하면 특별한 구성 없이도 클라이언트와 백 엔드 서비스 간에 실시간 양방향 통신을 수행할 수 있습니다.
이 가이드에서는 Azure SignalR Service와 함께 Azure Front Door를 사용하여 실시간 애플리케이션을 프런트 엔드하는 방법을 보여 줍니다. Front Door를 통해 트래픽을 라우팅하여 다음을 수행할 수 있습니다.
- 전역 도달률 및 에지 가속을 사용하여 WebSocket 지원을 적용합니다.
- WAF 규칙 및 속도 제한과 같은 중앙 집중식 보안 정책을 적용합니다.
- 백 엔드 서비스의 공개 노출을 줄입니다.
다이어그램에 표시된 것처럼 WebSocket 트래픽을 SignalR 기반 애플리케이션 백 엔드로 라우팅하도록 Azure Front Door를 구성합니다. 이 설정을 통해 실시간 기능은 Azure의 글로벌 에지 네트워크를 통해 대기 시간이 짧고 확장 가능하며 안전한 트래픽 처리의 이점을 얻을 수 있습니다.
Azure Front Door 설정 및 구성
Azure SignalR Service 리소스 만들기
"문서를 따라 SignalR Service 리소스를 만드세요."
Azure Front Door 리소스 만들기
Azure Portal에서 Front Door 및 Create를 검색합니다.
빠른 테스트
빠른 테스트를 수행하여 SignalR 엔드포인트가 정상 상태이고 Azure Front Door 리소스가 올바르게 구성되었는지 확인합니다.
요청을 <your-SignalR-resource-endpoint>/client 보내면 오류 메시지 'hub' 쿼리 매개 변수가 필요한400을 반환해야 합니다. 이 메시지는 요청이 SignalR Service에 도착했고 서비스가 예상대로 유효성 검사를 수행했음을 의미합니다.
curl -v <your-SignalR-resource-endpoint>/client
반품
< HTTP/1.1 400 Bad Request
< ...
<
'hub' query parameter is required.
Azure Front Door http://<the-hostname-of-your-Azure-Front-Door-resource>/client를 통해 Azure SignalR의 동일한 상태 엔드포인트에 요청을 보냅니다. 만든 Azure Front Door 리소스의 개요 탭으로 이동하여 엔드포인트 호스트 이름을 찾습니다.
curl -I http://<the-hostname-of-your-Azure-Front-Door-resource>/client
또한 오류 메시지 'hub' 쿼리 매개 변수가 필요한400을 반환해야 합니다. 이 메시지는 요청이 Azure Front Door를 통해 SignalR Service로 성공적으로 진행되었음을 확인합니다.
< HTTP/1.1 400 Bad Request
< ...
<
'hub' query parameter is required.
Azure Front Door를 통해 SignalR 샘플 앱 실행
이제 트래픽이 Azure Front Door를 통해 SignalR Service에 도달할 수 있는지 확인할 수 있습니다. 다음으로, Barebone 샘플 앱을 사용하여 구성 없이 WebSocket 트래픽을 라우팅하는 Azure Front Door의 기능을 보여 줍니다. 필요한 경우 따라갈 수 있도록 단계별 접근 방식을 사용합니다.
프로젝트를 만듭니다.
mkdir afd-demo
cd afd-demo
touch afd-demo.csproj
내용을 파일에 붙여넣습니다 afd-demo.csproj . 이 프로젝트는 "Microsoft.Azure.SignalR" 패키지만 사용합니다.
<Project Sdk="Microsoft.NET.Sdk.Web">
<PropertyGroup>
<TargetFramework>net7.0</TargetFramework>
<Nullable>enable</Nullable>
<ImplicitUsings>enable</ImplicitUsings>
<RootNamespace>afd_demo</RootNamespace>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="Microsoft.Azure.SignalR" Version="1.30.2" />
</ItemGroup>
</Project>
앱 설정 구성
appsettings.json 파일을 만들고 콘텐츠에 붙여넣습니다. 값은 우리가 다음 단계에서 만들 Program.cs 파일에서 참조됩니다.
ClientEndpoint ConnectionString에 섹션을 추가합니다.
touch appsettings.json
원시 연결 문자열 데모용으로만 이 문서에 표시됩니다. 프로덕션 환경에서는 항상 액세스 키를 보호합니다. Azure Key Vault를 사용하여 키를 안전하게 관리하고 회전하고, Microsoft Entra ID를 사용하여 연결 문자열을 보호하고 Microsoft Entra ID로 액세스를 권한 부여합니다.
{
"Azure": {
"SignalR": {
"ConnectionString": "<the-connection-string-of-your-Azure-SignalR-resource>;ClientEndpoint=<the-endpoint-of-your-Azure-Front-Door-resource>"
}
}
}
파일 만들기 Program.cs
touch Program.cs
코드를 파일에 붙여넣습니다 Program.cs . 웹앱은 SignalR 허브를 정의하고 웹 루트에서 제공합니다 index.html .
using Microsoft.Azure.SignalR;
var builder = WebApplication.CreateBuilder(args);
// Automatically read in the configuration from `appsettings.json`
builder.Services.AddSignalR().AddAzureSignalR();
var app = builder.Build();
app.UseStaticFiles();
app.UseRouting();
app.MapHub<DemoHub>("/demohub");
app.MapGet("/", async context =>
{
var path = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "index.html");
context.Response.ContentType = "text/html";
await context.Response.SendFileAsync(path);
});
app.Run();
SignalR 허브 정의
mkdir hubs && cd hubs
touch demohubs.cs
코드를 파일에 붙여넣습니다 demohubs.cs . 간단히 하기 위해 허브는 수신된 메시지를 연결된 모든 SignalR 클라이언트에 브로드캐스트하는 SignalR 클라이언트에만 BroadcastMessage 메서드를 노출합니다.
using Microsoft.AspNetCore.SignalR;
public class DemoHub : Hub
{
public Task BroadcastMessage(string message) =>
Clients.All.SendAsync("broadcastMessage", message);
}
웹 UI 정의
프로젝트 폴더의 루트에 있는지 확인합니다.
mkdir wwwroot && cd wwwroot
touch index.html
index.html에 코드를 붙여넣으세요. 사용자 인터페이스는 사용자로부터 텍스트 입력을 받는 <textarea>과 SignalR 연결을 통해 사용자 입력을 보내는 <button>로 구성됩니다. 수신된 메시지를 브로드캐스트하도록 SignalR 서버의 동작을 정의했으므로 브라우저 콘솔에 기록된 동일한 메시지가 표시됩니다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta name="viewport" content="width=device-width">
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>Azure SignalR with Azure Front Door as the reverse proxy</title>
</head>
<body>
<div>
<textarea id="message" style="display: block; width: 100%; padding: 5px 10px; max-width: 400px; margin-bottom: 8px;"
placeholder="Your message..."></textarea>
<button id="btn-send" disabled>Send</button>
</div>
<!--Reference the SignalR library. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/6.0.1/signalr.js"></script>
<script type="module">
document.addEventListener("DOMContentLoaded", async function () {
const connection = new signalR.HubConnectionBuilder()
.withUrl("/demohub")
.build();
connection.on("broadcastMessage", (msg) => {
console.log(msg)
})
await connection.start();
document.getElementById("btn-send").removeAttribute("disabled")
document.getElementById("btn-send").addEventListener("click", () => {
const message = document.getElementById("message").value
if (message !== "") {
connection.send("broadcastMessage", message)
document.getElementById("message").value = ""
} else {
alert("Message body is empty. Please enter message.")
}
})
})
</script>
</body>
</html>
Azure Front Door를 통해 앱을 실행하고 메시지 흐름을 확인합니다.
이것이 샘플의 모든 코드입니다. 앱을 실행해 보겠습니다.
dotnet restore
dotnet run
브라우저에서 열고 http://localhost:5129 바로 가기 키를 사용하여 F12 개발자 도구를 엽니다. 네트워크 패널로 이동하여 WebSocket 연결이 실제로 Azure Front Door와 설정된 것을 볼 수 있습니다.
텍스트 상자에 항목을 입력하고 보내기 단추를 누릅니다. 메시지가 예상대로 브라우저 콘솔에 기록되는 것을 볼 수 있습니다.
네트워크 패널에서 메시지 흐름을 검사할 수도 있습니다.
