Jamstack 소개 : 안전한 고성능 사이트를 구축하십시오-JS 튜토리얼-php.cn

<:> Jamstack : 더 빠르고 안전하며 확장 가능한 웹 사이트를위한 최신 아키텍처를 구축하십시오

사진에 의해 제공된 그림 : netlify Introduction to the Jamstack: Build Secure, High-Performance Sites 최근 몇 년 동안 웹 개발 기술은 매일 매일 변화하고 있습니다. 이 기사는 Jamstack 아키텍처를 소개하고 개념과 장점을 명확하게합니다.

과거에 램프 아키텍처는 동적 웹 사이트의 개발을 지배했습니다. 그 후, 평균 아키텍처는 새로운 세대의 웹 응용 프로그램의 기초를 마련했습니다. 오늘날 API와 재사용 가능한 구성 요소가 증가함에 따라 정적 웹 사이트가 다시 트렌드가되었습니다. 이것은 "기본으로 돌아가는"방법이지만 정확히 그렇지는 않습니다.

코어 포인트 : Jamstack은 더 빠르고 안전하며 확장 가능한 웹 사이트를 만드는 데 도움이되는 최신 웹 개발 아키텍처입니다. JavaScript (J), API (A) 및 Markup (M)의 조합을 나타내며, 작업 스타일은 전 세계의 많은 개발자에게 영감을주었습니다. Jamstack은 동적 웹 사이트를 정적 웹 사이트로 변환하여 속도를 크게 향상시키고 보안을 향상시키고 SEO를 향상시킵니다. 정적 사이트 생성기를 사용하여 기사 및 페이지를 만들고, 정적 컨텐츠를 코드 리포지토리와 동기화하고, 배포 프로세스를 자동화하여 수행 할 수 있습니다.

Jamstack은 전역 배포, 자동화 된 파이프 라인 및 사전 렌더링 된 페이지에 CDN을 사용하여 기존의 풀 스택 개발에 비해 속도를 향상시킵니다. 또한 API 및 마이크로 서비스를 통해 프론트 엔드 및 백엔드의 디커플링을 허용하며 단일 기술 스택 인 JavaScript를 사용합니다.

Jamstack이란 무엇입니까?

Jamstack은 최신 웹을 재정의하여 더 빠르고 안전한 웹 사이트를 구축하는 아키텍처입니다. 이 사이트는 확장 가능하고 올바른 도구 세트를 사용하여 개발하고 유지하기가 더 쉽습니다 (더 재미).

이 용어를 분해합시다 :

j는 JavaScript를 나타냅니다. Netscape가 1995 년에 JavaScript를 출시 한 이후로 성장했습니다. 반응 형 및 점진적인 라이브러리를 사용하면 모바일 애플리케이션과 거의 동일한 웹 응용 프로그램을 설계 할 수 있습니다.

a는 API를 나타냅니다. 모든 기능을 직접 작성하는 대신 많은 작업을 처리하기 위해 제 3 자에게 의존 할 수 있습니다.

개발 된 구성 요소를 재사용하거나 유지하기 쉬운 새로운 구성 요소를 만들 수 있습니다.

이게 과대 광고입니까?

예, 어느 정도까지. "Jamstack"이라는 용어 (원래 Jamstack으로 양식화)는 NetLify에 의해 만들어졌으며 "현대 웹 프로젝트 자동화를위한 모든 라운드 플랫폼"을 홍보했습니다. Jamstack의 원칙은 웹 구성 요소와 API가 한동안 주변에 있었기 때문에 완전히 새로운 것은 아닙니다.

그러나 그 해에 Ajax와 Jamstack이라는 XMLHTTPREQUEST (XHR) API가 존재했던 XMLHTTPREQUEST (XHR) API에 의해 다른 회사 인 Adaptive Path에서 Ajax (비동기 자바 스크립트 및 XML)가 만든 것과 매우 유사합니다. 기존 철학에 대한 상쾌한 개선은 지역 사회가 빠르게 채택한 합법적 인 목적을 가지고 있습니다. 이 과대 광고는 가치가 있습니다.이 방법은 전 세계의 많은 개발자들에게 영감을주었습니다.

?> 정적 웹 사이트?

"정적 웹 사이트"는 "동적 웹 사이트"와 반대입니다. 그렇다면 간단한 HTML 파일 만 사용하여 풍부하고 역동적 인 상호 작용을 어떻게 제공 할 수 있습니까? 대답은 JavaScript입니다.

JavaScript는 첫 번째 브라우저 전쟁 이후 많은 변화를 겪었으며 Node.js의 출현과 React, Angular 및 Vue.js와 같은 라이브러리의 출현으로 보편적 인 프로그래밍 언어 상태로 자체적으로 통합되었습니다. 고급 사용자 인터페이스 (UIS) 설계 가능성은 끝이 없습니다.

물론, JavaScript는 만병 통치약이 아닙니다. 데이터 분석 또는 AI에 사용하지 않을 가능성이 높습니다. 그러나 웹 개발의 경우 API와 관련이 거의 없으며 JavaScript 방법으로는 할 수 없습니다. 누군가가 마이크로 서비스를 만들었을 가능성이 높기 때문입니다.

그리고 이러한 모든 프로세스와 마크 업을 재사용 가능한 구성 요소로 캡슐화 할 수 있다면 특정 기능이 필요한 경우 언제든지 연결할 수 있습니다.

이것은 j · a · m 스택입니다 : JavaScript, API, 태그입니다.

디퍼 커플 링, 헤드리스, 마이크로 서비스, 서버리스 ... 죄송합니다.이게 뭐야?

이 모든 것은 웹 개발의 뜨거운 주제이며 밀접하게 관련되어 있지만 정확히 동일하지는 않습니다. 이 용어를 자주들을 수 있으므로 처음부터 일부를 명확히하겠습니다.

커플 링 및 디커플링 및 헤드리스 커플 링

는 웹 사이트의 백엔드에 생성, 관리 및 저장되는 웹 사이트의 내용 (데이터베이스가 WordPress 관리자 패널과 같은 위치)을 나타냅니다. 그런 다음이 컨텐츠는 백엔드에서 추출되어 프론트 엔드 인터페이스 (예 : WordPress 템플릿)를 통해 브라우저에서 표시됩니다. 어느 정도 "커플 링 된"응용 프로그램은 전통적으로 "풀 스택"응용 프로그램이며 백엔드 및 프론트 엔드는 동일한 응용 프로그램의 다른 측면입니다.

대조적으로, 디퍼 커플 링

는 백엔드와 프론트 엔드가 별도로 관리된다는 것을 의미합니다. 즉, 데이터베이스 및 관리 도구가 한 서버에 있고 프론트 엔드는 다른 서버에 위치한다는 것을 의미합니다. . 물론, 일반적으로 API를 연결하려면 매체가 필요합니다. 또한 백엔드가 실제로 프론트 엔드와 분리되어 있으므로 실제로 다른 위치에 여러 개의 프론트 엔드가있을 수 있습니다! (Shopify와 같은 동일한 엔진을 사용하여 다른 매장에 대해 생각하십시오.)

요컨대, 헤드리스

소프트웨어

에는 프론트 엔드 또는 프레젠테이션 레이어가 전혀 없습니다. 예를 들어, 헤드리스 CMS는 정적 콘텐츠를 생성하고 모바일 애플리케이션, IoT 장치, 정적 웹 사이트와 같은 곳에서 푸시 할 수 있습니다. 분명히, 이것은 또한 "분리"상황이지만 여기서는 API가 필요하지 않을 수도 있습니다. 서비스를위한 정적 HTML 파일로 게시물을 내보내는 WordPress 엔진을 생각해보십시오. 이것은 헤드리스입니다. 사실, 당신은 이제 이런 식으로 생성 된 페이지에 있습니다.

모노 바디 (단단히 결합) 및 마이크로 서비스 (느슨하게 결합) 간단히 말해서,

monotype

는 전체적으로 구축 된

소프트웨어로 정의 할 수 있습니다. 예제에는 모바일 애플리케이션, 컴퓨터에 설치할 수있는 대부분의 응용 프로그램 및 WordPress와 같은 웹 응용 프로그램이 포함될 수 있습니다. 이러한 애플리케이션에는 여전히 내부 "모듈"또는 "구성 요소"가있을 수 있지만 응용 프로그램의 필수 부분이 없기 때문에 응용 프로그램이 작동하지 않기 때문에 이들은 단단히 결합되어 있다고 말합니다. 반면에, 느슨하게 결합 된 소프트웨어 구성 요소는 제거 또는 교체 할 수있는 플러그인처럼 작동하며 기능이 변경 될 수 있지만 응용 프로그램의 핵심은 여전히 작동 할 수 있습니다. 이 원칙은 제 3 자 API (일반적으로 "마이크로 서비스"라고 함)를 통해 "아웃소싱"기능을 허용합니다. 이들은 본질적으로 애플리케이션에 필수적이지 않은 접근성 기능 (이미지 크기 조정, 로그인, 스토리지)을 제공하기 때문입니다. 서버리스 및 기존 컴퓨팅 정통, "Serverless"는 약간의 오해입니다. 어떤 종류의 컴퓨팅 작업을하든 서버가 참여할 것입니다. 그러나 서버에 액세스하고 관리하는 방법은 매우 다를 수 있습니다. 기존 모델 에는 실제 물리적 서버 (때로는 베어 메탈이라고도 함) 또는 물리적 서버의 A에 리소스와 다른 사용자에게 리소스가 할당되는 가상 개인 서버가있을 수 있습니다. 자원은 제한되어 있으며 자원의 100%를 사용하든 아니든 마치 마치 마치 마치 마치 마치 자원을 지불해야합니다. 서버리스 모델에서 많은 서버가 서로 연결되어 거대한 리소스 풀을 제공합니다. 필요한 경우 필요한 자원을 추출하여 필요에 따라 (위아래로) 확장하십시오. 실제 서버가 귀하의 것이라는 것을 실제로 확신 할 수는 없습니다. 리소스의 출처는 어디에서 나오는지 알고 있습니다.

전통적인 모델 서버리스 모델

자원이 제한된 물리 서버 무제한 리소스 풀

실패가 발생하기 쉬운 (예 : 하드 디스크 고장) 보다 신뢰할 수있는 아키텍처*

제한된 확장 성 무제한 확장 성

유휴 서비스를 포함한 모든 수수료를 지불하십시오 사용에 대한 지불 (주문에 대한 지불) 간단하고 사용하기 쉬운 배우고 구현해야합니다

** 하드 디스크, CPU 및 메모리 칩 고장은 여전히 발생합니다. 그러나 리소스가 투명하게 할당되므로 하드웨어가 실패하고 대체 되더라도 알 수 없습니다. Jamstack의 실용적인 예 특히 이러한 개념에 익숙하지 않은 경우 많은 것들이 있습니다. 따라서 이론에서 벗어나 실생활에서 Jamstack의 실제 적용 중 일부를 보자. <:> 사례 연구 1 : WordPress를 10 배 속도 로 정적 웹 사이트로 변환합니다. 정적이 최선의 선택이라면 동적 WordPress (WP) 블로그를 정적 블로그로 변환하는 것보다 더 나은 것은 무엇입니까? 그렇게함으로써, 우리는 페이지 로딩 속도와 대기 시간을 적어도 몇 배 이상 줄이고 보안을 크게 향상 시키며 동시에 SEO를 향상시킵니다. 요컨대, 프로세스는 다음과 같습니다

정적 사이트 생성기 (SSG)를 사용하여 WP에서 기사와 페이지를 만들지 만 정적 형식 (Text, Markdown, HTML)으로 만듭니다. Github, Gitlab 또는 Bitbucket의 저장소와 정적 컨텐츠를 동기화합니다. 배포 프로세스를 자동화하여 코드 저장소가 변경 될 때마다 변경 사항이 즉시 글로벌 CDN으로 온라인 상태가됩니다.

휴식, 무료 호스팅을 즐기고 안전하고 빠른 웹 사이트와 자동 배포를하십시오. ?

그러나 ... 물론 이것은 많은 문제를 만듭니다 :

관리 패널로 무엇을해야합니까?

카테고리 및 RSS 피드로 무엇을해야합니까?

지금 콘텐츠를 어떻게 관리합니까?

의견 섹션과 뉴스 레터로 무엇을해야합니까?

이 시점에서 WP 관리자 패널에 작별 인사를 할 수 있습니다. 이제부터 SSG를 사용하여 컨텐츠를 생성하기 때문입니다. 실제로 Jekyll과 같은 SSG는 블로그를 구축하도록 특별히 설계되었으며 Gatsby.js와 같은 SSG에는 이미 모든 기능이 포함되어 있습니다.

컨텐츠 관리 (기존 게시물 수정 등)는 헤드리스 CMS가 작동하는 곳입니다. 의견과 뉴스 레터의 경우 이미 외부 API (예 : Disqus 및 Mailchimp)를 사용하고 있습니까?

실제로 어떻게 했습니까?

우리는 여기에서 SSG 및 헤드리스 CMS의 INS를 다룰 수 없지만이 시리즈의 후속 조치에주의를 기울이십시오. WordPress 웹 사이트 마이그레이션에 대한 단계별 안내서를 제공 할 것입니다.

<:> 사례 연구 2 : 자동 파이프 라인으로 정적 웹 사이트를 무료로 호스팅 Jamstack 커뮤니티에서는 종종 "무료"를들을 수 있습니다. 고맙게도, 무료는 아닙니다.

는 여전히 신용 카드 번호를 무료로 알려야하기 때문입니다.

요컨대, 프로세스는 다음과 같습니다 이 경우, 우리는 정적 웹 사이트 (예 : 사례 연구에서 마이그레이션 한 블로그)를 가져 와서 온라인으로 말할 것입니다 : .

github, gitlab 또는 bitbucket 저장소를 설정하십시오.

NetLify, gitlab 페이지 또는 github 페이지에 배포하십시오.

이 시점에서 리포지토리로의 각 변경 사항은 새 배포 (Webhook을 통해)를 자동으로 트리거하고 무언가 잘못되면 매우 우아하게 롤백 할 수 있습니다.

왜 회사가 이러한 서비스를 무료로 제공합니까?

배포 된 CDN에 HTML 파일을 넣는 오버 헤드는 작습니다. 실제 계산은 관련이 없으며 PHP 렌더링은 관련이 없습니다. 많은 대역폭을 소비하는 매우 인기있는 웹 사이트를 호스팅하지 않으면 회사는 호스팅 서비스를 제공하는 것을 신경 쓰지 않습니다. 그렇게하면 좋은 홍보를 가져올 수 있습니다.

회사는 또한 많은 공짜를 포기함으로써 당신을 잠그게 할 것입니다. 고급 서비스가 필요할 때 (비즈니스가 성장하는 경우 필요한 서비스가 필요합니다) 이미 함께 일하고 있습니다. 공정합니다. 그 당시에는 문제를 해결하거나 유급 시간 동안 서비스를 사용하기 위해 임시 솔루션을 개발해야합니다.

실제로 어떻게 했습니까?

netlify 또는 github/gitlab은 매우 간단하며 최소한의 노력이 필요합니다. (그럼에도 불구하고, 우리는 다음 기사에서 과정을 자세히 설명 할 것입니다.)

Jamstack과 Full-Stack Development의 비교

이 새로운 접근 방식이 램프 또는 평균 스택과 어떻게 비교되는지 보자.

램프/평균 스택 Jamstack

웹 사이트를 실행하는 웹 서버 cdn 에 전 세계 배포 /> ftp/ssh 업로드, 서버 재시작 자동화 어셈블리 라인 런 페이지 프레 렌더 페이지를 높이기 위해 속도를 높입니다

모노비드 애플리케이션 (예 : WordPress) API 및 마이크로 서비스 (프론트 엔드/백엔드 디커플링) 전체 스택 (전면 및 백엔드 언어) 단일 기술 스택 ( "JavaScript Everywhere") Jamstack과 함께 무엇을 할 수 있습니까? 현재 웹 사이트를 만들면 이점을 배웠기를 바랍니다. 그러나 사용자 로그인 및 RDBMS (Relational Database)없이 동적 콘텐츠 관리 또는 저장과 같은 백엔드 처리없이 가장 기본적인 작업을 수행하는 방법에 대해 여전히 회의적 일 수 있습니다. Jamstack과 함께 할 수있는 다른 예는 다음과 같습니다. 정적 웹 사이트를 사용하여 서버리스 데이터베이스를 구현하십시오 서비스로서의 정체성 (IDAAS) : 무국적자 인증 헤드리스 컨텐츠 관리 시스템 정적 웹 사이트에서 서버리스 함수 사용 다목적 형태의 관리

다중 플랫폼 알림 처리 헤드리스 쇼핑 카트 반응 검색

결론 사물의 발전은 특히 IT 분야에서 불가피합니다. 이전에는 램프 스택이었고 평균 스택이었습니다. 이제 Jamstack이며 5-10 년 후에는 다른 것이 될 것입니다. 이러한 변화를 받아들이고 우리 자신의 변화로 만드는 것이 좋습니다! 새로운 일을하는 방법을 배우는 것은 번거롭게 들릴 수 있지만 개발에 대한 열정을 활성화시킬 수도 있습니다. 서버를 유지하는 데 시간이 줄어들고 보안 문제에 대해 걱정할 수 있습니다. 개발에는 노력이 적고 고객이 더 만족한다는 것을 알 수 있습니다. 이 때문에 경쟁력이 높아질 수도 있고 (인상을 요구할 수 있음). ? Jamstack Basics 이 주제에 대한 더 많은 기사를 따르십시오. 우리는 몇 년 동안 Jamstack을 소개 해 왔지만 독립적 인 훈련과 실습이되었습니다. Jamstack 전문가가 되어이 페이지의 인덱스에서 업데이트하는 데 필요한 자습서를 제공합니다. RSS 피드 또는 소셜 미디어를 최신 상태로 유지할 수도 있습니다. Jamstack Basics