간단한 데이터 전송에서 현대식 작품 아키텍처로 – 스매싱 잡지

오늘날의 웹 개발 환경에서 모 놀리 식 응용 프로그램의 개념은 점점 드물게 생겼습니다. 최신 응용 프로그램은 여러 특수 서비스로 구성되며 각 서비스는 기능의 특정 측면을 처리합니다. 이러한 변화는 하룻밤 사이에 일어나지 않았습니다. 시스템 간의 데이터 전송을 생각하고 구현하는 방식에서 수십 년의 진화의 결과입니다. 이 여정을 탐색하고 특히 헤드리스 CMS 솔루션의 맥락에서 현대 아키텍처를 어떻게 형성하는지 살펴 보겠습니다.

컴퓨터가 처음 서로 대화하기 시작했을 때, 방법은 놀랍도록 간단했습니다. 인터넷 초기에 시스템은 FTP를 통해 파일을 교환하거나 원시 TCP/IP 소켓을 통해 통신했습니다. 이 직접적인 접근 방식은 간단한 사용 사례에 적합하지만 응용 프로그램이 더 복잡해짐에 따라 한계가 빠르게 나타났습니다.

# Basic socket server example
import socket

server_socket = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
server_socket.bind(('localhost', 12345))
server_socket.listen(1)

while True:
    connection, address = server_socket.accept()
    data = connection.recv(1024)
    # Process data
    connection.send(response)

네트워크에서 컴퓨터 간의 복잡한 통신을 가능하게하는 진정한 획기적인 것은 원격 절차 통화 (RPC) 1980 년대. RPC를 통해 개발자는 원격 시스템의 절차를 로컬 기능 인 것처럼 네트워크 커뮤니케이션의 복잡성을 추상화 할 수있었습니다. 이 패턴은 오늘날 우리가 사용하는 많은 현대 통합 접근법의 기초가되었습니다.

RPC는 클라이언트가 매개 변수로 프로 시저 호출을 준비하고 직렬화하는 클라이언트 서버 모델을 구현하고 메시지를 원격 서버로 보내고 서버가 프로 시저를 필수화하고 실행 한 다음 클라이언트에 응답을 다시 보냅니다.

다음은 Python의 XML-RPC를 사용하는 단순화 된 예입니다.

# Server
from xmlrpc.server import SimpleXMLRPCServer

def calculate_total(items):
    return sum(items)

server = SimpleXMLRPCServer(("localhost", 8000))
server.register_function(calculate_total)
server.serve_forever()

# Client
import xmlrpc.client

proxy = xmlrpc.client.ServerProxy("
try:
    result = proxy.calculate_total([1, 2, 3, 4, 5])
except ConnectionError:
    print("Network error occurred")

RPC는 동기식 (차단) 및 비동기 모드 모두에서 작동 할 수 있습니다.

GRPC 지원 스트리밍 및 양방향 통신과 같은 최신 구현. 아래의 예에서는 GRPC 서비스를 정의합니다. Calculator 두 가지 RPC 방법으로 Calculatea Numbers 메시지와 반환 a Result 메시지 및 CalculateStream스트림을 보냅니다 Result 응답으로 메시지.

// protobuf
service Calculator {
  rpc Calculate(Numbers) returns (Result);
  rpc CalculateStream(Numbers) returns (stream Result);
}

현대 통합 : 웹 서비스와 SOA의 상승

1990 년대 후반과 2000 년대 초반은 웹 서비스 그리고 서비스 지향 아키텍처 (SOA). SOAP (Simple Object Access Protocol)는 엔터프라이즈 통합의 표준이되어 시스템 통신에 대한보다 체계적인 접근 방식을 도입했습니다.

SOAP는 강력한 엔터프라이즈 기능을 제공했지만 복잡성과 Verbosity는 더 간단한 대안, 특히 오늘날 웹 서비스 커뮤니케이션을 지배하는 나머지 API를 개발했습니다.

그러나 휴식은 혼자가 아닙니다. 현대적인 통합 패턴을 살펴 보겠습니다.

편안한 API

휴식 (표현 상태 전이) 웹 API의 사실상 표준이되어 리소스 조작에 대한 간단하고 무국적 접근 방식을 제공합니다. 단순성과 HTTP 기반 특성은 웹 응용 프로그램에 이상적입니다.

2000 년 Roy Fielding이 웹의 표준 프로토콜 위에 건축 스타일로 처음 정의한이 제약 조건은 다음과 같은 최신 웹의 목표와 완벽하게 일치합니다. 성능,,, 확장 성,,, 신뢰할 수 있음그리고 시계: 클라이언트와 서버는 인터페이스로 분리되고 느슨하게 결합 된 무국적 통신, 캐시 가능한 응답.

최신 응용 프로그램에서 나머지 프로토콜의 가장 일반적인 구현은 JSON 형식을 기반으로하며 요청 및 응답에 대한 메시지를 인코딩하는 데 사용됩니다.

// Request
async function fetchUserData() {
  const response = await fetch('
  const userData = await response.json();
  return userData;
}

// Response
{
  "id": "123",
  "name": "John Doe",
  "_links": {
    "self": { "href": "/users/123" },
    "orders": { "href": "/users/123/orders" },
    "preferences": { "href": "/users/123/preferences" }
  }
}

그래프 QL

GraphQL은 2015 년에 공개하기 전에 2012 년 Facebook의 내부 개발 요구에서 나왔습니다. 복잡한 모바일 애플리케이션 구축의 과제에서 태어 났으며 전통적인 REST API의 제한 사항, 특히 과도한 가져 오기 및 과잉 데이터 문제를 해결했습니다.

핵심적으로 GraphQL은 유형 시스템 및 선언적 데이터 가져 오기를 제공하는 쿼리 언어 및 런타임으로 클라이언트가 서버에서 가져올 내용을 정확하게 지정할 수 있습니다.

// graphql
type User {
  id: ID!
  name: String!
  email: String!
  posts: [Post!]!
}

type Post {
  id: ID!
  title: String!
  content: String!
  author: User!
  publishDate: String!
}

query GetUserWithPosts {
  user(id: "123") {
    name
    posts(last: 3) {
      title
      publishDate
    }
  }
}

중첩 된 데이터 구조, 모바일 애플리케이션 또는 마이크로 서비스 아키텍처를 사용하여 복잡한 UI를 구축하는 데 종종 사용되며, 복잡한 데이터 요구 사항을 규모로 처리하는 데 효과적인 것으로 입증되었으며 점점 더 많은 도구 생태계를 제공합니다.

Webhooks

최신 응용 프로그램에는 종종 실시간 업데이트가 필요합니다. 예를 들어, 전자 상거래 앱은 구매가 이루어지면 인벤토리 수준을 업데이트하거나 컨텐츠 관리 앱이 문서를 편집 할 때 캐시 된 컨텐츠를 새로 고침해야합니다. 기존의 요청-응답 모델은 비효율적이고 리소스 집약적 인 업데이트를 위해 고객의 폴링 서버에 의존하기 때문에 이러한 요구를 충족시키는 데 어려움을 겪을 수 있습니다.

Webhooks 및 이벤트 중심의 아키텍처는 이러한 요구를보다 효과적으로 해결합니다. WebHooks는 서버가 특정 이벤트가 발생할 때 클라이언트 또는 기타 시스템에 실시간 알림을 보낼 수 있도록합니다. 이것은 지속적인 투표의 필요성을 줄입니다. 이벤트 중심의 아키텍처는 응용 프로그램 구성 요소를 분리하여 더욱 발전합니다. 서비스는 이벤트를 비동기 적으로 게시하고 구독 할 수 있으므로 시스템을보다 확장 가능하고 반응이 좋으며 간단하게 만듭니다.

import fastify from 'fastify';

const server = fastify();
server.post('/webhook', async (request, reply) => {
  const event = request.body;
  
  if (event.type === 'content.published') {
    await refreshCache();
  }
  
  return reply.code(200).send();
});

이것은 Fastify를 사용하여 웹 서버를 설정하는 간단한 node.js 함수입니다. 엔드 포인트에 응답합니다 /webhook확인합니다 type JSON 요청의 필드와 이벤트가 유형 인 경우 캐시를 새로 고칩니다. content.published.

이 모든 배경 정보 및 기술 지식을 통해 현재 웹 애플리케이션 개발 상태를 파악하는 것이 더 쉽습니다. 단일 모 놀리 식 앱은 더 이상 비즈니스 요구에 대한 해답이 아닙니다.그러나 새로운 패러다임이 등장했습니다 : composable Architecture.

종합 가능한 아키텍처 및 헤드리스 CMS

이 진화는 우리를 응용 프로그램에 의해 구축하는 종합 가능한 아키텍처의 개념으로 이끌었습니다. 특수 서비스 결합. 이곳은 헤드리스 CMS 솔루션이 현대 통합 패턴이 어떻게 결합되는지에 대한 완벽한 예가되는 분명한 이점을 갖는 곳입니다.

Headless CMS 플랫폼은 컨텐츠 프리젠 테이션과 컨텐츠 관리를 분리하여 완전한 기능을 갖춘 컨텐츠 백엔드에 의존하는 특수 프론트 엔드를 구축 할 수 있습니다. 이 분리가 촉진됩니다 콘텐츠 재사용,,, 독립적 인 스케일링그리고 유연성 시스템의 각 부분에 전용 기술 또는 서비스를 사용합니다.

Storyblok을 예로 들으십시오. Storyblok은 개발자가 유연하고 확장 가능하며 합리적 인 응용 프로그램을 구축 할 수 있도록 설계된 헤드리스 CM입니다. 내용은 API, REST 또는 GraphQL을 통해 노출됩니다. 웹 후크를 트리거 할 수있는 긴 이벤트 목록을 제공합니다. 편집자는 훌륭한 시각적 편집자에 만족하며, 실시간의 변화를 볼 수 있으며 많은 통합이 시장을 통해 제공됩니다.

이것을 상상해보십시오 ContentDeliveryService 오픈 소스 JS 클라이언트를 사용하여 StoryBlok의 REST API와 상호 작용할 수있는 앱에서 :

import StoryblokClient from "storyblok-js-client";

class ContentDeliveryService {
  constructor(private storyblok: StoryblokClient) {}

  async getPageContent(slug: string) {
    const { data } = await this.storyblok.get(`cdn/stories/${slug}`, {
      version: 'published',
      resolve_relations: 'featured-products.products'
    });

    return data.story;
  }

  async getRelatedContent(tags: string[]) {
    const { data } = await this.storyblok.get('cdn/stories', {
      version: 'published',
      with_tag: tags.join(',')
    });

    return data.stories;
  }
}

퍼즐의 마지막 조각은 통합의 실제 예입니다.

다시 말하지만, 많은 사람들이 이미 Storyblok Marketplace에서 사용할 수 있으며 대시 보드에서 쉽게 제어 할 수 있습니다. 그러나 Composable Architecture를 완전히 활용하기 위해 개발자의 손에서 가장 강력한 도구 인 Code를 사용할 수 있습니다.

StoryBlok을 콘텐츠 허브로 사용하는 최신 전자 상거래 플랫폼, 재고 및 주문을위한 Shopify, 제품 검색을위한 Algolia 및 지불에 대한 스트라이프를 상상해 봅시다.

각 계정이 설정되고 액세스 토큰이 있으면 상점의 프론트 엔드 페이지를 신속하게 만들 수 있습니다. 이것은 프로덕션 준비 코드가 아니지만 빠른 아이디어를 얻으려면 React를 사용하여 서비스를 통합하는 단일 제품의 페이지를 작성합시다.

먼저 고객을 초기화해야합니다.

import StoryblokClient from "storyblok-js-client";
import { algoliasearch } from "algoliasearch";
import Client from "shopify-buy";


const storyblok = new StoryblokClient({
  accessToken: "your_storyblok_token",
});
const algoliaClient = algoliasearch(
  "your_algolia_app_id",
  "your_algolia_api_key",
);
const shopifyClient = Client.buildClient({
  domain: "your-shopify-store.myshopify.com",
  storefrontAccessToken: "your_storefront_access_token",
});

우리가 만들었다는 것을 감안할 때 blok Storyblok에서와 같은 제품 정보를 보유합니다 product_id우리는 그것을 취하는 구성 요소를 쓸 수 있습니다 productSlugStoryblok, Shopify의 인벤토리 데이터 및 Algolia Index의 일부 관련 제품을 가져옵니다.

async function fetchProduct() {
  // get product from Storyblok
  const { data } = await storyblok.get(`cdn/stories/${productSlug}`);

  // fetch inventory from Shopify
  const shopifyInventory = await shopifyClient.product.fetch(
    data.story.content.product_id
  );

  // fetch related products using Algolia
  const { hits } = await algoliaIndex.search("products", {
    filters: `category:${data.story.content.category}`,
  });
}

그런 다음 간단한 구성 요소 상태를 설정할 수 있습니다.

const [productData, setProductData] = useState(null);
const [inventory, setInventory] = useState(null);
const [relatedProducts, setRelatedProducts] = useState([]);

useEffect(() =>
  // ...
  // combine fetchProduct() with setState to update the state
  // ...

  fetchProduct();
}, [productSlug]);

모든 데이터와 함께 템플릿을 반환하십시오.


{productData.content.description}
Price: ${inventory.variants[0].price}
Related Products

  {relatedProducts.map((product) => (
    {product.name}
  ))}

그런 다음 이벤트 중심의 접근 방식을 사용하고 상점 이벤트를 듣고 Stripe (이 튜토리얼의 Manuel Spigolon에 대한 크레딧)로 체크 아웃을 처리하는 서버를 만들 수 있습니다.

const stripe = require('stripe')

module.exports = async function plugin (app, opts) {
  const stripeClient = stripe(app.config.STRIPE_PRIVATE_KEY)

  server.post('/create-checkout-session', async (request, reply) => {
    const session = await stripeClient.checkout.sessions.create({
      line_items: [...], // from request.body
      mode: 'payment',
      success_url: "
      cancel_url: "
    })

    return reply.redirect(303, session.url)
  })
// ...

그리고이 접근법을 통해 각 서비스는 다른 서비스와 무관하여 우수한 개발자 경험과 유지하기 쉬운 작고 간단한 애플리케이션을 통해 비즈니스 목표 (성능, 확장 성, 유연성)를 달성하는 데 도움이됩니다.

결론

헤드리스 CMS와 최신 웹 서비스 간의 통합은 현재 및 미래의 고성능 웹 응용 프로그램을 나타냅니다. 전문화 된 분리 된 서비스를 사용하여 개발자는 비즈니스 로직 및 사용자 경험에 중점을 둘 수 있습니다. 종합 가능한 생태계는 모듈 식 일뿐 만 아니라 현대 기업의 진화하는 요구에 탄력적입니다.

이러한 통합은 API 중심 아키텍처를 마스터하고 다양한 도구가 더 큰 기술 스택에 조화롭게 적합 할 수있는 방법을 이해하는 것의 중요성을 강조합니다.