Netlify 서버

Tags

서버에 api 요청 후 네트워크 응답을 그대로 가지고 오면, 노출하고 싶지 않은 데이터를 노출해야하는 경우가 있다. (ex. header 부분)

이를 대응하기 위해서, netlify 서버에 데이터를 이관해서 응답을 다시 구성할 수 있다

netlify-cli 패키지 를 개발 의존성으로 설치

netlify dev 로 서버 실행 명령어 등록

netlify.toml 파일 생성 후 구성옵션 설정


[build]
	command = "npm run build"
	functions = "functions" //함수 폴더 이름
	publish = "dist"

[dev]
	framework = "#custom" // 프로젝트 파일
	command = "npm run dev"
	targetPort = 8080 //원래 접근해야하는 포트
	port = 5000 //변경된 포트, 이 포트로 실행됨
	publish = "dist"
	autoLaunch = false //브라우저 자동 실행 여부

Better TOML 확장프로그램 이용하면 코드 컬러 가능

API 응답 데이터를 다시 생성하는 serverless 함수 생성


exports.handler = async function(event) {
	const options = JSON.parse(event.body)
	const { id = '' } = options
	const res = await fetch(`https://kdt.roto.codes/documents/${id}`, {
							 headers: {
									'Content-Type': 'application/json',
									'x-username': 'leon',
							}
						})

	return { //새로운 응답, (statusCode와 body뿐)
		statusCode: 200,
		body: JSON.stringify(res.json())
	}
}

functions/workspace.js

/.netlify/폴더이름/파일이름로 내가 작성한 응답 데이터를 출력하는 API에 접근 가능

5. netlify 서버에 요청하기


async function _request(options) {
	return await fetch('/.netlify/functions/workspace', {
		method: 'POST',
		body: JSON.stringify(options)
	}).then(res => res.json())
}

netlify dev로 개발 서버 실행