정보실

웹학교

정보실

기타 Cloudflare Workers로 풀 스택 서버리스 애플리케이션 구축

본문

소프트웨어 개발에서 내가 가장 좋아하는 개발 중 하나는 서버리스의 출현이었습니다. 배포 및 DevOps에 대한 세부 정보에 익숙하지 않은 개발자는 단순히 규모와 인프라를 추상화하는 웹 응용 프로그램을 구축하는 방식이 새로워졌습니다. 서버리스는 실제로 프로젝트를 배송하는 데 도움이 되었습니다!


https://css-tricks.com/building-a-full-stack-serverless-application-with-cloudflare-workers/ 


즉, 서버리스를 처음 접한다면 이미 알고 있는 것을 새로운 패러다임으로 번역하는 방법이 명확하지 않을 수 있습니다. 프론트 엔드 개발자인 경우 서버리스를 통해 추상화 할 수 있는 경험이 없을 수도 있습니다. 어떻게 시작해야 합니까?


오늘은 Cloudflare Workers를 사용하여 아이디어에서 프로덕션까지 프로젝트를 수행하여 서버리스 작업의 실질적인 부분을 이해할 수 있도록 노력하겠습니다. 우리의 프로젝트는 Product Hunt 및 Reddit과 같은 사이트에서 영감을 얻은 "Repo Hunt"라는 일일 리더 보드로, 사용자는 GitHub 및 GitLab에서 멋진 오픈 소스 프로젝트를 제출하고 투표 할 수 있습니다. 여기에 게시 된 사이트의 최종 버전을 볼 수 있습니다.

s_C44D8DF9DAA8214FE3238851FB566F2164ACB41EED4D3A21B871EB13EB9F29F3_1561740515672_ScreenShot2019-06-20at10.49.33AM.png 

Workers는 Cloudflare 네트워크 위에 구축 된 서버리스 애플리케이션 플랫폼입니다. Cloudflare Workers에 프로젝트를 게시하면 전세계 180 개 도시에 즉시 배포됩니다. 즉, 사용자의 위치에 관계없이 대기 시간이 매우 짧은 인근 Cloudflare 서버에서 Workers 애플리케이션이 제공됩니다. 또한 Workers 팀은 개발자 경험을 한 단계 끌어 올렸습니다. 이번 달 초에 출시 된 최신 릴리스에서는 서버리스 응용 프로그램의 빌드, 업로드 및 게시를 관리하는 Wrangler라는 모든 기능을 갖춘 명령 줄 도구를 도입했습니다. 배우기 쉽고 강력한 명령으로


최종 결과는 단순히 JavaScript를 작성하여 URL에 배포 할 수 있는 플랫폼입니다. "Docker"의 의미에 대해 더 이상 걱정하지 않아도 되고 응용 프로그램이 Hacker News의 첫 페이지로 넘어갈 때 넘어 질 수 있습니다!


긴 튜토리얼을 시작하기 전에 프로젝트를 미리 보고 싶은 유형이라면 운이 좋을 것입니다! 이 프로젝트의 소스는 GitHub에서 구할 수 있습니다. 이를 통해 명령 줄로 이동하여 rad를 구축해 봅시다.


Wrangler 설치 및 작업 공간 준비 


Wrangler는 Cloudflare Workers 프로젝트를 생성, 구축 및 게시하기 위한 명령 줄 도구입니다. 특히 이전에 npm을 사용해 본 적이 있다면 설치가 매우 쉬워졌습니다.

npm install -g @cloudflare/wrangler 


Wrangler를 설치하면 generate 명령을 사용하여 새 프로젝트를 만들 수 있습니다. Wrangler 프로젝트는 "템플릿"을 사용합니다.이 템플릿은 개발자와 함께 빌드하는 개발자가 재사용 할 수 있도록 작성된 코드 리포지토리입니다. 우리는 Workers에서 모든 종류의 프로젝트를 빌드 할 수 있도록 점점 더 많은 템플릿 목록을 유지 관리합니다. 시작하려면 템플릿 갤러리를 확인하십시오!


이 자습서에서는 "Router"템플릿을 사용하여 Workers 위에 URL 기반 프로젝트를 빌드 할 수 있습니다. generate 명령에는 두 가지 인수가 있습니다. 먼저 프로젝트 이름 (리포 헌트 사용)과 Git URL입니다. 이것은 생성 명령에서 내가 가장 좋아하는 부분입니다. Wrangler를 GitHub URL로 지정하여 모든 종류의 템플릿을 사용할 수 있으므로 템플릿을 공유, 포크 및 공동 작업하는 것이 매우 쉽습니다. 지금 generate 명령을 실행 해 봅시다 :

wrangler generate repo-hunt https://github.com/cloudflare/worker-template-router cd repo-hunt 


라우터 템플릿에는 웹팩으로 프로젝트를 구축 할 수 있는 지원 기능이 포함되어있어 프로젝트에 npm 모듈을 추가하고 알고 있고 사랑하는 모든 JavaScript 툴을 사용할 수 있습니다. 또한 예상대로 템플릿에는 라우터 클래스가 포함되어있어 작업자의 경로를 처리하고 함수에 연결할 수 있습니다. 라우터 인스턴스 설정, /에 대한 GET 요청 처리 및 클라이언트에 응답 반환 등의 간단한 예를 살펴 보겠습니다.

// index.js const Router = require('./router') addEventListener('fetch', event => { event.respondWith(handleRequest(event.request)) }) async function handleRequest(request) { try { const r = new Router() r.get('/', () => new Response("Hello, world!")) const resp = await r.route(request) return resp } catch (err) { return new Response(err) } } 


모든 Workers 응용 프로그램은 클라이언트에서 응용 프로그램으로 들어오는 요청 인 인출 이벤트를 수신하여 시작합니다. 해당 이벤트 리스너 내에서 들어오는 요청을 보고 응답 방법을 결정하는 handleRequest 함수를 호출하는 것이 일반적입니다. 들어오는 요청을 나타내는 들어오는 페치 이벤트를 처리 할 때 Workers 스크립트는 항상 응답을 사용자에게 반환해야 합니다. Express와 같은 많은 웹 프레임 워크와 유사한 요청 / 응답 패턴이므로 웹 프레임 워크를 사용한 경우 전에는 매우 친숙하게 느껴 져야 합니다!


이 예에서는 다음과 같은 몇 가지 경로를 사용합니다. "루트"경로 (/)는 사이트의 홈페이지를 렌더링합니다. 사용자가 양식에서 저장소를 / repo에 제출할 때 / post에서 새 저장소를 제출하기 위한 양식 및 POST 요청을 승인하기 위한 특수 경로.



  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 4회 ]  작성일19-08-15 12:15

웹학교