언어로의 먼 길
나는 흥미롭고 도전적으로 들리는 아이디어를 꽤 오랫동안 시작 해왔다. 가능한 한 적은 유지 보수로 내 웹 앱에 대한 다국어 지원을 달성하려면 무엇이 필요 할까? 또한 비용을 주요 제약 조건으로 고려하면 (이 사이트는 광고를 제공하지 않고 추적을 전혀 사용하지 않으므로 여기에서 들어오는 수익이 없음) 유효한 솔루션은 어떻게 생겼습니까?
계획
모든 것은 사용할 번역 엔진에서 시작하고 끝납니다. 데일리 드라이버 중 하나로 Ubuntu를 사용한 덕분에 저는 앱 스토어에서 "Argos translate"라는 멋진 작은 앱을 발견했습니다.이 앱은 DeepL을 지원하는 것과 유사한 최신 ML 모델을 기반으로 구축 된 오픈 소스 번역 엔진입니다. . DeepL을 모른다면 웹 사이트에서 무료로 사용할 수있는 훌륭한 번역가입니다.
그러나 Argos로 돌아가서 : 관련 저장소를 살펴본 후 자체 호스팅 환경에 잘 맞는 OSS python-lib도 사용할 수 있음을 알았습니다. 잠시 놀다가 SaaS 오퍼를 통해 일부 번역사를 살펴보기로 결정했습니다. 아르고스 번역의 전체 할부 프로세스가 제가 기대했던대로 제대로 작동하지 않았기 때문입니다.
따라서 매월 500,000자를 무료로 제공하는 GCP의 Cloud Translations라는 다른 서비스를 설정 한 다음 1,000,000 개마다 약간의 비용을 청구합니다.
캐싱에 관한 모든 것
ISG (증분 사이트 생성)를 사용한 Next.js 설정 덕분에 주문형 각 페이지에 대한 번역을 호출 할 수 있습니다. 모든 번역을 한 번에 수행 할 필요가 없기 때문에 계획을 상당히 단순화 할 수 있습니다.
여전히 번역 된 문자열의 캐싱을 처리하는 방법에 대해 확신하지 못했습니다. 물론 Vercel의 에지 네트워크 (이 PWA가 호스팅되는 곳)는이 작업을 절대적으로 활용할 수 있습니다. 하지만 배포가 번역과 독립적 이길 원했습니다. 그래서 GCP에서도 호스팅되는 간단한 Firestore 인스턴스를 통해 하나의 추가 캐싱 레이어를 만들었습니다.
가장 큰 문제는 모든 기사의 블록 내용을 구문 분석하고 대체하는 것이 었습니다. 당신이 모른다면. 블록 내용은 CMS에서 내가 만든 기사의 실제 본문을 설명합니다. 번역시 이러한 블록은 일반 텍스트가 아니라 의미 정보 또는 메타 데이터를 저장할 수 있도록 특수 데이터 구조에 각각 포함됩니다. 관련 문자열 만 안정적으로 감지 + 번역하는 것이이 구현의 큰 부분 중 하나였습니다.
한 사람, 12 개 이상의 언어
지원되는 언어 (현재)는 다음과 같습니다.
- "en": 영어
- "de": 독일어
- "fr": 프랑스어
- "es": 스페인어
- "eo": 에스페란토
- "el": 그리스어
- "ja": 일본어
- "ru": 러시아어
- "hi": 힌디어
- "he": 히브리어
- "tr": 터키어
- "af": 아프리칸스어
- "ar": 아랍어
- "ko": 한국어
다양한 변형을 테스트하려면 기본 URL 뒤에 언어 코드를 넣으면됩니다. 예 : "https://flaming.codes/fr". 그리고 그게 다야!
내 구현을 요약하면 설정은 다음과 같습니다.
- 각 페이지는 최소 4 시간마다 정적으로 빌드되지만 요청시에만 작성됩니다. 즉, 특정 사이트에 대해 최대 4 시간마다 새 번역 작업이 수행됩니다.
- 번역 자체는 Firestore에서 먼저로드됩니다. 사용할 수있는 항목이없는 경우에만 문자열이 번역되고 Firestore에 캐시됩니다.
이 설정은 너무 잘 작동하여 고전적인 방식으로 번역을 사용하지 않을 것입니다. 키-값 쌍을 유지하는 json 파일을 수동으로 생성합니다. 국제화해야하는 모든 것에 Cloud Translation API를 사용하여 완전히 동적으로 만들겠습니다. 이러한 변경 사항 덕분에 PWA는 작성 시점에서 약 430 페이지를 보유하고 있습니다.
각 페이지는 영어에서 13 개의 다른 언어로 번역되어 가장 많이 사용되는 언어와 그 사이에있는 전세계 언어를 나타냅니다. 어떻게 진화할지 보자!
- Tom
