정적 우선 : 서버리스 렌더링이 폴백으로 사전 생성 된 Jamstack 사이트

Jamstack Architecture는 점점 더 많은 관심을 끌고 있으며 웹 사이트 구축의 효율적인 방법을 제공합니다.

Jamstack의 핵심 원칙 중 하나는 사전 렌더링입니다. 이는 일련의 정적 리소스를 미리 생성하여 CDN 또는 기타 최적화 된 정적 호스팅 환경의 방문자가 가장 빠른 속도와 가장 낮은 오버 헤드로 서비스를 제공 할 수 있음을 의미합니다.

그러나 우리가 웹 사이트를 미리 전 세계를 사전에 보내려면 어떻게 웹 사이트를 더 역동적으로 보이게 할 수 있습니까? 자주 변경이 필요한 웹 사이트를 구축하는 방법은 무엇입니까? 사용자 생성 콘텐츠를 처리하는 방법은 무엇입니까?

실제로 이것은 서버리스 기능을위한 이상적인 응용 프로그램 시나리오입니다. Jamstack과 Serverless는 최고의 파트너이며 서로 완벽하게 보완합니다.

이 기사는 패턴을 탐색합니다. 거의 전적으로 사용자 생성 된 컨텐츠로 구성된 웹 사이트에서 Serverless 기능을 사전 생성 된 페이지의 백업 솔루션으로 사용합니다. 404 페이지가 서버리스 렌더링을 동적으로 추가하는 서버리스 기능 인 낙관적 URL 라우팅 기술을 채택합니다.

복잡한 것 같나요? 아마도. 그러나 작동합니까? 절대적으로 효과적입니다!

데모 웹 사이트를 사용 하여이 사용 사례에 대해 알아볼 수 있습니다. 그러나이 기사를 읽은 후 시도하십시오.

돌아 왔어? 좋아, 그것에 뛰어 들자.

이 샘플 웹 사이트의 철학은 다음과 같습니다. 친구에게 보낼 따뜻한 메시지와 가상 격려 메시지를 만들 수 있습니다. 메시지를 작성하고 Lollipop (또는 미국 친구들을 위해 아이스 사이클)을 사용자 정의하고 수신자와 공유 할 URL을 얻을 수 있습니다. 그게 다야, 당신은 그들의 하루를 밝혔습니다. 이것보다 더 나은?

전통적으로 일부 서버 측 스크립트를 사용하여 양식 제출을 처리하고 데이터베이스에 새로운 롤리팝 (사용자 생성 컨텐츠)을 추가하고 고유 한 URL을 생성합니다. 그런 다음 더 많은 서버 측로 로직을 사용 하여이 페이지에 요청을 구문 분석하고 데이터베이스를 쿼리하여 페이지보기를 채우고 적절한 템플릿으로 렌더링하고 사용자에게 반환하는 데 필요한 데이터를 가져옵니다.

이것은 합리적으로 보입니다.

그러나 확장 비용은 얼마입니까?

기술 건축가와 기술 감독자는 프로젝트의 범위를 평가할 때 종종이 문제에 직면합니다. 그들은 성공적인 상황에 대처하기 위해 충분한 자원을 계획, 지불 및 할당해야합니다.

이 가상 Lollipop 웹 사이트는 일반적인 장식이 아닙니다. 우리 모두가 서로 긍정적 인 메시지를 보내고 싶어하기 때문에이 사이트는 저를 억만 장자로 만들 것입니다! 뉴스가 퍼지면서 트래픽 수준이 급등합니다. 서버가 무거운 하중을 처리 할 수 ​​있도록 좋은 전략을 가질 수 있습니다. 캐시 계층, 일부로드 밸런서를 추가 할 수 있으며 데이터베이스 및 데이터베이스 서버를 설계하여 이러한 모든 막대 사탕을 생성하고 제공 할 필요성에 압도되지 않고로드를 공유 할 수 있습니다.

그러나… 나는 이런 일을하는 방법을 모른다.

그리고 이러한 인프라를 추가하고 계속 실행하는 데 드는 비용이 얼마나 드는지 모르겠습니다. 이것은 복잡합니다.

그렇기 때문에 사전 렌더링으로 호스팅을 가능한 한 단순화하고 싶습니다.

정적 페이지를 제공하는 것은 웹 서버에서 동적으로 페이지를 제공하는 것보다 훨씬 간단하고 저렴합니다.

우리는 많은 사용자 생성 콘텐츠를 작업하고 있기 때문에 여전히 데이터베이스를 사용하는 것이 합리적이지만 직접 관리하지는 않습니다. 대신 서비스로 사용할 수있는 많은 데이터베이스 옵션 중 하나를 선택하겠습니다. API를 통해 상호 작용하겠습니다.

FireBase, MongoDB 또는 다른 수의 데이터베이스를 선택할 수 있습니다. Chris는 이러한 리소스 중 일부를 서버리스 리소스에 대한 훌륭한 웹 사이트에서 컴파일했습니다.

이 경우 동물 군을 DataStore로 선택합니다. 동물 군은 데이터를 저장하고 쿼리하기위한 훌륭한 API를 제공합니다. SQL이 아닌 스타일의 데이터 저장소이며 정확히 필요한 것입니다.

결정적으로, 동물 군은 데이터베이스 서비스를 제공하기위한 완벽한 비즈니스를 만들었습니다. 그들은 내가 가질 수없는 깊은 도메인 지식을 가지고 있습니다. 이와 같은 데이터베이스로 서비스 제공 업체를 사용함으로써 고 가용성 인프라, 용량 및 규정 준수 보안, 숙련 된 지원 엔지니어 및 광범위한 문서를 포함하여 프로젝트 전문가 데이터 서비스 팀을 물려 받았습니다 .

직접하는 대신, 그와 같은 타사 서비스를 사용하십시오.

아키텍처 tl; dr

개념 증명을 다룰 때, 나는 종종 논리적 흐름을 낙서하고 있습니다. 이 웹 사이트를 위해 만든 낙서는 다음과 같습니다.

그리고 몇 가지 설명 :

1. 사용자는 일반적인 HTML 양식을 작성하여 새로운 롤리팝을 만듭니다.
2. 새로운 컨텐츠가 데이터베이스에 저장되며 제출은 새로운 사이트 생성 및 배포를 유발합니다.
3. 사이트가 배포되면 새로운 Lollipop은 고유 한 URL을 통해 액세스 할 수 있습니다. 데이터베이스 쿼리 나 서버에 의존하지 않고 CDN에서 빠르게 제공되는 정적 페이지가됩니다.
4. 사이트 생성이 완료 될 때까지 정적 페이지로 새로운 Lollipop에 액세스 할 수 없습니다. Lollipop 페이지에 대한 실패는 동적 쿼리 데이터베이스 API를 통해 Lollipop 페이지를 동적으로 생성하는 페이지로 돌아갑니다.

이 접근법은 먼저 정적/사전 생성 리소스를 가정 한 다음 정적보기를 사용할 수 없을 때 동적 렌더링으로 돌아갑니다.

보다 자세한 설명

웹 사이트의 코드를 직접 파헤칠 수 있습니다 (오픈 소스이며 원하는만큼 탐색 할 수 있음).

더 깊이 파고이 예제의 구현을 탐색하고 싶습니까? 좋아, 더 자세히 설명하겠습니다.

• 각 페이지를 생성하려면 데이터베이스에서 데이터를 가져옵니다
• 서버리스 기능을 사용하여 데이터를 데이터베이스 API에 게시합니다
• 완전한 사이트 재생을 트리거합니다
• 페이지가 생성되지 않은 경우 주문형 렌더링

데이터베이스에서 페이지를 생성합니다

나중에 데이터를 데이터베이스에 게시하는 방법에 대해 논의하지만 먼저 데이터베이스에 이미 일부 항목이 있다고 가정 해 봅시다. 각 항목의 페이지가 포함 된 웹 사이트를 생성 할 예정입니다.

정적 웹 사이트 생성기는 이것에 매우 능숙합니다. 그들은 데이터를 처리하고 템플릿에 적용하며 HTML 파일을 제공 할 준비가되었습니다. 이 예제에는 모든 생성기를 사용할 수 있습니다. 나는 비교적 단순하고 현장 생성이 빠르기 때문에 Eleventy를 선택했습니다.

Eleventy에 일부 데이터를 제공하기 위해서는 많은 옵션이 있습니다. 한 가지 방법은 구조화 된 데이터를 반환하는 JavaScript를 제공하는 것입니다. 데이터베이스 API를 쿼리하는 데 좋습니다.

Eleventy Data 파일은 다음과 같습니다.

 <code>// 设置与Fauna 数据库的连接。 // 使用环境变量进行身份验证// 并访问数据库。 const faunadb = require('faunadb'); const q = faunadb.query; const client = new faunadb.Client({ secret: process.env.FAUNADB_SERVER_SECRET }); module.exports = () => { return new Promise((resolve, reject) => { // 获取最新的100,000 个条目（为了我们的示例） client.query( q.Paginate(q.Match(q.Ref("indexes/all_lollies")),{size:100000}) ).then((response) => { // 获取每个条目的所有数据const lollies = response.data; const getAllDataQuery = lollies.map((ref) => { return q.Get(ref); }); return client.query(getAllDataQuery).then((ret) => { // 将数据发送回Eleventy 以用于站点构建resolve(ret); }); }).catch((error) => { console.log("error", error); reject(error); }); }) }</code>

나는이 파일을 lollies.js라고 명명했으며 Lollies라는 컬렉션에서 Eleventy에서 반환 할 수있는 모든 데이터를 사용할 수 있습니다.

이제 템플릿에서 해당 데이터를 사용할 수 있습니다. 해당 데이터를 취하고 각 프로젝트에 대한 페이지를 생성하는 코드를 보려면 코드 리포지토리에서 볼 수 있습니다.

서버없이 데이터를 제출하고 저장합니다

새 Lollipop 페이지를 만들 때 사용자 컨텐츠를 데이터베이스에 캡처하여 향후 주어진 URL 페이지를 채우는 데 사용할 수 있습니다. 이를 위해 기존 HTML 양식을 사용하여 데이터를 적절한 양식 처리기에 게시합니다.

양식은 다음과 같습니다 (또는 저장소의 전체 코드를 참조하십시오).

<code></code>

수신자는 발신자가 호스팅 체계에 웹 서버를 가지고 있지 않다고 말 하므로이 양식에서 제출 된 HTTP 게시 요청을 처리 할 수있는 장소를 설계해야합니다. 이것은 서버리스 기능의 완벽한 사용 사례입니다. 나는 이것에 netlify 함수를 사용하고 있습니다. 원하는 경우 AWS Lambda, Google Cloud 또는 Azure 기능을 사용할 수 있지만 NetLify 기능 워크 플로우의 단순성과 동일한 코드 저장소에서 서버리스 API와 UI를 유지한다는 사실이 마음에 듭니다.

백엔드 구현 세부 정보를 프론트 엔드로 유출하는 것은 좋은 습관입니다. 명확한 분리는 일을 더 쉽게 이식하고 깔끔하게 만드는 데 도움이됩니다. 위의 양식 요소의 조치 속성을 확인하십시오. 내 웹 사이트에서 /new라는 경로에 데이터를 게시하는데, 이는 실제로 어떤 서비스가 통신할지 힌트를주지 않습니다.

우리는 리디렉션을 사용하는 모든 서비스로 라우팅 할 수 있습니다. 이 프로젝트에서 구성 할 Serverless 함수로 전송하고 있지만 원하는 경우 다른 곳으로 데이터를 보내도록 쉽게 사용자 지정할 수 있습니다. NetLify는 사용자가 CDN 수준에서 트래픽을 지시하는 간단하고 최적화 된 리디렉션 엔진을 제공하여 사용자가 올바른 위치로 매우 빠르게 경로를 발전시킬 수 있습니다.

다음 리디렉션 규칙 (내 프로젝트의 NetLify.TOML 파일에 위치)은 NetLify functions에서 호스팅 한 NewLolly.js라는 서버리스 기능에 대한 요청을 프록시합니다.

 <code># 将“new”URL 解析为函数[[redirects]] from = "/new" to = "/.netlify/functions/newLolly" status = 200</code>

서버리스 기능을 살펴 보겠습니다.

• 새 데이터를 데이터베이스에 저장하고
• 새 페이지에 새 URL을 만듭니다
• 결과를 볼 수 있도록 사용자를 새로 만든 페이지로 리디렉션하십시오.

먼저, 데이터를 구문 분석하고 동물 군 데이터베이스에 연결하고 새로운 Lollipop에 대한 짧은 읽기 쉬운 ID를 생성하려면 다양한 유틸리티가 필요합니다.

 <code>const faunadb = require('faunadb'); // 用于访问FaunaDB const shortid = require('shortid'); // 生成短唯一URL const querystring = require('querystring'); // 帮助我们解析表单数据// 首先，我们使用我们的数据库设置一个新的连接。 // 环境变量帮助我们安全地连接// 到正确的数据库。 const q = faunadb.query const client = new faunadb.Client({ secret: process.env.FAUNADB_SERVER_SECRET })</code>

이제 서버리스 기능을 처리하기 위해 요청에 일부 코드를 추가합니다. 핸들러 함수는 양식 제출에서 필요한 데이터를 가져 오도록 요청을 구문 분석 한 다음 새 Lollipop에 고유 한 ID를 생성 한 다음 새 레코드로 데이터베이스로 작성합니다.

 <code>// 处理对无服务器函数的请求exports.handler = (event, context, callback) => { // 获取表单数据const data = querystring.parse(event.body); // 添加一个唯一的路径ID。并记下它- 我们稍后会将用户发送到它const uniquePath = shortid.generate(); data.lollyPath = uniquePath; // 组装准备发送到数据库的数据const lolly = { data: data }; // 在fauna db 中创建棒棒糖条目client.query(q.Create(q.Ref('classes/lollies'), lolly)) .then((response) => { // 成功！将用户重定向到此新棒棒糖页面的唯一URL return callback(null, { statusCode: 302, headers: { Location: `/lolly/${uniquePath}`, } }); }).catch((error) => { console.log('error', error); // 错误！返回带有statusCode 400 的错误return callback(null, { statusCode: 400, body: JSON.stringify(error) }); }); }</code>

우리의 진행 상황을 확인합시다. 데이터베이스에서 새로운 Lollipop 페이지를 만들 수있는 방법이 있습니다. 또한 각실 각실에 대한 페이지를 생성하는 자동 빌드가 있습니다.

각 Lollipop에 대한 전체 사전 생성 페이지 세트가 있는지 확인하려면 새 항목이 데이터베이스에 성공적으로 추가 될 때마다 재 구축을 트리거해야합니다. 이것은 매우 쉽습니다. 정적 웹 사이트 생성기 덕분에 빌드가 자동화되었습니다. 우리는 그것을 트리거하는 한 가지 방법 만 있으면됩니다. NetLify를 사용하면 수많은 빌드 후크를 정의 할 수 있습니다. 그들은 WebHooks이며 HTTP Post 요청을 받으면 사이트를 재건하고 배포합니다. 이것은 NetLify의 사이트 관리 콘솔에서 만든 것입니다.

데이터베이스에 기록 된 각 Lollipop의 페이지를 포함하여 사이트를 재생하기 위해 새 데이터를 데이터베이스에 저장 한 직후이 빌드 후크에 HTTP Post 요청을 발행 할 수 있습니다.

다음은 다음과 같은 코드입니다.

 <code>const axios = require('axios'); // 简化发出HTTP POST 请求// 触发新的构建以永久冻结此棒棒糖axios.post('https://api.netlify.com/build_hooks/5d46fa20da4a1b70XXXXXXXXX') .then(function (response) { // 在无服务器函数的日志中报告console.log(response); }) .catch(function (error) { // 描述无服务器函数日志中的任何错误console.log(error); });</code>

데이터베이스 삽입을위한 성공적인 핸들러에 추가 된 전체 코드로 볼 수 있습니다.

새로운 Lollipop의 URL을 수신자와 공유하기 전에 빌드 및 배포가 완료되기를 기다리려면 모두 좋습니다. 그러나 우리는 인내심이 없으며 방금 만든 롤리팝에 대한 새로운 URL을 얻을 때 즉시 공유하고 싶습니다.

불행히도, 사이트가 새 페이지를 포함시키기 위해 재생을 완료하기 전에 URL에 액세스하면 404를 얻을 것입니다. 그러나이 404를 활용하게되어 기쁩니다.

낙관적 URL 라우팅 및 서버리스 백업 시나리오

Custom 404 라우팅을 사용하여 실패한 요청을 Lollipop 페이지로 보내 데이터베이스에서 Lollipop 데이터를 직접 찾을 수있는 페이지로 보낼 수 있습니다. 원하는 경우 클라이언트 JavaScript 에서이 작업을 수행 할 수 있지만 더 좋은 방법은 서버리스 기능에서 볼 준비가 된 페이지를 동적으로 생성하는 것입니다.

이 방법은 다음과 같습니다.

먼저, Lollipop 페이지에 액세스하려는 모든 요청 (이 요청은 비어 있음)을 대신 서버리스 기능으로 이동하도록 지시해야합니다. NetLify 리디렉션 구성에 다른 규칙을 추가하여이를 수행합니다.

 <code># 未找到的棒棒糖应该直接代理到API [[redirects]] from = "/lolly/*" to = "/.netlify/functions/showLolly?id=:splat" status = 302</code>

이 규칙은 Lollipop 페이지에 대한 요청이 정적 페이지를 제공 할 준비가되지 않은 경우에만 적용됩니다. 서버리스 기능에 임시 리디렉션 (HTTP 302)을 만듭니다.

 <code>const faunadb = require('faunadb'); // 用于访问FaunaDB const pageTemplate = require('./lollyTemplate.js'); // JS 模板文字// 设置和授权Fauna DB 客户端const q = faunadb.query; const client = new faunadb.Client({ secret: process.env.FAUNADB_SERVER_SECRET }); exports.handler = (event, context, callback) => { // 从请求中获取棒棒糖ID const path = event.queryStringParameters.id.replace("/", ""); // 在DB 中查找棒棒糖数据client.query( q.Get(q.Match(q.Index("lolly_by_path"), path)) ).then((response) => { // 如果找到，则返回视图return callback(null, { statusCode: 200, body: pageTemplate(response.data) }); }).catch((error) => { // 未找到或发生错误，将悲伤的用户发送到通用错误页面console.log('Error:', error); return callback(null, { body: JSON.stringify(error), statusCode: 301, headers: { Location: `/melted/index.html`, } }); }); }</code>

다른 페이지 (사이트의 / lolly / path 내부가 아닌)에 대한 요청이 404를 반환하는 경우 해당 요청을 서버리스 기능으로 보내서 막대기를 확인하지 않습니다. 우리는 사용자를 404 페이지로 직접 보낼 수 있습니다. NetLify.tOML 구성을 통해 파일에 더 많은 폴백 규칙을 추가하여 404 개의 라우팅 레벨을 정의 할 수 있습니다. 파일의 첫 번째 성공적인 경기가 채택됩니다.

 <code># 未找到的棒棒糖应该直接代理到API [[redirects]] from = "/lolly/*" to = "/.netlify/functions/showLolly?id=:splat" status = 302 # 真正的404 可以直接转到这里： [[redirects]] from = "/*" to = "/melted/index.html" status = 404</code>

우리는 끝났어! 이제 URL이 정적 파일로 생성되지 않은 경우 서버리스 기능을 사용하여 컨텐츠를 동적으로 렌더링하려고하는 "정적 첫 번째"사이트가 있습니다.

매우 빠릅니다!

더 큰 규모를 지원합니다

새로운 항목이 생성 될 때마다 Lollipop 페이지를 재생하기위한 빌드를 트리거하는 기술이 항상 최고는 아닙니다. 빌드의 자동화는 사이트의 재배치가 매우 간단하다는 것을 의미하지만, 우리는 매우 인기를 얻기 시작할 때 물건을 제한하고 최적화하기를 원할 수 있습니다. (단지 시간 문제일까요?)

중요하지 않습니다. 데이터베이스에서 많은 페이지를 만들고 콘텐츠를 더 자주 추가 할 때 고려해야 할 사항은 다음과 같습니다.

• 새 항목마다 재건을 트리거하는 대신 사이트를 예정된 작업으로 재 구축 할 수 있습니다. 어쩌면 이것은 시간당 또는 하루에 한 번 일어날 수 있습니다.
• 하루에 한 번 구축 된 경우 지난 날에 제출 된 새로운 롤리팝에 대해서만 페이지를 생성하고 향후 사용하기 위해 매일 생성되는 페이지를 캐시하기로 결정할 수 있습니다. 빌드 의이 논리는 빌드를 너무 길게 만들지 않고 많은 수의 롤리팝 페이지를 지원하는 데 도움이됩니다. 그러나 나는 여기서 빌드 내 캐시에 대해 이야기하지 않을 것입니다. 궁금한 점이 있으면 NetLify 커뮤니티 포럼에서 물어볼 수 있습니다.

정적 사전 생성 리소스를 동적 렌더링을 제공하는 서버리스 백업 솔루션과 결합함으로써 놀랍도록 광범위한 사용 사례를 충족시켜 많은 동적 인프라를 구성하고 유지 관리 할 필요가 없습니다.

이 "정적 첫 번째"접근 방식을 사용하여 어떤 다른 사용 사례를 사용할 수 있습니까?

위 내용은 정적 우선 : 서버리스 렌더링이 폴백으로 사전 생성 된 Jamstack 사이트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!