{JSON.stringify(data)}

; } export default Page; `,"data-language":"tsx","data-theme":"github-dark-dimmed",style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:" getData"}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" async"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#6cb6ff"},children:" apiServer"}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" process.env["}),(0,n.jsx)(e.span,{style:{color:"#96d0ff"},children:"'services__webapi__https__0'"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"] "}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"??"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" process.env["}),(0,n.jsx)(e.span,{style:{color:"#96d0ff"},children:"'services__webapi__http__0'"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"];"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#6cb6ff"},children:" weatherData"}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#f69d50"},children:" Response"}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" await"}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:" fetch"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#96d0ff"},children:"`${"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"apiServer"}),(0,n.jsx)(e.span,{style:{color:"#96d0ff"},children:"}/api/weatherforecast`"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:", { cache: "}),(0,n.jsx)(e.span,{style:{color:"#96d0ff"},children:"'no-cache'"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" });"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" if"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" ("}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"!"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"weatherData.ok) {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" throw"}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" new"}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:" Error"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#96d0ff"},children:"'Failed to fetch data.'"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:");"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" }"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#6cb6ff"},children:" data"}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" await"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" weatherData."}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:"json"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"();"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" data;"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"}"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:" Page"}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" async"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#6cb6ff"},children:" data"}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" await"}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:" getData"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"();"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8ddb8c"},children:"main"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"#6cb6ff"},children:"JSON"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:"stringify"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"(data)"}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"}"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" default"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" Page;"})]})]})})}),(0,n.jsxs)(e.h3,{id:"client-components\u304B\u3089webapi\u3092\u547C\u3073\u51FA\u3059",children:[(0,n.jsx)(e.a,{href:"#client-components\u304B\u3089webapi\u3092\u547C\u3073\u51FA\u3059","aria-label":"Link to section",className:"subheading-anchor",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Client Components\u304B\u3089WebAPI\u3092\u547C\u3073\u51FA\u3059"]}),(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{__isInlineCode__:"true",children:"frontend\\src\\app\\client\\page.tsx"}),"\u3092\u4EE5\u4E0B\u306E\u3088\u3046\u306B\u4FEE\u6B63\u3057\u307E\u3059\u3002"]}),(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{__rawString__:`'use client' import { useEffect, useState } from 'react'; const getData = async () => { // NOTE: WebApi \u30D7\u30ED\u30B8\u30A7\u30AF\u30C8\u306E launchSettings.json \u30D5\u30A1\u30A4\u30EB > profiles > http > applicationUrl // "applicationUrl": "http://localhost:5291", const weatherData: Response = await fetch('http://localhost:5291/api/weatherforecast', { cache: 'no-cache' }); if (!weatherData.ok) { throw new Error('Failed to fetch data.'); } const data = await weatherData.json(); return data; } const ClientPage = () => { const [data, setData] = useState([]); useEffect(() => { getData().then((data) => setData(data)); }, []); return

{JSON.stringify(data)}

; } export default ClientPage; `,"data-language":"tsx","data-theme":"github-dark-dimmed",style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#96d0ff"},children:"'use client'"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" { useEffect, useState } "}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#96d0ff"},children:" 'react'"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:" getData"}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" async"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" {"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#768390"},children:" // NOTE: WebApi \u30D7\u30ED\u30B8\u30A7\u30AF\u30C8\u306E launchSettings.json \u30D5\u30A1\u30A4\u30EB > profiles > http > applicationUrl"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#768390"},children:' // "applicationUrl": "http://localhost:5291",'})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#6cb6ff"},children:" weatherData"}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#f69d50"},children:" Response"}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" await"}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:" fetch"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#96d0ff"},children:"'http://localhost:5291/api/weatherforecast'"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:", { cache: "}),(0,n.jsx)(e.span,{style:{color:"#96d0ff"},children:"'no-cache'"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" });"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" if"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" ("}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"!"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"weatherData.ok) {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" throw"}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" new"}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:" Error"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#96d0ff"},children:"'Failed to fetch data.'"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:");"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" }"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#6cb6ff"},children:" data"}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" await"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" weatherData."}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:"json"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"();"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" data;"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"}"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:" ClientPage"}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" ["}),(0,n.jsx)(e.span,{style:{color:"#6cb6ff"},children:"data"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#6cb6ff"},children:"setData"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"] "}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:" useState"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"([]);"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:" useEffect"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"(() "}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:" getData"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"()."}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:"then"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"(("}),(0,n.jsx)(e.span,{style:{color:"#f69d50"},children:"data"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:") "}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:" setData"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"(data));"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" }, []);"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8ddb8c"},children:"main"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"#6cb6ff"},children:"JSON"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:"stringify"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"(data)"}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"}"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" default"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" ClientPage;"})]})]})})}),(0,n.jsx)(e.p,{children:"\u3053\u306E\u6642\u70B9\u3067\u306F\u3001CORS\u30A8\u30E9\u30FC\u304C\u767A\u751F\u3059\u308B\u305F\u3081\u3001\u6B21\u306E\u30B9\u30C6\u30C3\u30D7\u3067Reverse Proxy\u3092\u5B9F\u88C5\u3057\u307E\u3059\u3002"}),(0,n.jsxs)(e.h2,{id:"5-yarp\u3067reverse-proxy\u3092\u5B9F\u88C5\u3059\u308B",children:[(0,n.jsx)(e.a,{href:"#5-yarp\u3067reverse-proxy\u3092\u5B9F\u88C5\u3059\u308B","aria-label":"Link to section",className:"subheading-anchor",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"5. YARP\u3067Reverse Proxy\u3092\u5B9F\u88C5\u3059\u308B"]}),(0,n.jsxs)(e.h3,{id:"\u7A7A\u306Easpnet-core\u30A2\u30D7\u30EA\u30B1\u30FC\u30B7\u30E7\u30F3\u3092\u8FFD\u52A0\u3059\u308B",children:[(0,n.jsx)(e.a,{href:"#\u7A7A\u306Easpnet-core\u30A2\u30D7\u30EA\u30B1\u30FC\u30B7\u30E7\u30F3\u3092\u8FFD\u52A0\u3059\u308B","aria-label":"Link to section",className:"subheading-anchor",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"\u7A7A\u306EASP.NET Core\u30A2\u30D7\u30EA\u30B1\u30FC\u30B7\u30E7\u30F3\u3092\u8FFD\u52A0\u3059\u308B"]}),(0,n.jsxs)(e.p,{children:["ASP.NET Core\uFF08\u7A7A\uFF09\u306E\u30D7\u30ED\u30B8\u30A7\u30AF\u30C8\u3092\u8FFD\u52A0\u3057\u307E\u3059\u3002\u30D7\u30ED\u30B8\u30A7\u30AF\u30C8\u540D\u306F",(0,n.jsx)(e.code,{__isInlineCode__:"true",children:"ReverseProxy"}),"\u3068\u3057\u307E\u3059\u3002"]}),(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{alt:"ASP.NET Core Empty Project",src:"/blog/61/image-4.png"})}),(0,n.jsxs)(e.h3,{id:"apphost\u30D7\u30ED\u30B8\u30A7\u30AF\u30C8\u3067\u53C2\u7167\u5148\u3092\u5B9F\u88C5\u3059\u308B",children:[(0,n.jsx)(e.a,{href:"#apphost\u30D7\u30ED\u30B8\u30A7\u30AF\u30C8\u3067\u53C2\u7167\u5148\u3092\u5B9F\u88C5\u3059\u308B","aria-label":"Link to section",className:"subheading-anchor",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"AppHost\u30D7\u30ED\u30B8\u30A7\u30AF\u30C8\u3067\u53C2\u7167\u5148\u3092\u5B9F\u88C5\u3059\u308B"]}),(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{__isInlineCode__:"true",children:"NextJSAspire.AppHost\\Program.cs"}),"\u3092\u4EE5\u4E0B\u306E\u3088\u3046\u306B\u4FEE\u6B63\u3057\u307E\u3059\u3002"]}),(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{__rawString__:`using Microsoft.Extensions.Hosting; var builder = DistributedApplication.CreateBuilder(args); var api = builder.AddProject("webapi"); var frontend = builder.AddNpmApp(name: "frontend", workingDirectory: "../frontend", scriptName: "dev") .WithHttpEndpoint(env: "PORT") .WithExternalHttpEndpoints() .WithReference(api); if (builder.Environment.IsDevelopment() && builder.Configuration["DOTNET_LAUNCH_PROFILE"] == "https") { frontend.WithEnvironment("NODE_TLS_REJECT_UNAUTHORIZED", "0"); } builder.AddProject("reverseproxy") .WithReference(frontend) .WithReference(api); builder.Build().Run(); `,"data-language":"cs","data-theme":"github-dark-dimmed",style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0",children:(0,n.jsxs)(e.code,{"data-language":"cs","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"using"}),(0,n.jsx)(e.span,{style:{color:"#f69d50"},children:" Microsoft"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#f69d50"},children:"Extensions"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#f69d50"},children:"Hosting"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"var"}),(0,n.jsx)(e.span,{style:{color:"#f69d50"},children:" builder"}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" DistributedApplication."}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:"CreateBuilder"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"(args);"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"var"}),(0,n.jsx)(e.span,{style:{color:"#f69d50"},children:" api"}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" builder."}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:"AddProject"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#f69d50"},children:"Projects"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#f69d50"},children:"WebApi"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:">("}),(0,n.jsx)(e.span,{style:{color:"#96d0ff"},children:'"webapi"'}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:");"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"var"}),(0,n.jsx)(e.span,{style:{color:"#f69d50"},children:" frontend"}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" builder."}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:"AddNpmApp"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#f69d50"},children:"name"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:": "}),(0,n.jsx)(e.span,{style:{color:"#96d0ff"},children:'"frontend"'}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#f69d50"},children:"workingDirectory"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:": "}),(0,n.jsx)(e.span,{style:{color:"#96d0ff"},children:'"../frontend"'}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#f69d50"},children:"scriptName"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:": "}),(0,n.jsx)(e.span,{style:{color:"#96d0ff"},children:'"dev"'}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:")"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" ."}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:"WithHttpEndpoint"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#f69d50"},children:"env"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:": "}),(0,n.jsx)(e.span,{style:{color:"#96d0ff"},children:'"PORT"'}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:")"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" ."}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:"WithExternalHttpEndpoints"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"()"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" ."}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:"WithReference"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"(api);"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"if"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" (builder.Environment."}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:"IsDevelopment"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"() "}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"&&"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" builder.Configuration["}),(0,n.jsx)(e.span,{style:{color:"#96d0ff"},children:'"DOTNET_LAUNCH_PROFILE"'}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"] "}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"=="}),(0,n.jsx)(e.span,{style:{color:"#96d0ff"},children:' "https"'}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:")"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"{"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" frontend."}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:"WithEnvironment"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#96d0ff"},children:'"NODE_TLS_REJECT_UNAUTHORIZED"'}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#96d0ff"},children:'"0"'}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:");"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"}"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"builder."}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:"AddProject"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#f69d50"},children:"Projects"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#f69d50"},children:"ReverseProxy"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:">("}),(0,n.jsx)(e.span,{style:{color:"#96d0ff"},children:'"reverseproxy"'}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:")"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" ."}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:"WithReference"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"(frontend)"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" ."}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:"WithReference"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"(api);"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"builder."}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:"Build"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"()."}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:"Run"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"();"})]})]})})}),(0,n.jsxs)(e.h3,{id:"microsoftextensionsservicediscoveryyarp\u3092\u30A4\u30F3\u30B9\u30C8\u30FC\u30EB\u3059\u308B",children:[(0,n.jsx)(e.a,{href:"#microsoftextensionsservicediscoveryyarp\u3092\u30A4\u30F3\u30B9\u30C8\u30FC\u30EB\u3059\u308B","aria-label":"Link to section",className:"subheading-anchor",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Microsoft.Extensions.ServiceDiscovery.Yarp\u3092\u30A4\u30F3\u30B9\u30C8\u30FC\u30EB\u3059\u308B"]}),(0,n.jsxs)(e.ol,{children:[(0,n.jsx)(e.li,{children:"Reverse Proxy\u30D7\u30ED\u30B8\u30A7\u30AF\u30C8\u306ENuGet\u30D1\u30C3\u30B1\u30FC\u30B8\u7BA1\u7406\u753B\u9762\u3092\u958B\u304D\u307E\u3059\u3002"}),(0,n.jsx)(e.li,{children:"Microsoft.Extensions.ServiceDiscovery.Yarp\u3092\u30A4\u30F3\u30B9\u30C8\u30FC\u30EB\u3057\u307E\u3059\u3002"})]}),(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{alt:"NuGet Package Manager",src:"/blog/61/image-6.png"})}),(0,n.jsxs)(e.h3,{id:"reverse-proxy\u3092\u5B9F\u88C5\u3059\u308B",children:[(0,n.jsx)(e.a,{href:"#reverse-proxy\u3092\u5B9F\u88C5\u3059\u308B","aria-label":"Link to section",className:"subheading-anchor",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Reverse Proxy\u3092\u5B9F\u88C5\u3059\u308B"]}),(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{__isInlineCode__:"true",children:"ReverseProxy\\Program.cs"}),"\u3092\u4EE5\u4E0B\u306E\u3088\u3046\u306B\u5B9F\u88C5\u3057\u307E\u3059\u3002"]}),(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{__rawString__:`using Yarp.ReverseProxy.Configuration; var builder = WebApplication.CreateBuilder(args); // NOTE: ServiceDiscovery \u3092\u6709\u52B9\u3068\u3059\u308B\u3002 // AppHost \u30D7\u30ED\u30B8\u30A7\u30AF\u30C8\u3067\u5B9F\u88C5\u3057\u305F Next.js \u3068 WebAPI \u30D7\u30ED\u30B8\u30A7\u30AF\u30C8\u3078\u306E\u53C2\u7167\u3092 SerivceDiscovery \u3067\u89E3\u6C7A\u3067\u304D\u308B\u3088\u3046\u306B\u306A\u308B\u304C\u3001 // YARP \u306E\u5834\u5408\u306F\u3001\u3053\u308C\u3060\u3051\u3067\u306F\u3001ServiceDiscovery \u304C\u3067\u304D\u306A\u3044\u3002 builder.AddServiceDefaults(); // NOTE: AddReverseProxy \u306F Yarp.ReverseProxy \u30D1\u30C3\u30B1\u30FC\u30B8\u306B\u542B\u307E\u308C\u3066\u3044\u308B YARP \u3092\u4F7F\u7528\u3059\u308B\u3053\u3068\u3092\u30D1\u30A4\u30D7\u30E9\u30A4\u30F3\u306B\u9069\u7528\u3059\u308B\u305F\u3081\u306E\u30E1\u30BD\u30C3\u30C9\u3002 // Add \u3057\u305F\u3089\u3000Use \u3059\u308B\u306E\u304C\u30D1\u30A4\u30D7\u30E9\u30A4\u30F3\u306E\u57FA\u672C\u306A\u306E\u3067\u3001Use \u3092\u5F8C\u3067\u5B9F\u88C5\u3057\u3066\u3044\u308B\uFF08\u4ECA\u56DE\u306F\u3001Map\uFF5E \u304C Use \u306B\u76F8\u5F53\u3059\u308B\uFF09\u3002 builder.Services.AddReverseProxy() .LoadFromMemory(GetRoutes(), GetClusters()) .AddServiceDiscoveryDestinationResolver(); var app = builder.Build(); app.MapDefaultEndpoints(); // NOTE: \u30D1\u30A4\u30D7\u30E9\u30A4\u30F3\u306EUse app.MapReverseProxy(); app.Run(); // GetRoutes \u30E1\u30BD\u30C3\u30C9\u3067\u632F\u308A\u5206\u3051\u306E\u30EB\u30FC\u30EB\u3092\u5B9A\u7FA9 RouteConfig[] GetRoutes() { return [ new RouteConfig { RouteId = "Route1", ClusterId = "default", Match = new RouteMatch { Path = "{**catch-all}" } }, new RouteConfig { RouteId = "Route2", ClusterId = "api", Match = new RouteMatch { Path = "/api/{*any}" } }, ]; } // GetClusters \u30E1\u30BD\u30C3\u30C9\u3067\u632F\u308A\u5206\u3051\u5148\u306E\u30D1\u30B9\u3092\u5B9A\u7FA9 ClusterConfig[] GetClusters() { return [ new ClusterConfig { ClusterId = "default", Destinations = new Dictionary { { "destination1", new DestinationConfig { Address = "http://frontend" } }, } }, new ClusterConfig { ClusterId = "api", Destinations = new Dictionary { { "destination2", new DestinationConfig { Address = "http://webapi", Host = "localhost" } }, } }, ]; } `,"data-language":"cs","data-theme":"github-dark-dimmed",style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0",children:(0,n.jsxs)(e.code,{"data-language":"cs","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"using"}),(0,n.jsx)(e.span,{style:{color:"#f69d50"},children:" Yarp"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#f69d50"},children:"ReverseProxy"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#f69d50"},children:"Configuration"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"var"}),(0,n.jsx)(e.span,{style:{color:"#f69d50"},children:" builder"}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" WebApplication."}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:"CreateBuilder"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"(args);"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#768390"},children:"// NOTE: ServiceDiscovery \u3092\u6709\u52B9\u3068\u3059\u308B\u3002"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#768390"},children:"// AppHost \u30D7\u30ED\u30B8\u30A7\u30AF\u30C8\u3067\u5B9F\u88C5\u3057\u305F Next.js \u3068 WebAPI \u30D7\u30ED\u30B8\u30A7\u30AF\u30C8\u3078\u306E\u53C2\u7167\u3092 SerivceDiscovery \u3067\u89E3\u6C7A\u3067\u304D\u308B\u3088\u3046\u306B\u306A\u308B\u304C\u3001"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#768390"},children:"// YARP \u306E\u5834\u5408\u306F\u3001\u3053\u308C\u3060\u3051\u3067\u306F\u3001ServiceDiscovery \u304C\u3067\u304D\u306A\u3044\u3002"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"builder."}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:"AddServiceDefaults"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"();"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#768390"},children:"// NOTE: AddReverseProxy \u306F Yarp.ReverseProxy \u30D1\u30C3\u30B1\u30FC\u30B8\u306B\u542B\u307E\u308C\u3066\u3044\u308B YARP \u3092\u4F7F\u7528\u3059\u308B\u3053\u3068\u3092\u30D1\u30A4\u30D7\u30E9\u30A4\u30F3\u306B\u9069\u7528\u3059\u308B\u305F\u3081\u306E\u30E1\u30BD\u30C3\u30C9\u3002"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#768390"},children:"// Add \u3057\u305F\u3089\u3000Use \u3059\u308B\u306E\u304C\u30D1\u30A4\u30D7\u30E9\u30A4\u30F3\u306E\u57FA\u672C\u306A\u306E\u3067\u3001Use \u3092\u5F8C\u3067\u5B9F\u88C5\u3057\u3066\u3044\u308B\uFF08\u4ECA\u56DE\u306F\u3001Map\uFF5E \u304C Use \u306B\u76F8\u5F53\u3059\u308B\uFF09\u3002"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"builder.Services."}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:"AddReverseProxy"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"()"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" ."}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:"LoadFromMemory"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:"GetRoutes"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"(), "}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:"GetClusters"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"())"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" ."}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:"AddServiceDiscoveryDestinationResolver"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"();"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"var"}),(0,n.jsx)(e.span,{style:{color:"#f69d50"},children:" app"}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" builder."}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:"Build"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"();"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"app."}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:"MapDefaultEndpoints"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"();"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#768390"},children:"// NOTE: \u30D1\u30A4\u30D7\u30E9\u30A4\u30F3\u306EUse"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"app."}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:"MapReverseProxy"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"();"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"app."}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:"Run"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"();"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#768390"},children:"// GetRoutes \u30E1\u30BD\u30C3\u30C9\u3067\u632F\u308A\u5206\u3051\u306E\u30EB\u30FC\u30EB\u3092\u5B9A\u7FA9"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#f69d50"},children:"RouteConfig"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"[] "}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:"GetRoutes"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"()"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"{"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" return"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" ["})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" new"}),(0,n.jsx)(e.span,{style:{color:"#f69d50"},children:" RouteConfig"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" {"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" RouteId "}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96d0ff"},children:' "Route1"'}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" ClusterId "}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96d0ff"},children:' "default"'}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" Match "}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" new"}),(0,n.jsx)(e.span,{style:{color:"#f69d50"},children:" RouteMatch"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" { Path "}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96d0ff"},children:' "{**catch-all}"'}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" }"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" },"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" new"}),(0,n.jsx)(e.span,{style:{color:"#f69d50"},children:" RouteConfig"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" {"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" RouteId "}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96d0ff"},children:' "Route2"'}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" ClusterId "}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96d0ff"},children:' "api"'}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" Match "}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" new"}),(0,n.jsx)(e.span,{style:{color:"#f69d50"},children:" RouteMatch"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" { Path "}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96d0ff"},children:' "/api/{*any}"'}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" }"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" },"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" ];"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"}"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#768390"},children:"// GetClusters \u30E1\u30BD\u30C3\u30C9\u3067\u632F\u308A\u5206\u3051\u5148\u306E\u30D1\u30B9\u3092\u5B9A\u7FA9"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#f69d50"},children:"ClusterConfig"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"[] "}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:"GetClusters"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"()"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"{"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" return"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" ["})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" new"}),(0,n.jsx)(e.span,{style:{color:"#f69d50"},children:" ClusterConfig"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" {"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" ClusterId "}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96d0ff"},children:' "default"'}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" Destinations "}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" new"}),(0,n.jsx)(e.span,{style:{color:"#f69d50"},children:" Dictionary"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"string"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#f69d50"},children:"DestinationConfig"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:">"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" {"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" { "}),(0,n.jsx)(e.span,{style:{color:"#96d0ff"},children:'"destination1"'}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"new"}),(0,n.jsx)(e.span,{style:{color:"#f69d50"},children:" DestinationConfig"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" { Address "}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96d0ff"},children:' "http://frontend"'}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" } },"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" }"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" },"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" new"}),(0,n.jsx)(e.span,{style:{color:"#f69d50"},children:" ClusterConfig"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" {"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" ClusterId "}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96d0ff"},children:' "api"'}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" Destinations "}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" new"}),(0,n.jsx)(e.span,{style:{color:"#f69d50"},children:" Dictionary"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"string"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#f69d50"},children:"DestinationConfig"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:">"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" {"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" { "}),(0,n.jsx)(e.span,{style:{color:"#96d0ff"},children:'"destination2"'}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"new"}),(0,n.jsx)(e.span,{style:{color:"#f69d50"},children:" DestinationConfig"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" { Address "}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96d0ff"},children:' "http://webapi"'}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:", Host "}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96d0ff"},children:' "localhost"'}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" } },"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" }"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" },"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" ];"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"}"})})]})})}),(0,n.jsxs)(e.h3,{id:"webapi\u306Breverse-proxy\u304B\u3089\u306E\u30A2\u30AF\u30BB\u30B9\u3092\u8A31\u53EF\u3059\u308B",children:[(0,n.jsx)(e.a,{href:"#webapi\u306Breverse-proxy\u304B\u3089\u306E\u30A2\u30AF\u30BB\u30B9\u3092\u8A31\u53EF\u3059\u308B","aria-label":"Link to section",className:"subheading-anchor",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"WebApi\u306B\u3001Reverse Proxy\u304B\u3089\u306E\u30A2\u30AF\u30BB\u30B9\u3092\u8A31\u53EF\u3059\u308B"]}),(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{__isInlineCode__:"true",children:"WebApi\\Program.cs"}),"\u3092\u4EE5\u4E0B\u306E\u3088\u3046\u306B\u4FEE\u6B63\u3057\u307E\u3059\u3002"]}),(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{__rawString__:`var builder = WebApplication.CreateBuilder(args); builder.AddServiceDefaults(); // ---- \u8FFD\u52A0 \u3053\u3053\u304B\u3089 ---- // builder.Services.AddCors(x => { x.AddDefaultPolicy(policy => { policy.AllowAnyHeader(); policy.AllowAnyMethod(); policy.AllowCredentials(); policy.WithOrigins(new string[] { "https://localhost:7213", "http://localhost:5172" }); // NOTE: \u5168\u3066\u306E Origin \u3092\u8A31\u53EF\u3059\u308B\u5834\u5408\u306F\u3001\u4E0B\u8A18\u30B3\u30FC\u30C9 // policy.SetIsOriginAllowed(origin => true); }); }); // ---- \u8FFD\u52A0 \u3053\u3053\u307E\u3067 ---- // // Add services to the container. var app = builder.Build(); // ---- \u8FFD\u52A0 \u3053\u3053\u304B\u3089 ---- // app.UseCors(); // CORS\u6709\u52B9\u306E\u305F\u3081\u306B\u8FFD\u52A0 // ---- \u8FFD\u52A0 \u3053\u3053\u307E\u3067 ---- // app.MapDefaultEndpoints(); ... `,"data-language":"cs","data-theme":"github-dark-dimmed",style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0",children:(0,n.jsxs)(e.code,{"data-language":"cs","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"var"}),(0,n.jsx)(e.span,{style:{color:"#f69d50"},children:" builder"}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" WebApplication."}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:"CreateBuilder"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"(args);"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"builder."}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:"AddServiceDefaults"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"();"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#768390"},children:"// ---- \u8FFD\u52A0 \u3053\u3053\u304B\u3089 ---- //"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"builder.Services."}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:"AddCors"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#f69d50"},children:"x"}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" =>"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"{"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" x."}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:"AddDefaultPolicy"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#f69d50"},children:"policy"}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" =>"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" {"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" policy."}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:"AllowAnyHeader"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"();"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" policy."}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:"AllowAnyMethod"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"();"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" policy."}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:"AllowCredentials"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"();"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" policy."}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:"WithOrigins"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"new"}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" string"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"[] { "}),(0,n.jsx)(e.span,{style:{color:"#96d0ff"},children:'"https://localhost:7213"'}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#96d0ff"},children:'"http://localhost:5172"'}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" });"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#768390"},children:" // NOTE: \u5168\u3066\u306E Origin \u3092\u8A31\u53EF\u3059\u308B\u5834\u5408\u306F\u3001\u4E0B\u8A18\u30B3\u30FC\u30C9"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#768390"},children:" // policy.SetIsOriginAllowed(origin => true); "})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" });"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"});"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#768390"},children:"// ---- \u8FFD\u52A0 \u3053\u3053\u307E\u3067 ---- //"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#768390"},children:"// Add services to the container."})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"var"}),(0,n.jsx)(e.span,{style:{color:"#f69d50"},children:" app"}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" builder."}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:"Build"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"();"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#768390"},children:"// ---- \u8FFD\u52A0 \u3053\u3053\u304B\u3089 ---- //"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"app."}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:"UseCors"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"(); "}),(0,n.jsx)(e.span,{style:{color:"#768390"},children:"// CORS\u6709\u52B9\u306E\u305F\u3081\u306B\u8FFD\u52A0"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#768390"},children:"// ---- \u8FFD\u52A0 \u3053\u3053\u307E\u3067 ---- //"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"app."}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:"MapDefaultEndpoints"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"();"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#f47067"},children:".."}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"."})]})]})})}),(0,n.jsxs)(e.h3,{id:"nextjs\u306Ecsr\u304B\u3089webapi\u306E\u547C\u3073\u51FA\u3057\u3092\u4FEE\u6B63",children:[(0,n.jsx)(e.a,{href:"#nextjs\u306Ecsr\u304B\u3089webapi\u306E\u547C\u3073\u51FA\u3057\u3092\u4FEE\u6B63","aria-label":"Link to section",className:"subheading-anchor",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Next.js\u306ECSR\u304B\u3089WebAPI\u306E\u547C\u3073\u51FA\u3057\u3092\u4FEE\u6B63"]}),(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{__isInlineCode__:"true",children:"frontend\\src\\app\\client\\page.tsx"}),"\u3092\u4EE5\u4E0B\u306E\u3088\u3046\u306B\u4FEE\u6B63\u3057\u307E\u3059\u3002"]}),(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{__rawString__:`'use client' import { useEffect, useState } from 'react'; const getData = async () => { const weatherData: Response = await fetch('/api/weatherforecast', { cache: 'no-cache' }) // <= \u30DB\u30B9\u30C8\u540D\u3092\u524A\u9664 ... } `,"data-language":"tsx","data-theme":"github-dark-dimmed",style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#96d0ff"},children:"'use client'"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" { useEffect, useState } "}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#96d0ff"},children:" 'react'"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:" getData"}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" async"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#6cb6ff"},children:" weatherData"}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#f69d50"},children:" Response"}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" await"}),(0,n.jsx)(e.span,{style:{color:"#dcbdfb"},children:" fetch"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#96d0ff"},children:"'/api/weatherforecast'"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:", { cache: "}),(0,n.jsx)(e.span,{style:{color:"#96d0ff"},children:"'no-cache'"}),(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:" }) "}),(0,n.jsx)(e.span,{style:{color:"#768390"},children:"// <= \u30DB\u30B9\u30C8\u540D\u3092\u524A\u9664"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#f47067"},children:" ..."})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#adbac7"},children:"}"})})]})})}),(0,n.jsxs)(e.p,{children:["\u3053\u308C\u3067\u3001Reverse Proxy\u3092\u901A\u3058\u3066WebAPI\u304B\u3089\u30C7\u30FC\u30BF\u3092\u53D6\u5F97\u3067\u304D\u308B\u3088\u3046\u306B\u306A\u308A\u307E\u3059\u3002\u30C0\u30C3\u30B7\u30E5\u30DC\u30FC\u30C9\u306BReverseProxy\u306E\u30EA\u30BD\u30FC\u30B9\u304C\u5897\u3048\u3066\u3044\u308B\u306E\u3067\u3001ReverseProxy\u306E\u30A8\u30F3\u30C9\u30DD\u30A4\u30F3\u30C8\u306E\u30EA\u30F3\u30AF\u3092\u30AF\u30EA\u30C3\u30AF\u3057\u3066\u521D\u671F\u753B\u9762\u3092\u8868\u793A\u5F8C\u3001",(0,n.jsx)(e.code,{__isInlineCode__:"true",children:"/client"}),"\u306B\u30A2\u30AF\u30BB\u30B9\u3057\u3066WebAPI\u304B\u3089\u30C7\u30FC\u30BF\u3092\u53D6\u5F97\u53EF\u80FD\u304B\u78BA\u8A8D\u3057\u307E\u3059\u3002"]})]})}function v(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,Object.assign({},l,{children:(0,n.jsx)(t,l)})):t(l)}var x=v;return A(C);})(); ;return Component;

Next.js + ASP.NET Core + YARP を .NET Aspire で構成する