Eleventy에 FaunaDB 연결

FaunaDB의 새로운 사용자로서 서버와 브라우저에서 설치하고 사용하기 시작한 간단성에 대해 인상적입니다.나는 FaunaDB가 내가 가장 좋아하는 정적 사이트 생성기Eleventy와 어떻게 통합되는지 빨리 이해하기로 결정했다.Eleventy(일명 11ty)는 개발자가 Jamstack(JavaScript, API 및 태그)을 사용하는 여러 가지 옵션 중 하나로 속도와 유연성으로 유명하다.저는 현재 Eleventy만 사용하고 있습니다. 이것은 정적 사이트를 구축하는 가장 좋은 방법이 되기 쉽습니다.여기서 Eleventy를 소개하지는 않겠지만 docs 더 많은 정보를 읽어 주십시오. 소개하고 싶으시면 Gift Egwuenus를 통해 이 좋은 글을 보십시오.
Jamstack 사이트가 본질적으로 정적이기 때문에 FaunaDB 데이터를 어떻게 통합합니까?나의 실험에서 나는 먼저 제품 데이터베이스를 만들었다.

각 제품은 매우 간단한 구조를 가지고 있다.

이름

가격

설명

배송 일수

나는 계기판을 사용하여 무작위로 제품을 만들었고, 나의 모든 창조력을 명칭과 설명에 사용했다.

네, 데이터가 있습니다.많지는 않지만 충분히 보여줄 수 있다.어떻게 Eleventy에 들어갑니까?Eleventy의 더 재미있는 특징 중 하나는 global data files 입니다.이 파일들은 사이트의 나머지 부분에 데이터를 제공한다.예를 들어, 하드 인코딩된 제품을 만들어서 제품이라고 명명할 수 있습니다.json:

[
    { "name": "foo", "price": 2.99, "description": "something", "shippingTimeInDays":9 },
    { "name": "goo", "price": 9.99, "description": "something else", "shippingTimeInDays":8 },
    { "name": "zoo", "price": 1.50, "description": "something more", "shippingTimeInDays":10 },
]

Eleventy 템플릿은 특수 폴더_data에 저장되면 사용할 수 있습니다.Eleventy의 또 다른 장점은 대량의 다른 템플릿 엔진을 지원한다는 것이다.개인적으로 가장 좋아하는 것은 액체이기 때문에 나는 그것을 사용할 것이다. 그러나 주의해라. Eleventy는 손잡이, 옥석 등도 지원한다.다음은 데이터를 활용하는 간단한 액체 템플릿입니다.

<h2>Our Products</h2>

<ul>
{% for product in products %}
<li>{{ product.name }} costs ${{ product.price }} and ships in {{ shippingTimeInDays }} days.</li>
{% endfor %}
</ul>

Eleventy가 실행될 때, 하드 인코딩된 JSON 파일을 읽어서 products 변수로 사용할 수 있도록 합니다. (파일 이름 때문에, 유사한 것을 사용하면 변수는 prods.json 이고, 리퀴드는 곱셈과 출력 값을 순환할 수 있습니다.
정적 데이터는 매우 유용할 수 있지만, 분명히 우리는 FaunaDB 데이터를 사용할 수 있기를 희망한다.일반 JSON 파일은 Eleventy에서 글로벌 데이터로 사용되지만 JavaScript 파일도 사용할 수 있습니다.이 파일들은 Eleventy가 사이트의 정적 구축을 만들 때 실행되며, FaunaDB와 통합하는 등 필요한 논리를 실행할 수 있습니다!다음은 FaunaDB에서 데이터를 가져온 예입니다.

const faunadb = require('faunadb'),
  q = faunadb.query;

module.exports = async function() {
    const client = new faunadb.Client({ secret: process.env.FAUNADB })

    let productObs = await client.query(
        q.Map(
            q.Paginate(q.Documents(q.Collection('products'))),
            q.Lambda(x => q.Get(x))
        )
    );
    let data = productObs.data.map(po => {
        return po.data;
    });
    console.log(data.length + ' products loaded from Fauna');
    return data;

}

나는 지금 prodsnpm 라이브러리를 사용하고 나의 제품을 요구하고 있다.모든 대상에 대해 나는 사실상 데이터만 필요로 하기 때문에 FaunaDB에서 정보를 얻은 후에 나는 곱셈 값 그룹으로 돌아간다.내가 구축할 때, faunadb 메시지는 로컬에 표시되고, 일이 정상적인지 확인하는 데 도움을 줄 것이다.
이어서 나는 나의 사이트를 위해 홈페이지를 세워 제품에 순환시켰다.템플릿:

--------
layout: main
title: Products
--------

<h2>Products</h2>

<ul>
{% for product in products %}
    <li><a href="/product/{{product.name | slug}}">{{product.name}}</a></li>
{% endfor %}
</ul>

위에서 보신 부분은frontmatter입니다. 이것은 Jamstack 프로그램에서 웹 메타데이터를 설정하는 데 자주 사용하는 방법입니다.이 예에서 나는 페이지의 레이아웃 파일과 제목을 지정했다.레이아웃 파일은 현재 페이지의 내용을 가져와 일부 태그에 삽입하기만 하면 됩니다.자세한 내용은 Eleventylayout 문서를 참조하십시오.
코드는 각 제품을 순환하고 나중에 공유할 제품 상세 정보 페이지를 가리키는 링크를 만듭니다.이 부분console.log은 필터를 보여 준다."Raymond Camden"과 같은 입력을 받아들여 파일 이름 보안 버전인 "Raymond Camden"을 만듭니다.최종 결과는 FaunaDB에 있는 내 데이터에 기반한 링크와 이름입니다.

제품은 FaunaDB 코드에 따라 되돌아오는 방식으로 정렬됩니다.나는 거기에서 분류할 수도 있고, 11시에 분류할 수도 있다.나로서는 기본 정렬에 만족한다.이제 제품 페이지를 살펴보겠습니다.
Eleventy 지원paginate 데이터큰 데이터 목록이 필요하고 동적으로 페이지를 만들 수 있습니다.또한 데이터 목록을 가져와 만들 수 있습니다 one page each.이것은 우리 이곳의 수요에 매우 적합하다.이것이 바로 내가 제품 템플릿을 정의하는 방식이다.

--------
layout: main
pagination:
   data: products
   size: 1
   alias: product
permalink: "/product/{{product.name | slug}}/"
eleventyComputed:
   title: "{{product.name}}"
--------

<h2>{{ product.name }}</h2>

<p>
{{product.description}}
</p>

<p>
It costs ${{product.price}} and ships in {{product.shippingTimeInDays}} days.
</p>

가장 중요한 것은 이곳이 좀 복잡하지만 이해할 수 있기를 바란다.나는 1의 페이지를 정의했는데 기본적으로 한 페이지의 제품이다.모든 제품에 영구 링크 (파일을 저장할 위치) 를 지정했습니다. 이 링크는 색인 페이지에서 링크하는 방식과 일치합니다.마지막 부분{{product.name | slug}}은 페이지를 기반으로 프론트에서 사용자 정의 값을 지정하는 해결 방안이다.기본적으로, 제목 값이 생성 중인 현재 제품에 기반을 두고 있는지 확인하는 것입니다.
앞의 일 후에 나는 단지 간단하게 제품을 전시했을 뿐이다.저장하면 Eleventy는 각 제품에 대한 페이지를 생성합니다.

색인 페이지로 돌아가면 를 클릭하여 제품 중 하나를 로드할 수 있습니다.

봐라, 우리는 끝났다!https://faunadbv1.vercel.app/ 이것은 당신을 매우 기쁘게 할 수도 있지만, 중요한 문제를 의식할 수도 있다.Eleventy는 웹 사이트가 구축될 때만 FaunaDB에서 제품을 로드합니다.만약 당신의 제품에 변화가 발생하면 어떻게 합니까?
다행히도 우리는 약간의 선택이 있다.우선, 많은 Jamstack 서비스는 터치 구축의 간단한 방법을 제공한다.Netlify, 예를 들어 숨겨진 URL을 공개할 수 있습니다. 프로그래밍을 통해 이 URL을 클릭하여 새로운 구축을 시작할 수 있습니다.어떤 과정을 사용해서 제품을 편집하든지 간에 새로운 구축을 시작하는 요청을 일으킬 수 있습니다.
너도 정기적으로 안배할 수 있다.예를 들어 물류 부서가 매일 발송 시간을 갱신하는 것을 알고 있다면 간단하게 재건 자동화를 할 수도 있고 매일 한 번 운행할 수도 있습니다.하지만 다른 방법을 생각해 보자.
FaunaDB는 데이터 처리에 사용되는 서버 사이드 라이브러리도 제공하고 클라이언트 라이브러리도 제공합니다.우리는 이미 구축할 때 11개의 제품을 불러왔고 각 제품에 대한 페이지를 만들었다.만약 우리가 그 중의 일부 데이터가 매우 정적(제품은 거의 추가하거나 삭제할 수 없음)이고 다른 일부는 매우 동적이라고 가정한다면 어떻게 해야 합니까?사이트를 업데이트하여 eleventyComputed 값을 클라이언트에 불러오고 항상 최신으로 만듭니다.
먼저 각 제품의 ID를 복사하기 위해 데이터 파일을 수정했습니다.

const faunadb = require('faunadb'),
  q = faunadb.query;

module.exports = async function() {
    const client = new faunadb.Client({ secret: process.env.FAUNADB })

    let productObs = await client.query(
        q.Map(
            q.Paginate(q.Documents(q.Collection('products'))),
            q.Lambda(x => q.Get(x))
        )
    );
    let data = productObs.data.map(po => {
        let result = po.data;
        //add the id
        result.id = po.ref.id;
        return result;
    });
    console.log(data.length + ' products loaded from Fauna');
    return data;

}

순환에서 shippingTimeInDays 을 캡처하고 ref.id 속성으로 지정하는 것을 볼 수 있습니다.이제 제품 템플릿을 살펴보겠습니다.

--------
layout: main
pagination:
   data: products
   size: 1
   alias: product
permalink: "/product/{{product.name | slug}}/"
eleventyComputed:
   title: "{{product.name}}"
--------

<h2>{{ product.name }}</h2>

<p>
{{product.description}}
</p>

<p>
It costs ${{product.price}}.
</p>

<p>
Availability: <span id="availabilityText"><i>Fetching...</i></span>
</p>

<script src="//cdn.jsdelivr.net/npm/faunadb@latest/dist/faunadb-min.js"></script>
<script>
const pid = '{{product.id}}';

document.addEventListener('DOMContentLoaded', async () => {
   let availabilityText = document.querySelector('#availabilityText');

   console.log('product page, load '+pid);
   let client = new faunadb.Client({ secret: 'fnAD0SNbNaACE9yDvC7hoFJRJQR35uwJZOjl2qpa' });
   let q = faunadb.query;

   let result = await client.query(
      q.Get(q.Ref(q.Collection('products'), pid))
   );
   let product = result.data;
   console.log(product);
   availabilityText.innerHTML = `Ships in ${product.shippingTimeInDays} days.`;

}, false);
</script>

하드 인코딩의 가용성 값을 삭제하고 "캡처"메시지로 바꾸기 위해 HTML을 수정했습니다.이 값은 JavaScript를 통해 업데이트됩니다.간단하게 보기 위해서 나는 코드를 페이지 자체에 놓았다.이것은 간단한 요구가 아니다. 나는 할 수도 있고, 절대로 그것을 자신의 파일에 넣어야 한다.코드가 상당히 간단하다는 얘기다.ID 값은 사이트를 구축할 때 생성됩니다.제품 페이지마다 id 값이 다릅니다.FaunaDB 클라이언트 라이브러리를 사용하여 하나의 제품만 검색하고 나면 HTML을 결과로 업데이트합니다.주의 - 여기서 사용하는 키는 FaunaDB 대시보드에서 생성된 읽기 전용 키입니다.데이터를 수정할 수 없기 때문에 JavaScript에서 사용하는 것이 안전합니다.
예:

지금 나는 쌍방이 모두 아름답다.나는 동적 내용으로 구동되는 정적 사이트를 가지고 있는데, 적재 속도가 매우 빠르지만, 여전히 나의 사용자에게 최신 출하 평가를 제공할 수 있다.(여기서 이 버전을 시연할 수 있습니다: https://faunadbv2.vercel.app/
Fauna DB와 Eleventy를 빠르게 훑어보는 이 글이 Jamstack에 대해 전체적으로 흥분할 수 있기를 바랍니다.Jamstack에 대한 자세한 내용은 https://jamstack.org/를 참조하십시오.그 밖에 당신은 이곳에서 이 글의 프레젠테이션 파일을 얻을 수 있습니다. https://github.com/cfjedimaster/eleventy-demos/tree/master/fauna_test/
사진은 Patrick Hendry 에서 Unsplash