서버리스 기능을 갖춘 QR코드 생성기를 만들어보자! PlatoBlockchain 데이터 인텔리전스. 수직 검색. 일체 포함.

서버리스 기능으로 QR 코드 생성기를 만들어 봅시다!

QR코드 재미있죠? 우리는 그들을 사랑했다가 미워했다가 다시 사랑합니다. 어쨌든, 그들은 최근에 다시 나타나서 그들이 어떻게 만들어 졌는지에 대해 생각하게되었습니다. 엄청나게 많은 QR 코드 생성기가 있지만 자신의 웹사이트에서 해야 할 일이라고 말합니다. 이 패키지 그렇게 할 수 있습니다. 그러나 그것은 또한 물건을 생성하는 데 필요한 모든 것에 대해 엄청난 180KB의 무게를 가집니다. 나머지 스크립트와 함께 이 모든 것을 제공하고 싶지는 않을 것입니다.

이제 저는 클라우드 기능의 개념에 비교적 익숙하지 않지만 이것이 바로 이와 같은 것에 대한 꿀벌의 무릎이라고 들었습니다. 그런 식으로 함수는 필요할 때 호출할 수 있는 서버의 어딘가에 있습니다. 함수를 실행하기 위한 작은 API처럼 분류됩니다.

일부 호스트는 일종의 클라우드 기능을 제공합니다. DigitalOcean은 그 중 하나입니다! 그리고 Droplets와 마찬가지로 함수는 배포하기가 매우 쉽습니다.

로컬에서 함수 폴더 만들기

DigitalOcean에는 우리를 위해 스캐폴딩할 명령과 함께 CLI가 있으므로 cd 설정하고 실행하려는 모든 위치:

doctl serverless init --language js qr-generator

언어가 명시적으로 선언되어 있습니다. DigitalOcean 함수는 PHP와 Python도 지원합니다.

우리는 라는 멋진 깨끗한 프로젝트를 얻습니다. qr-generator/packages 프로젝트의 모든 기능을 담고 있는 폴더. 거기에 샘플 함수가 있지만 지금은 간과하고 만들 수 있습니다. qr 바로 옆에 있는 폴더:

서버리스 기능을 갖춘 QR코드 생성기를 만들어보자! PlatoBlockchain 데이터 인텔리전스. 수직 검색. 일체 포함.
서버리스 기능으로 QR 코드 생성기를 만들어 봅시다!

그 폴더는 둘 다 qrcode 패키지와 우리 qr.js 기능이 살아 있을 것입니다. 그래서, 하자 cd 으로 packages/sample/qr 패키지를 설치하십시오.

npm install --save qrcode

이제 새 함수에 함수를 작성할 수 있습니다. qr.js 파일 :

const qrcode = require('qrcode') exports.main = (args) => { return qrcode.toDataURL(args.text).then(res => ({ headers: { 'content-type': 'text/html; charset=UTF-8' }, body: args.img == undefined ? res : `<img src="${res}">` }))
} if (process.env.TEST) exports.main({text:"hello"}).then(console.log)

모든 작업은 qrcode 기본적으로 생성하는 함수를 패키지하고 내보내기 <img> 소스에 대한 base64 PNG가 있는 태그. 터미널에서 테스트할 수도 있습니다.

doctl serverless functions invoke sample/qr -p "text:css-tricks.com"

구성 파일 확인

여기서 한 가지 추가 단계가 필요합니다. 프로젝트가 발판되었을 때, 우리는 이것을 조금 얻었습니다. project.yml 파일에 대한 일부 정보로 기능을 구성합니다. 기본적으로 포함되어 있는 내용은 다음과 같습니다.

targetNamespace: ''
parameters: {}
packages: - name: sample environment: {} parameters: {} annotations: {} actions: - name: hello binary: false main: '' runtime: 'nodejs:default' web: true parameters: {} environment: {} annotations: {} limits: {}

강조 표시된 라인이 보이시나요? 그만큼 packages: name 속성은 어디에 packages 폴더는 함수가 살고 있는 폴더입니다. sample 이 경우에. 그만큼 actions/ name 속성은 파일의 이름인 함수 자체의 이름입니다. 이것의 hello 기본적으로 프로젝트를 가동할 때 이름을 지정했지만 qr.js, 그래서 우리는 그 줄을 다음에서 변경해야 합니다. helloqr 계속하기 전에.

함수 배포

명령줄에서 바로 수행할 수 있습니다! 먼저 DigitalOcean 샌드박스 환경에 연결하여 테스트용 라이브 URL을 갖습니다.

## You will need an DO API key handy
doctl sandbox connect

이제 함수를 배포할 수 있습니다.

doctl sandbox deploy qr-generator

일단 배포되면 URL에서 함수에 액세스할 수 있습니다. URL이 무엇입니까? 이에 대한 명령이 있습니다.

doctl sbx fn get sample/qr --url
https://faas-nyc1-2ef2e6cc.doserverless.co/api/v1/web/fn-10a937cb-1f12-427b-aadd-f43d0b08d64a/sample/qr

젠장 예! 더 이상 나머지 스크립트와 함께 전체 패키지를 배송할 필요가 없습니다! 해당 URL을 누르고 거기에서 QR 코드를 생성할 수 있습니다.

Rescale과 함께 비즈니스를 가속화하는 방법에 대해 알아보세요.

We fetch API와 그게 전부입니다!

CodePen 임베드 폴백

서버리스 기능으로 QR 코드 생성기를 만들어 봅시다! 원래에 게시 CSS 트릭. 너는해야한다. 뉴스레터 받기.

타임 스탬프 :

더보기 CSS 트릭