본문은 #ServerlessSeptember의 일부분이다.이 allthings Serverless 내용에 집중하면 다른 유용한 글, 상세한 강좌, 동영상을 발견할 수 있습니다.월요일부터 목요일부터 9월까지 매주 지역사회 구성원과 클라우드 창도자들의 새로운 글이 발표된다.
클릭 https://docs.microsoft.com/azure/azure-functions/ Microsoft Azure에서 서버 없는 기능을 활성화하는 방법에 대한 자세한 내용을 확인하십시오.

소개

본고의 사상은 cloud resume challenge에서 나왔다.우리는 방문객 계수기가 있는 서버 없는 정적 이력서 사이트를 구축해야 한다.방문자 수 (Azure Cosmos DB) 를 저장하기 위한 서버 없는 서비스, 방문자 수 (Azure 기능) 를 검색하고 업데이트하기 위한 서버 없는 서비스, 정적 이력서 사이트 (Azure 저장소) 를 관리하는 서버 없는 서비스, 정적 사이트 불러오기 (Azure CDN) 를 캐시하고 가속화하기 위한 추가 서비스가 필요합니다.이 강좌는 각 단계와 서비스를 포함하는 네 부분으로 나눌 것이다

Cosmos DB를 사용하여 스토어 구축

Azure Cosmos DB는 완전히 관리되는 NoSQL 데이터베이스 서비스로 서버 상점이 없는 완벽한 선택입니다.시작합시다.

단계

azure portal에서 검색azure cosmos db 및 일치 항목 선택

코스모스db 페이지에서 선택create

프로젝트에 대한 자세한 내용은 Azure 구독 및 리소스 그룹을 선택하여 Cosmos DB 계정을 그룹화하십시오.예를 들어, 선택한 계정 이름을 입력하십시오. 이 계정 이름은 전 세계에서 유일해야 합니다. 우리의 API는 Core(SQL)입니다. 왜냐하면 우리는 SQL 문법을 사용할 것입니다. 용량 모드는 serverless입니다. 우리는 나머지 옵션을 기본값으로 유지하고 계속 선택할 수 있습니다 review + create

배포가 완료되면 Go To Resource 을 선택하고 Data Explorer 를 선택합니다.데이터 탐색기 페이지에서 New Container 을 선택합니다.선택한 database id, container id 및 partition key 을 입력합니다.

DB를 만든 후 SQL API 목록에서 생성한 DB를 선택한 다음 New Item 을 계속 선택합니다.id을home 또는 이력서 홈페이지라고 부르고 싶은 내용을 입력하고 count을0을 0으로 입력하십시오.save를 누르면 우리 상점에서 사용할 수 있습니다.

Azure 함수를 사용하여 서버 없음 함수 구축

Azure Function은 서버 계산이 없는 서비스로 이벤트 트리거 코드를 실행할 수 있으며 인프라 시설을 현저하게 설정하거나 관리할 필요가 없습니다. 이것은 우리의 용례에 가장 좋은 선택이 됩니다.

단계

azure portal에서 검색Function App 및 일치 항목 선택

기능 응용 프로그램 페이지에서 선택create function

프로젝트에 대한 상세한 정보는 Azure 구독과 자원 그룹을 선택하여 기능 응용 프로그램을 그룹화하십시오.예를 들어, 자세한 내용은 선택한 전역 고유 함수 응용 프로그램 이름을 입력합니다.게시 옵션으로 Code 를 선택하고 런타임 스택으로 Node.js 을 선택하고 나머지 옵션을 기본값으로 유지한 다음 Review + Create 을 선택합니다.

배포가 완료되면 리소스 페이지에서 Go to Resource 을 선택하고 functions 를 선택합니다.

추가를 선택하고 새 기능 팝업 메뉴에서 HTTP trigger 을 선택합니다.[세부 정보] 옵션을 기본값으로 유지하고 Create Function 를 선택합니다.

우리는 방문객 계수표를 갱신하고 우리의 함수에서 갱신된 계수를 얻기를 희망한다.통합을 통해 이것은 가능하다.기능 페이지에서 Integration 을 선택합니다.

선택Add Input집적을 추가하여 특정 페이지의 방문객 수를 얻습니다.바인딩 유형은 Azure Cosmos DB, 데이터베이스 이름은 CosmosDB의 이름, 집합 이름은 이전에 생성된 Cosmos DB 용기의 이름입니다.생성한 Cosmos DB 계정을 사용하여 새 Cosmos DB 계정 연결을 만듭니다.SQL 쿼리를 추가하여 특정 페이지 수를 얻습니다SELECT * FROM c WHERE c.id = {id}.이 조회는 코스모스 데이터베이스에서 항목을 선택합니다. 그중item.id은 입력 조회 id와 같습니다. 선택Ok은 입력 통합을 만듭니다.

특정 페이지의 방문객 수를 업데이트하기 위해 통합Add Output을 추가합니다.바인딩 유형은 Azure Cosmos DB 이며 데이터베이스 이름은 이전에 생성된 CosmosDB의 이름이고 집합 이름은 Cosmos DB 용기의 이름입니다.입력 통합을 만들려면 Ok 을 선택합니다.

선택 Code + Test 함수는 다음과 같습니다.

module.exports = async function (context, req, data) {
  context.bindings.outputDocument = data[0];
  context.bindings.outputDocument.count += 1;
  context.res = {
     body: data[0].count
  };
}

비동기 함수의 세 번째 매개 변수data는 앞에서 만든 입력 통합에서 SQL 조회를 실행하고cosmosdb에서 항목을 되돌려줍니다.또 다른 선택은data = context.bindings.inputDocument, 그중inputDocument은 입력 통합의 이름입니다.
데이터베이스에 있는 방문객 수를 업데이트하기 위해서, 우리는 inputDocument 귀속을 사용하여 업데이트할 항목의 인용을 가져오고, 결과를 되돌리기 전에 계수를 1을 업데이트합니다.Azure 함수는 매우 스마트합니다. 우리의 변경 사항은 되돌아오는 데이터에 반영됩니다.

우리는 test/run 특성을 사용하여 우리의 함수가 작동하는지 테스트합니다.우리는 보통 단점에 get 요청을 보내고 id 의 파라미터를 조회합니다.우리는 홈의 값을 사용했습니다. 왜냐하면 코스모스db에서 얻은 항목이 home 의 id 로 저장되고 싶기 때문입니다.이력서 페이지에서 사용할 수 있도록 함수 응용 프로그램 API 단점을 복사해야 합니다.

Azure 스토리지에 정적 이력서 관리

나는 우리가 모두 html로 간단한 이력서를 만들 수 있다고 가정한다.당신은 모든 전단 프레임워크를 사용하여 구축할 수 있지만, 저는 순수한 html, css, 자바스크립트를 사용합니다.이력서 작성의 세부 사항을 자세히 소개하지 않으니 제 이력서를 마음대로 복제해 주십시오here.여기서 알아야 할 중요한 것은 자바스크립트를 사용하여 함수 응용 프로그램 API 단점에서 방문객 수를 얻고 웹 페이지에 결과를 표시해야 한다는 것입니다.계속해서 Azure Storage에 이력서를 올리겠습니다.

단계

azure portal에서 검색home 및 일치 항목 선택

스토리지 계정 페이지에서 storage accounts 을 선택합니다.

프로젝트에 대한 상세한 정보는 Azure 구독과 자원 그룹을 선택하여 기능 응용 프로그램을 그룹화하십시오.예를 들어, 자세한 내용은 선택한 글로벌 고유 스토리지 계정 이름을 입력합니다.나머지 옵션은 기본값으로 남겨두고 add 를 선택합니다.

배포가 완료된 후 선택Review + Create.

선택Go to Resource, 정적 사이트 페이지에서 선택Static website, 기본적으로 비활성화되어 있기 때문이다.이력서 사이트 인덱스 페이지와 오류 페이지로 들어가서 enable 을 누르십시오.정적 사이트의 URL을 볼 수 있지만, 그것은 비어 있습니다. 왜냐하면 우리는 아직 우리의 파일을 올리지 않았기 때문입니다.컨테이너 이상의 파일을 로드하려면 save 를 선택합니다.

파일을 업로드하고 자바스크립트가 함수 Appapigateway를 사용하여 방문객 수를 검색할 수 있도록 합니다.

정적 사이트 URL의 요청을 허용하기 위해 기능 프로그램을 업데이트해야 합니다. 그렇지 않으면 방문객 수를 얻을 수 없습니다.생성한 기능 응용 프로그램으로 이동하여 검색합니다$web.정적 사이트 URL을 허용된 원본 목록에 추가합니다.활성화 확인CORS.이제 다 잘 될 거야.

Azure CDN 캐시 복구 및 로드 시간 단축

Azure CDN(Content Design Network)을 사용하면 로드 시간을 줄이고 대역폭을 절약하며 응답 속도를 높일 수 있습니다.

단계

스토리지 계정으로 이동하여 정적 웹 사이트에 대한 스토리지를 선택합니다.

CDN 검색 및 선택Access-Control-Allow-Credentials

CDN 구성 파일의 이름을 입력하려면 create new CDN endpoint 을 선택합니다.가격 레이어에 대한 옵션create new을 선택합니다.CDN 끝점 이름의 글로벌 고유 이름을 입력하고 소스 이름으로 스토리지 계정을 선택합니다.CDN에 컨텐츠를 배포할 때까지 몇 분 동안 기다리려면 Standard Microsoft 을 클릭합니다.기능 응용 프로그램에서 허용하는 원본 목록에 CDN 노드 URL을 추가하는 것을 잊지 마십시오.

이것은 우리의 최종 결과다.

결론

우리는 이미 azure storage에 우리의 이력서를 위탁 관리하고 azure CDN을 사용하여 캐시를 하고 azure Cosmos DB를 사용하여 방문객 수를 저장하며 Function App 검색 수를 사용합니다.사용자 정의 도메인을 CDN 통합에 추가하는 기능이 추가되었습니다.