Netlify Function의 Type script를 이용한 개발이 수월해졌습니다.
개시하다
개인이 개발한 API를 개발하고 싶었는데 조사해보니
Netlify Functions용Typescript개발이 수월한 것 같아서 메모로 남겨뒀어요.(말은 그렇지만 반년 전에 발매된 기능입니다. 일본어 기사가 없기 때문입니다.)기억의 구석에 남아있는 정보라면
webpack와babel를 활용해 개발을 추진할 필요가 있어 번거로운 인상을 주지만 이 점은 지워졌다.예전에는
netlify-lambda를 이용해서 현지에서 개발한 것 같아요.최신 환경에서는 변화가 있기 때문에 접촉도 한다.설치하다.
필요한 모듈을 설치합니다.
npm i -D typescript netlify-cli
npm i @netlify/functions
netlify-cli에서 @netlify/esbuild를 이용하여 구축한다.esbuild 본가부터 포크를 사용하기 시작한 것 같아요.tsconfig.json 파일 만들기
npx tsc --init
esModuleInterop 및 isolatedModules 속성을 활성화합니다.그 외에 초기 값을 유지하도록 설정합니다.
샘플 API
netlify/functions 폴더에 공식 코드를 설치합니다.파일 이름은 hello.ts입니다.여기에 netlify/functions 폴더가 기본적으로 기록되어 있습니다.이 설정은
netlify.toml 파일을 통해 변경할 수 있습니다.hello.ts
import { Handler } from "@netlify/functions";
const handler: Handler = async (event, context) => {
return {
statusCode: 200,
body: JSON.stringify({ message: "Hello World" }),
};
};
export { handler };
로컬 시작 샘플
netlify dev
http://localhost:8888/.netlify/functions/hello에서 설계된 것으로 보인다.
.gitignore 설정
dev가 시작되면 .netlify 폴더에 구축된 js 파일이 저장되어 .gitignore에 추가됩니다..netlify
package.json의 Script 업데이트
local 개발 환경에서 확인용
netlify dev을 설치했습니다.또한 구축할 때도 type을 검사하기 때문에 tsc의 지령이라고도 할 수 있습니다.
package.json
"scripts": {
"dev": "netlify dev",
"tsc": "tsc --noEmit"
},
발포
망설일 것 같지는 않은데 포착돼서 발매 순서도 남겨뒀어요.
로그인 후 화면에서 클릭
import an exisiting project.
Import의 워크플로우 화면을 표시하고
GitHub를 클릭합니다.
이번에 제작된창고.,클릭
install.
설치가 완료되면 Workflow의 시작으로 돌아갑니다.
아까 인스타그램에 창고라고 떴는데 클릭하세요.
설정
tsc을 구성 명령으로 사용하는 구문의 세부 설정 화면을 표시합니다.다음은 자동으로 감지되고 구축된 것이기 때문에 js에서 명령을 구축할 필요가 없습니다.
로그에서 디버그 로그를 볼 수 있습니다.
hello.ts 파일을 검사하고 hello.js 파일을 생성합니다.
기타, 로그, 패키지.json을 분석한 결과 최신 버전의 nodejs를 사용했음을 알 수 있습니다.
디버그 후 사이트를 방문하면 만든 함수에서 Response로 되돌아오는 것을 확인할 수 있습니다.
끝말
번거로운 구축 설정이 거의 필요 없고 쉽게 발표할 수 있습니다.(기본값)
기사를 쓰면서도 1시간에서 1시간 반 정도면 나올 것 같다.
개인 개발도 해보고 싶어요.
이번에 사용한 샘플은 아래에 보관한다.
참고 자료
Reference
이 문제에 관하여(Netlify Function의 Type script를 이용한 개발이 수월해졌습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/j1ngzoue/articles/690b8a62fad092텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
