Netlify 기능이있는 Jamstack 전자 상거래 상점을 구축하자

많은 사람들이 Jamstack이 무엇인지 혼란스러워합니다. 이 약어는 JavaScript, API 및 Markup의 약자이지만 Jamstack은 세 가지를 모두 포함 할 필요는 없습니다. Jamstack을 정의하는 것은 웹 서버없이 제공된다는 것입니다. 컴퓨팅의 역사를 고려하면 이러한 유형의 추상화는 부자연스럽지 않습니다. 오히려이 산업이 나아가고있는 것은 불가피한 진보입니다.

따라서 Jamstack이 정의에 따라 정적 인 경향이 있다면 동적 기능, 서버 측 이벤트를 가질 수 없거나 JavaScript 프레임 워크를 사용할 수 없습니다. 고맙게도 그렇지 않습니다. 이 튜토리얼에서는 Jamstack 전자 상거래 앱을 설정하고 NetLify 기능 (AWS AWS LAMBDA, 내 의견으로는 슈퍼 마약)을 사용하여 서버리스 기능을 추가합니다.

후속 게시물에서 NUXT/VUE 부품이 어떻게 설정되었는지 더 직접 보여 드리지만 지금은 Stripe Serverless 기능에 중점을 둘 것입니다. 내가 이것을 어떻게 설정했는지 보여 드리겠습니다. Gatsby와 같은 다른 정적 사이트 생성기에 연결하는 방법에 대해서도 이야기하겠습니다. 전체 공개, NetLify를 위해 일하고 있으며이를 위해 도구를 사용하고 있으며 다른 서비스와 Stripe에 연결할 수 있습니다. 나는 그들의 서비스가 제공하는 멋진 추상화를 즐기기 때문에 부분적으로 Netlify를 위해 일하기로 결정했습니다.

이 사이트와 Repo는 이와 같은 것을 직접 설정하려면 시작해야합니다.

데모 사이트

Github Repo

우리 앱을 발판하십시오

첫 번째 단계는 앱을 설정하는 것입니다. 이것은 vue 앱을 만들기 위해 nuxt로 만들어졌지만 이러한 명령을 선택한 기술 스택으로 바꿀 수 있습니다.

 원사 Nuxt-App을 만듭니다

허브 생성

git add -a
git commit -m "초기 커밋"

git push -u 원산지 마스터

Yarn, Hub (명령 줄에서 저장소를 만들 수 있음) 및 NUXT를 사용하고 있습니다. 진행하기 전에 이러한 도구를 로컬 또는 전 세계적으로 설치해야 할 수도 있습니다.

이 소수의 명령을 통해 프롬프트에 따라 우리는 완전히 새로운 NUXT 프로젝트와 리포지토리를 설정할 수 있습니다.

NetLify에 로그인하고 인증되면 Repo를 선택하도록 요청합니다.

Yarn Generate를 사용하여 프로젝트를 만들 것입니다. 이를 통해 Dist Directory의 NUXT 용 사이트 설정을 추가하고 Feploy를 때릴 수 있습니다! CI /CD를 설정하고 사이트를 배포하는 데 필요한 전부입니다! 이제 마스터 브랜치로 밀어 넣을 때마다 배포 할뿐만 아니라 해당 특정 배포에 대한 고유 한 링크가 제공됩니다. 너무 굉장합니다.

NetLify가있는 기본 서버리스 기능

이런 종류의 기능 설정이 너무 빠르기 때문에 흥미로운 부분이 있습니다! 서버리스에 익숙하지 않은 경우, 알고 사랑하고 사랑하는 동일한 JavaScript 기능처럼 생각할 수 있지만 서버에서 실행되었습니다. 서버리스 기능은 이벤트 중심의 논리이며 가격은 매우 낮습니다 (Netlify뿐만 아니라 업계 전반적으로) 및 사용량으로 스케일링됩니다. 그렇습니다. 여기에 예선을 추가해야합니다. Serverless는 여전히 서버를 사용하지만 베이비 시팅은 더 이상 귀하의 작업이 아닙니다. 시작합시다.

우리의 기본 기능은 다음과 같습니다. 나는 functions라는 폴더에 광산을 저장하고 그것을 index.js라고 불렀습니다. 당신은 진정으로 폴더를 호출하고 원하는 것을 기능 할 수 있습니다.

 // functions/index.js
Exports.Handler = async (이벤트, 컨텍스트) => {
  반품 {
    상태 코드 : 200,
    바디 : json.stringify ({
      메시지 : "안녕하세요 타코",
      이벤트
    })
  }
}

또한 프로젝트의 루트에 NetLify.toml 파일을 작성 하고이 경우 기능을 찾을 수있는 디렉토리,이 경우 "함수"입니다.

 // netlify.toml
[짓다]
  함수 = "함수"

우리가 마스터로 밀고 대시 보드로 들어가면 함수를 선택하는 것을 볼 수 있습니다!

위에 나열된 엔드 포인트를 보면 여기에 저장됩니다.
https://ecommerce-netlify.netlify.com/.netlify/functions/index

실제로, 당신이 제공하는 모든 사이트의 경우 URL 은이 패턴을 따릅니다.
https ://. netlify/functions/

우리가 그 엔드 포인트를 쳤을 때, 그것은 우리가 통과 한 메시지와 우리가 기록한 모든 이벤트 데이터를 제공합니다.

나는 그것이 몇 단계인지 좋아합니다! 이 작은 코드는 사이트에서 풍부하고 역동적 인 기능을위한 무한한 힘과 기능을 제공합니다.

훅업 스트라이프

Stripe와의 페어링은 사용하기 쉽고 정교하고 훌륭한 문서를 가지고 있으며 서버리스 기능과 잘 작동하기 때문에 매우 재미 있습니다. 서비스를 많이 사용하는 것을 좋아하기 때문에 Stripe를 사용한 다른 튜토리얼이 있습니다.

다음은 우리가 건축 할 앱의 새의 시선을 보여줍니다.

먼저 Stripe 대시 보드로 가서 키를 얻습니다. 지금 완전히 스캔들 한 사람에게는 괜찮습니다. 테스트 키입니다. 당신도 그것들을 사용할 수 있지만, 당신이 그들 스스로 설정하면 더 많은 것을 배울 것입니다. (두 번의 클릭이고 여기서 따라 가기가 어렵지 않다고 약속합니다.)

Dotenv라는 패키지를 설치하여 키를 저장하고 로컬로 테스트하는 데 도움이됩니다. 그런 다음 Stripe Secret 키를 Stripe 변수에 저장합니다. (당신은 그것을 무엇이든 부를 수 있지만 여기서 나는 그것을 stripe_secret_key라고 불렀습니다. 그리고 그것은 거의 많은 산업 표준입니다.)

 원사 추가 Dotenv

 require ( "dotenv"). config ()

const stripe = require ( "stripe") (process.env.stripe_secret_key)

Netlify 대시 보드에서는“빌드 및 배포”로 이동하여“환경”으로 이동하여 환경 변수를 추가하여 stripe_secret_key가 핵심이며 값이 SK로 시작하는 키입니다.

우리는 또한 일부 헤더를 추가하여 CORS 문제를 해결하지 못할 것입니다. 우리는 우리가 빌드 할 기능 전체 에서이 헤더를 사용합니다.

 const 헤더 = {
  "액세스 제어-홀로-오리핀": "*",
  "액세스-제어 승인 머리": "콘텐츠 유형"
}

이제 Stripe와 대화하기위한 기능을 만들 것입니다. 우리가 기대하는 HTTP 방법이 아니라는 사례를 처리 할 것이며, 또한 우리가 기대하는 정보를 얻을 수 있습니다.

당신은 이미 여기에서 확인할 수 있습니다. 우리가 확인한 내용으로 스트라이프로 보내야 할 데이터를 볼 수 있습니다. 토큰, 총 금액 및 Idempotency 키가 필요합니다.

Idempotency 키에 익숙하지 않은 경우 클라이언트가 생성하고 연결이 중단 될 경우 요청과 함께 API로 전송되는 고유 한 값입니다. 서버가 깨닫는 전화를받는 경우 요청을 무시하고 성공적인 상태 코드로 응답합니다. 아, 그리고 발음하는 것은 불가능한 단어입니다.

 Exports.Handler = async (이벤트, 컨텍스트) => {
  if (! event.body || event.httpMethod! == "post") {
    반품 {
      상태 코드 : 400,
      헤더,
      바디 : json.stringify ({
        상태 : "유효하지 않은 HTTP 방법"
      })
    }
  }

  const data = json.parse (event.body)

  if (! data.stripetoken ||! data.stripeamt ||! data.stripeidempotency) {
    Console.error ( "필요한 정보가 누락되었습니다.")

    반품 {
      상태 코드 : 400,
      헤더,
      바디 : json.stringify ({
        상태 : "정보 누락"
      })
    }
  }

이제 스트라이프 결제 처리를 시작합니다! 이메일과 토큰을 사용하여 스트라이프 고객을 만들고 약간의 벌목을 한 다음 스트라이프 충전을 만듭니다. 우리는 통화, 금액, 이메일, 고객 ID를 지정하고 우리가있는 동안 설명을 제공합니다. 마지막으로, 우리는 Idempotency 키 ( 눈에 띄는 눈 구조를 발음)를 제공하고 성공했다고 로그를 제공합니다.

(여기에는 표시되지 않지만 오류 처리도 할 것입니다.)

 // 스트라이프 결제 처리가 시작됩니다
노력하다 {
  스트라이프를 기다리고 있습니다
    .만들다({
      이메일 : data.stripeemail,
      출처 : data.stripetoken
    })
    . 그런데 (customer => {
      Console.log (
        `요금 시작, amt : $ {data.stripeamt}, 이메일 : $ {data.stripeemail}`
      ))
      Return Stripe.Charges
        .만들다(
          {
            통화 : "USD",
            금액 : data.stripeamt,
            requipt_email : data.stripeemail,
            고객 : customer.id,
            설명 : "샘플 충전"
          },
          {
            idempotency_key : data.stripeidempotency
          }
        ))
        . 결과 (result => {
          console.log (`청구서 생성 : $ {result}`)
        })
    })

Nuxt에 연결하십시오

응용 프로그램을 되돌아 보면 페이지 내부에 거주하는 페이지와 구성 요소가 있음을 알 수 있습니다. Vuex 상점은 응용 프로그램의 뇌와 같습니다. 그것은 앱의 상태를 유지할 것이며, 그것이 스트라이프와 통신 할 것입니다. 그러나 여전히 클라이언트를 통해 사용자와 통신해야합니다. 카트 페이지에 남을 appcard.vue라는 구성 요소에 신용 카드 데이터를 수집합니다.

먼저, vue-stripe-elements-plus라는 패키지를 설치하여 신용 카드 데이터를 수집 할 수있는 스트라이프 양식 요소를 제공하고 심지어 스트라이프 결제 처리를위한 토큰을 만들 수있는 급여 방법을 설정합니다. 또한 UUID라는 라이브러리를 추가하여 고유 키를 생성 할 수 있으며 Idempotency 키에 사용할 수 있습니다.

 원사 추가 vue-stripe-elements-plus uuid

Vue-stripe-elements-plus와 함께 작업 할 기본 설정은 다음과 같습니다.

 <emplate>
  <div id="'app'">
    <h1 id="지불-세부-정보를-알려주세요"> 지불 세부 정보를 알려주세요 : </h1>
    <card class="'stripe-card'" : stripe="'pk_test_xxxxxxxxxxxxxxxxxxxxx'" event.complete></card>
    <button class="'pay-with-stripe'" disabled complete> 신용 카드로 지불하십시오 </button>
  </div>
템플릿></emplate>

 <cript>
'./stripeconfig.json'에서 {Stripekey, Stripeoptions} 가져 오기
'vue-stripe-elements-plus'에서 {card, createToken} 가져 오기

내보내기 기본값 {
  데이터 () {
    반품 {
      완료 : 거짓,
      Stripeoptions : {
        // 자세한 내용은 https://stripe.com/docs/stripe.js#element-options를 참조하십시오
      }
    }
  },

  구성 요소 : {card},

  방법 : {
    지불하다 () {
      // createToken은 결과 객체에서 해결하는 약속을 반환합니다.
      // 토큰 또는 오류 키.
      // 토큰 객체는 https://stripe.com/docs/api#tokens를 참조하십시오.
      // 오류 객체는 https://stripe.com/docs/api#errors를 참조하십시오.
      // 더 일반적인 https://stripe.com/docs/stripe.js#stripe-create-token.
      createToken (). 그런 다음 (data => console.log (data.token))
    }
  }
}
스크립트></cript>

그래서 우리가 할 일이 있습니다. 우리는 고객 이메일을 저장하기 위해 양식을 업데이트하고 지불 방법을 업데이트하여 Vuex 스토어로 토큰 또는 오류 키를 보내십시오. 우리는 그렇게하기 위해 행동을 파견 할 것입니다.

 데이터 () {
    반품 {
      ...
      StripeEmail : ""
    };
  },
  방법 : {
    지불하다() {
      createToken (). 그런 다음 (data => {
        const Stripedata = {data, StripeEmail : this.stripeemail};
        이. $ store.dispatch ( "poststripefunction", Stripedata);
      });
    },
 ...

우리가 파견 한 후 이후의 동작은 다음과 같습니다.

 // vuex 스토어
내보내기 const action = {
  Async poststripefunction ({getters, commit}, payload) {
    Commit ( "UpdateCartui", "Loading")

    노력하다 {
      Axios를 기다립니다
        .우편(
          "https://ecommerce-netlify.netlify.com/.netlify/functions/index",
          {
            StripeEmail : Payload.stripeemail,
            stripeamt : math.floor (getters.carttotal * 100), // 가격을 센트로 기대합니다.                        
            stripetoken : "tok_visa", // 토큰 테스트, 나중에 우리는 payload.data.token을 사용합니다
            stripeidempotency : uuidv1 () // 우리는이 라이브러리를 사용하여 고유 한 ID를 만듭니다.
          },
          {
            헤더 : {
              "Content-Type": "Application/JSON"
            }
          }
        ))
        . 그런데 (res => {
          if (res.status === 200) {
            Commit ( "UpdateCartui", "Success")
            settimeout (() => commit ( "ClearCart"), 3000)
            …

처리하는 동안 UI 상태를로드로 업데이트 할 것입니다. 그런 다음 AXIOS를 사용하여 기능 엔드 포인트 (기능을 설정할 때 게시물의 앞부분에서 본 URL)에 게시합니다. 우리는 이메일, AMT, 토큰 및 우리가 기대할 기능을 구축 한 고유 키를 전송합니다.

그런 다음 성공하면 UI 상태를 업데이트하여이를 반영합니다.

마지막으로주는 메모 중 하나는 UI 상태를 부울이 아닌 문자열에 보관한다는 것입니다. 나는 보통 "유휴"과 같은 것으로 시작 하며이 경우 "로드", "성공"및 "실패"도 있습니다. UI 주가 두 상태 만있는 상황을 거의 만나지 않았기 때문에 부울 상태를 사용하지 않습니다. 이 목적을 위해 부울과 함께 일할 때, 당신은 그것을 점점 더 많은 주로 나누어야하며, 그들 모두를 확인하는 것이 점점 더 복잡해 질 수 있습니다.

그대로, 카트 페이지의 UI의 변경 사항을 다음과 같이 읽을 수있는 조건부로 반영 할 수 있습니다.

 
  <app-cart-display></app-cart-display>
섹션>


  <app-loader></app-loader>
섹션>


  <h2 id="성공"> 성공! </h2>
  <p> 구매 해주셔서 감사합니다. 영업일 기준 4 일 안에 품목을 받게 될 것입니다. </p>
  <p> 뭔가를 잊었 니? </p>

  
    <nuxt-link exact to="/"> 홈으로 돌아 가기 </nuxt-link>
  버튼>
섹션>


  <p> 죄송합니다. 뭔가 잘못되었습니다. 다시 시도하기 위해 카트로 리디렉션하십시오. </p>
섹션>

그리고 거기에 당신은 그것을 가지고 있습니다! 우리는 모두 NUXT, VUE 사이트에서 NETLIFY 기능을 갖춘 Stripe로 지불을 수락하기 위해 설정하고 실행 중이며 설정하기에는 복잡하지 않았습니다!

개츠비 응용 프로그램

우리는이 인스턴스에서 nuxt를 사용했지만 Gatsby와 같은 React를 사용하는 것과 동일한 종류의 기능을 설정하려면 플러그인이 있습니다. (모든 것이 Gatsby의 플러그인입니다. ☺️)

이 명령으로 설치합니다.

 원사 Gatsby-Plugin-Netlify-Funtions를 추가하십시오

… 다음과 같은 응용 프로그램에 플러그인을 추가하십시오.

 플러그인 : [
  {
    결의 :`Gatsby-Plugin-Netlify-Funtions`,
    옵션 : {
      functionssrc :`$ {__ dirname}/src/functions`,
      functionsOutput :`$ {__ dirname}/functions`,
    },
  },
]]

이 데모에 사용 된 서버리스 기능은 똑바로 JavaScript이므로 응용 프로그램을 반응 할 수도 있습니다. Stripe 스크립트를 Gatsby 앱에 추가하는 플러그인이 있습니다 (다시 모든 것이 플러그인입니다). 공정한 경고 : 사이트의 모든 페이지에 스크립트를 추가합니다. 클라이언트에 대한 신용 카드 정보를 수집하려면 위에서 사용한 VUE와 유사한 React Stripe 요소를 사용합니다.

클라이언트로부터 수집하고 기능이 기대하는 모든 정보를 전달하는지 확인하십시오.

• 사용자 이메일
• 중앙의 총 금액
• 토큰
• Idempotency 키

데모 사이트

Github Repo

진입 장벽이 낮 으면 Jamstack 응용 프로그램에서 실제로 역동적 인 경험을 할 수있는 방법을 알 수 있습니다. 서버의 유지 관리 비용없이 얼마나 많은 것을 달성 할 수 있는지 놀랍습니다. Stripe and Netlify Functions는 정적 애플리케이션에서 지불 처리를 설정하여 원활한 개발자 경험을 제공합니다!

위 내용은 Netlify 기능이있는 Jamstack 전자 상거래 상점을 구축하자의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!