Netlify의 서버 기능 없음에 대한 일반적인 가이드

* 이 기사는 처음으로 제 홈페이지에 게재되었습니다blog.
데모here|재구매here
JAMstack과 서버 없는 방법이 유행하면서 과거에 백엔드가 필요했던 대부분의 일들이 현재 완전히 전면에 있거나 API를 통해 처리되고 있다.그러나 때로는 이것이 부족하다. 이것이 바로 '서버 기능 없음' 의 용무이다.
가보자.서버 기능이 없는 몇 가지 용례는 무엇입니까? 어떻게 그것들을 설정합니까?
빠른 팁: AWS Lamda, Azure 또는 구글과 같은 서버 기능이 없는 여러 공급업체에서 실행할 수 있습니다.그러나 이 강좌에서 우리는 Netlify를 사용할 것이다. 왜냐하면 이것은 가장 사용자에게 좋은 환경 설정과 운영 체험 중 하나를 제공하기 때문이다.

카탈로그

What are serverless functions?

What can you do with serverless functions?

Getting started with Netlify Functions

Prerequisites

Set up your folder structure

Create a serverless function

Trigger a serverless function and receive a response

서버 기능이 없는 것은 무엇입니까?

처음부터 해야 할 일은 서버 없음이 사용자의 기능을 수행하기 위해 서버를 필요로 하기 때문에 약간 오도할 수 있다는 것이다.이 점을 고려하는 좋은 방법은 그날 서버를 시작하고 유지하며 전천후에 어떤 기능도 실행할 수 있도록 비용을 지불해야 한다는 것이다.
그러나 이제는'서버 없음'옵션이 생겨서'현금지불'방식, 즉 수요에 따라 계산하는 방식이 되었다.기능을 실행할 때마다 Netlify 같은 공급자에게 일반적인 서버가 아닌 비용을 지불합니다.
이렇게 하는 또 다른 주요 장점은 서버 인프라를 더 이상 걱정할 필요도 없고, 사용자가 갑자기 늘어나면 모든 것이 좋아질지 걱정할 필요도 없다는 것이다.
확장 프로그램이 훨씬 간단해졌다.
서버 없음 함수는 JAMstack의 서버 없음 방법에서 누락된 부분입니다.페이지에서 처리할 수 없는 모든 부족한 기능을 통합하여 보여 줍니다.

서버 없는 기능으로 무엇을 할 수 있습니까?

이 중 일부는 다음과 같습니다.

API와 대화

데이터/이미지 프로세싱 실행

사용자 인증 활용

통합 타사 서비스(전자상거래 등)

이메일 보내기

이것은 우리로 하여금 각양각색의 일을 할 수 있게 한다.저희가 뭘 필요로 하는지 한번 봅시다. 시작!

Neltlify 함수 사용 시작

Netlify는 플랫폼의 구축 과정을 가장 간단한 배치 과정 중 하나로 만들기 위해 많은 노력을 기울였다.Netlify가 준비한 many example repos 중 하나부터 시작하거나 다음 내용을 읽고 프로젝트에서 Netlify의 서버 없는 기능을 스스로 설정하는 방법을 배울 수 있습니다.

선결 조건

먼저 Neltify CLI를 설치합니다.이것은 로컬에서 서버 기능이 없는 것을 테스트할 수 있도록 해 줍니다. 변경할 때마다 배치할 필요가 없습니다.설치되지 않은 경우:

npm install -g netlify-cli

폴더 구조 설정

시작하려면 모든 기능을 포함하는 폴더를 설정하는 것이 필요합니다. 이 폴더는 자동으로 사이트의 상대적인 경로 아래의 웹 노드로 공개됩니다.기본값은 netlify/functions/입니다.그러나 Netlify 웹 인터페이스의 '배치 설정' 에 들어가서 이 점을 바꿀 수 있습니다.또는 프로젝트에 Netlify 프로필을 생성합니다(netlify.toml.

[build]
  functions = "serverless_functions"

해당 항목에 대한 자세한 내용을 찾습니다here.

서버 함수 없음 만들기

다음에, 우리는 functions 디렉터리에 함수를 만들고 싶습니다.예를 들면 다음과 같습니다.

serverless_functions/fetch-weather.js

serverless_functions/stripe-payments.js

serverless_functions/handle-user-input.js

이러한 사항은 향후 웹 사이트의 기본 URL/.netlify/functions/fetch-weather 또는 /.netlify/functions/stripe-payments 또는 /.netlify/functions/handle-user-input에 비해 제공될 예정입니다.
오늘의 예시에서, 우리는 사용자의 입력을 가져와 함수에 보내고, 사용자에게 응답을 보여 주기를 희망합니다.
이를 위해 serverless_functions/handle-user-input.js에 함수를 만들었습니다.

exports.handler = async function (event) {
  return {
    statusCode: 200,
    body: `${event.queryStringParameters.input || "No input found"}`,
  }
}

우리가 이전에 알고 있는 바와 같이, 우리의 함수는 .../.netlify/functions/handle-user-input에서 사용할 수 있지만, 우리는 어떻게 그것에 파라미터를 전달합니까?
물론, URL 매개 변수를 사용하십시오!
이렇게.../.netlify/functions/handle-user-input?myparameter=somevalue.
그리고 이벤트 대상의querystringParameters에 접근해서 이 값을 읽습니다.우리의 예에서 우리가 전달하는 매개 변수는 '입력' 이라고 불릴 것이다.

서버 기능 없음 트리거 및 응답 수신

현재 우리는 서버 기능이 없기 때문에 사용자가 그것을 터치할 수 있어야 한다.
이것은 API에서 데이터를 가져오는 것처럼 간단합니다.

/* ... imports etc. */

const IndexPage = () => {
  const [input, setInput] = React.useState("")
  const [allInput, setAllInput] = React.useState([])

  const handleSubmit = () => {
    if (input) {
      fetch(`/.netlify/functions/user-input?input=${input}`)
        .then(res => res.text())
        .then(text => setAllInput([...allInput, text]))
    } else {
      window.alert("Please give me some input! 😥")
    }
  }

  return (
    <Layout>
      <input value={input} onChange={e => setInput(e.target.value)} />
      <button onClick={handleSubmit}>Submit</button>
      <ul style={{ marginTop: "1rem" }}>
        {allInput.map((item, index) => (
          <li key={`${index}-${item}`}>{item}</li>
        ))}
      </ul>
    </Layout>
  )
}

여기에 세 가지 일이 발생했다.

사용자는 모든 정보를 입력할 수 있고 React의use State 갈고리로 입력을 저장할 수 있는 입력 필드가 있습니다.

서버가 없는 기능과 URL 매개 변수를 사용하는 입력 값을 트리거하는 버튼이 있습니다.그리고 응답을 받았을 때, 이 문자열을 'all Input' 이라는 응답 그룹에 추가합니다.React의 useState 갈고리를 다시 사용합니다.

마지막으로, 우리는 우리의 응답 그룹을 통해 비추고, 이 목록의 모든 항목을 무질서한 목록으로 표시합니다.

데모here|재구매here

이렇게!서버가 없는 기능을 통해 사용자의 입력을 보내는 것은 다시 받기 위한 것일 뿐입니다. 이것은 좀 불필요합니다.하지만 이것이 우리에게 가져다 준 여러 가지 기회를 생각해 보세요!이것은 강력한 도구로 당신의 정적 사이트를 매우 동적 사이트로 만들 수 있습니다!그것으로 무엇을 시도하고 구축하고 싶은지 알고 있다면 댓글로 알려주세요!
데모here|재구매here

거의 이렇다!

본문을 읽어 주셔서 대단히 감사합니다. 언제든지 전화my website로 연락 주십시오🙂 만약 당신이 더 많이 읽고 싶다면, 반드시 나의 blog에 있는 다른 댓글을 보셔야 합니다!