Azure Functions 및 graphQL

Apollo 서버는 GraphQL 지향 서버입니다. 모든 React와 Next.js 사람들이 GraphQL에 대해 이야기하는 것 같습니다. 이를 Azure Function에서 호스팅해 보겠습니다.

첫 번째 클론this repo . 이것은 Azure에 배포될 함수 응용 프로그램입니다.

복제 후에는 함수 애플리케이션(함수용 Azure 컨테이너)과 Apollo 서버 함수가 생성됩니다.

지침에 따라 로컬에서 실행합니다.

Azure에 배포

배포에 대한 지침도 있습니다. Azure에서 GraphQL 플레이그라운드를 실행할 수 있는지 확인하세요.

보안, 키 및 CORS

플레이그라운드가 실행 중이어야 하지만 이 함수를 원격으로 호출하려는 시도는 실패합니다. 여기 요약이 있습니다.

새로운 React 또는 Next 앱은 fetch를 사용하여 이 함수를 직접 호출하려고 합니다. 작동하려면 다음 팁을 따르세요.

가져오기 요청은 게시물이어야 합니다.

URL은 다음과 같이 함수를 가리켜야 합니다.

https://xyz.azure.net/graphql 

//graphql is the function name but it can be any name

기본 키는 다음과 같이 'code'라는 이름의 쿼리 문자열 매개변수에 포함되어야 합니다.

/graphql?code=S1a1obVCO5pt5az4H5ZkV1GQsn...

키는 기능 포털에서 찾을 수 있습니다. "GetFunctionURL"을 누르면 세 개의 키가 있는 드롭다운이 표시됩니다.

-CORS는 localhost:3000 포트 또는 사용되는 포트를 허용하도록 설정되어야 합니다. 이것은 함수 응용 계층에서 수행됩니다. CORS 버튼을 누르면 됩니다.

게시물 본문은 다음 구문을 따라야 합니다.

let body = JSON.stringify({
      operationName: null,
      query: "{hello}",
      variables: {},
    })

가져오기 요청은 다음과 같습니다.

    let r2 = await fetch(url, {
      body: body,
      method: "POST",
    });

그리고 마지막으로 응답을 얻으려면 다음과 같이 구문 분석해야 합니다.

 let a2 = await r2.text();   
 //see code below for setAnswer2
 setAnswer2(
  JSON.parse(a2).data.hello
 );

useEffect 후크에서 '페치'했는지 확인하십시오.

useEffect(async () => {

다음과 같이 useState 후크를 설정합니다.

 const [answer2, setAnswer2] = useState("");

축하합니다!

이것은 더 이상 전통적인 백엔드가 필요하지 않다는 증거의 첫 번째 단계입니다. 우리는 단지 우리가 필요로 하는 각각의 특정한 것에 대한 기능을 눌렀습니다. 가상 머신, ASP.NET Core, Express 또는 이전 작업 방식이 필요하지 않습니다. 우리는 새로운 마이크로서비스 엔드포인트에 도달했고 계속 그런 식으로 일을 하고 있습니다.

Azure의 수직 확장 및 수평 확장은 간단합니다. 버튼을 클릭하기만 하면 됩니다. 10분 만에 동일한 기능을 전 세계에 배포할 수 있습니다.

다음 게시물에서 우리는 Next.js 애플리케이션에서 Apollo 클라이언트 측을 탐색할 것입니다.

하나의 질문:
SQL이 정점에 도달했습니까?

JWP2020 Azure Functions Apollo-Server Graphql.