Terminal-Based Content Adaptation

이 예제에서는 Edge Cloud Apps 함수를 사용하여 동적 콘텐츠 현지화를 구현하는 방법을 보여줍니다. 예를 들어, 오리진 서버에서 영어 콘텐츠만 제공하는 경우 이 함수를 사용하여 사용자의 브라우저 언어 설정에 따라 웹 페이지 콘텐츠를 중국어, 독일어 및 일본어로 자동 번역할 수 있습니다.

코드 예제

async function handleRequest(request) {
    const url = new URL(request.url)
    const language = clientLanguage(request)
    const countryStrings = strings[language] || {}
    const response = await fetch(request.url)

    // HTMLRewriter를 사용하여 스트리밍 콘텐츠 재작성
    return new HTMLRewriter()
        .on('[data-i18n-key]', new ElementHandler(countryStrings)) // 'data-i18n-key' 속성이 있는 태그 찾기
        .transform(response) // 응답 콘텐츠 변환
}

// 선호하는 브라우저 언어 가져오기
function clientLanguage(request) {
    // Accept-Language: zh-CN,zh;q=0.9,en-US;q=0.8,en;q=0.7
    try {
        const languageHeader = request.headers.get('Accept-Language')
        // Accept-Language 헤더를 구문 분석하여 선호하는 언어를 가져옵니다.
        return languageHeader.split(';')[0].split(',')[0].split('-')[0] 
    } catch (e) {
        // 언어 기본 설정을 가져올 수 없는 경우 기본적으로 중국어로 설정합니다.
        return 'zh' 
    }
}

// 요소 콘텐츠 대체 처리
class ElementHandler {
    constructor(countryStrings) {
      this.countryStrings = countryStrings
    }
  
    element(element) {
      const i18nKey = element.getAttribute('data-i18n-key')
      if (i18nKey) {
        const translation = this.countryStrings[i18nKey]
        if (translation) {
          element.setInnerContent(translation) // 태그 콘텐츠 대체
        }
      }
    }
  }

// 번역 텍스트 구성
const strings = {
    de: {
      title: 'Beispielseite',
      headline: 'Beispielseite',
      subtitle:
        'Dies ist meine Beispielseite. Abhängig davon, wo auf der Welt Sie diese Site besuchen, wird dieser Text in die entsprechende Sprache übersetzt.',
      disclaimer:
        'Haftungsausschluss: Die anfänglichen Übersetzungen stammen von Google Translate, daher sind sie möglicherweise nicht perfekt!',
      tutorial:
        'Das Tutorial für dieses Projekt finden Sie in der CDNetworks ECA-Dokumentation.',
      copyright: 'Design von HTML5 UP.',
    },
    ja: {
      title: 'サンプルサイト',
      headline: 'サンプルサイト',
      subtitle:
        'これは私の例のサイトです。 このサイトにアクセスする世界の場所に応じて、このテキストは対応する言語に翻訳されます。',
      disclaimer:
        '免責事項：最初の翻訳はGoogle翻訳からのものですので、完璧ではないかもしれません！',
      tutorial:
        'CDNetworks ECAのドキュメントでこのプロジェクトのチュートリアルを見つけてください。',
      copyright: 'HTML5 UPによる設計。',
    },
    zh: {
        title: '示例站点',
        headline: '示例站点',
        subtitle:
          '这是我的示例站点。根据您访问本网站的地点，本文将被翻译成相应的语言。',
        disclaimer:
          '免责声明:最初的翻译来自谷歌翻译，所以他们可能不完美！',
        tutorial:
          '在CDNetworks ECA文档中找到这个项目的教程。',
        copyright: '由HTML5 UP设计。',
      },
  }
                    
addEventListener("fetch", event => {
    return event.respondWith(handleRequest(event.request))
}) 

참고

• 오리진 서버는 번역이 필요한 HTML 태그에 data-i18n-key 사용자 지정 속성을 미리 추가해야 합니다. 예: <title data-i18n-key="title">...</title>.
• Edge Cloud Apps 함수는 HTMLRewriter API를 사용하여 이 속성을 가진 태그 콘텐츠의 스트림 재작성을 수행합니다. 스트림 재작성은 함수가 웹 페이지 콘텐츠를 수신하고, 번역 재작성을 수행하고, 동시에 사용자에게 콘텐츠를 출력하여 전체 응답 시간을 효과적으로 단축하고 사용자 경험을 향상시킬 수 있음을 의미합니다.