simorgh
Release 4.2049.0
BBC World Service News 웹 사이트는 Reactjs 기반 응용 프로그램 인 Simorgh를 사용하여 렌더링됩니다. Simorgh는 또한 World Service, Public Service News 및 BBC Sport 용 AMP 뉴스 기사 페이지를 렌더링합니다.
Simorgh는 매달 전 세계 수백만 명의 사람들이 사용하는 빠르고 액세스 가능한 웹 경험을 제공합니다 (Simorgh를 사용하는 웹 사이트 목록 참조). 정기적으로 유지되고 문서화되어 있으며 오픈 소스 기고자를 환영합니다.
Simorgh는 주로 BBC News Web Engineering 팀에 의해 유지됩니다. 그것은 현재 전 세계 독자들에게 현재 (41 개 언어)로 매우 신뢰할 수있는 뉴스를 제공합니다. 우리는 광범위한 장치를 지원하고 규모, 성능 및 접근성에 대해 깊이 관리합니다. 우리는 민첩하고 유연한 팀에서 일하며 향후 개발을위한 흥미로운 로드맵을 보유하고 있습니다.
우리에게 익숙해 지십시오 :
NB 관련 코드와 함께 추가 문서화 된 문서가 있습니다. 위 목록은 우리의 리포지토리의 최상위 문서의 색인입니다.
BBC 기사 (https://www.bbc.co.uk/news/articles/clldg965yzjo)에 대한 요청은 독점 라우팅 및 캐싱 서비스 (Mozart라고 함)에서 Simorgh 응용 프로그램으로 전달됩니다.
이 요청은 Regex Match ( articleRegexPath || frontPageRegexPath )를 사용하여 Express 서버의 경로와 일치합니다. URL이 기사 또는 첫 페이지의 사전 정의 된 Regex 패턴과 일치하면 getRouteProps 함수를 사용하여 경로에서 일부 매개 변수를 가져옵니다. 이것은 서비스, isamp, 경로 및 일치 속성을 반환합니다. Route는 Page를 렌더링하는 데 사용되는 초기 JSON을 가져 오는 메소드와 IE ArticleContainer 를 렌더링하는 REACT 컨테이너를 정의하는 반응-로터 경로입니다. 이는 일반적으로 getInitialData 라고합니다.
데이터가 반환되면 상태 코드를 가져 와서 renderDocument 사용 하여이 모든 데이터를 기본 문서로 소품으로 전달합니다.
이 문서는 URL, JSON Data, BBC Origin, ISAMP 및 메인 앱 컨테이너로 서비스를 전달하며 결과는 renderToString 메소드를 사용하여 문자열로 렌더링됩니다. 그런 다음이 문자열은 자산 배열, 스타일 태그 (스타일 구성 요소의 출력) 및 헤드에 추가 해야하는 스크립트/링크와 함께 메인 앱으로 DocumentComponent에게 전달됩니다. 그런 다음 반응을 사용하여 정적 HTML 마크 업으로 렌더링되어 renderToStaticMarkup 사용하여 정적 HTML로 사용자에게 다시 보냈습니다. 이 응답에는 사용자 장치가 후속 여행을 위해 단일 페이지 응용 프로그램 (SPA)을 부트 스트랩하기 위해 다운로드하는 JS 번들에 대한 링크가 포함됩니다.
RAW HTML이 다운로드되었으므로 클라이언트 측 JS 파일이 시작되어 클라이언트 측 응용 프로그램으로 초기 응답을 수화시킵니다. 이 과정에서 React는 초기 JSON 페이로드 (전역 창 객체 SIMORGH_DATA 에서 사용 가능)를 사용하여 ReactDomServer가 반환 한 원래 마크 업을 수화시킵니다. React는 렌더링 된 컨텐츠가 서버와 클라이언트간에 동일 할 것으로 예상합니다 (이것은 초기 JSON 페이로드를 SSR 페이지와 함께 보내기 때문에 수화 단계는 서버가 사용하는 것과 동일한 데이터로 실행됩니다).
기사의 JSON 페이로드는 여러 블록으로 구성됩니다. 각 블록은 페이지의 요소를 나타내는 객체입니다. 이것은 제목, 이미지, 단락 등 일 수 있습니다.이 블록 각각에는 블록 유형이 있으며 블록 유형은 Simorgh의 특정 컨테이너와 일치합니다. 즉, 이미지 컨테이너와 일치합니다.
Articlemain 컨테이너는 각 JSON 블록을 반복하고 해당 반응 용기와 일치시키고 소품을 통해 데이터를 전달합니다. 이 컨테이너는 각 블록 유형 렌더링을위한 논리가있는 곳입니다. 이 시점에서 PSAMMED 구성 요소 라이브러리에서 설치된 프론트 엔드 구성 요소를 사용합니다. 예를 들어 이미지 컨테이너는 그림 컨테이너를 가져 오며 그림은 psammead-image와 psammead-image-placeholder 구성 요소를 가져오고 사용합니다. 기사의 이미지에는 일반적으로 캡션이 있으므로 그림 컨테이너는 PSAmmead의 더 많은 프론트 엔드 구성 요소를 포함하여 이미지 위에 캡션을 렌더링 할 수있는 캡션 컨테이너를 가져옵니다.
이 프로세스는 기사 내의 각 블록에 대해 반복되며 궁극적으로 비즈니스 로직을위한 React 컨테이너 및 프론트 엔드 마크 업을위한 React 구성 요소의 조합을 사용하여 뉴스 기사의 본문을 렌더링합니다.
각 렌더링은 페이지를 향상시키기 위해 HOC 세트 (고차 구성 요소)를 통해 전달됩니다.
선택한 페이지 유형에서 최적의 사용을 가능하게하는 선택된 페이지 유형을 통과하면 다양한 페이지 유형을 통과 할 수 있습니다.
변형 HOC는 변형 (예 : simp , lat )이있는 서비스가 항상 적절한 변형을 렌더링하는 URL로 리디렉션되도록합니다.
사용자가 변형을 제공하지 않고 URL로 탐색하고 쿠키에서 변형이 설정되면 쿠키 변형 페이지가 렌더링됩니다. 그렇지 않으면 기본 변형 페이지가 렌더링됩니다
사용자가 변형이있는 URL로 탐색하고 쿠키로 변형이 설정되면 쿠키 변형 페이지가 렌더링됩니다. 그렇지 않으면 요청 된 변형 페이지가 렌더링됩니다.
WithContexts HOC는 응용 프로그램에서 사용 가능한 다양한 컨텍스트 제공 업체에 대한 액세스를 제공하는 래퍼입니다. 이러한 컨텍스트 제공 업체 내부의 모든 하위 구성 요소는 Usecontexts 후크를 통해 컨텍스트 데이터에 액세스 할 수 있습니다.
페이지 래퍼 hoc는 기사 나 프론트 페이지 컨테이너를 레이아웃으로 랩핑합니다. 현재 우리는 단일 페이지 레이아웃 만 있습니다. 이 레이아웃에는 헤더, 바닥 글 및 컨텍스트 제공 업체가 포함되어있어 헤더와 바닥 글 사이의 어린이로 본체를 렌더링합니다.
오류가 전달 된 오류 소품을 확인합니다. 오류가 기사를 무효화하도록 설정되거나 프론트 페이지 컨테이너가 간단하게 반환됩니다.
오류가 true로 설정되면 오류 구성 요소가 반환되어 사용자에게 오류를 시각적으로 표시합니다. 예 : 500 오류 페이지.
다른 HOC가 원래 기사 또는 프론트 페이지 컨테이너를 반환했다고 가정하면 데이터 HOC는 데이터 소품을 통해 전달 된 JSON 데이터에 대한 일부 유효성 검사를 실행합니다. 모든 수표가 만족되면 Articlecontainer는 단일 pageData 소품으로 반환됩니다. 이 pagegata props는 JSON 데이터를 보관하여 주어진 기사의 최적 블록으로 렌더링됩니다.
Withhashchangehandler HOC는 URL 해시 값 변경 사항을 확인하는 모든 페이지에 적용되는 래퍼입니다. 페이지에는 컨텐츠를 건너 뛰기위한 접근성 컨트롤이 포함되어있어 사용자가 그렇게하기로 선택하면 URL 해시를 사용하여 페이지의 특정 영역으로 사용자를 건너 뜁니다. 클라이언트 측 라우팅의 특성으로 인해 URL의 변경으로 인해 재 렌더가 발생합니다. 이로 인해 일부 구성 요소, 특히 미디어 및 사회적 임베드에 대한보기 흉한 UI가 깜박입니다. 이 HOC는 URL에 검사를 적용하므로 재 러너가 필요한지 또는 React.memo 사용하여 재 렌즈를 방지하지 않는지 확인하십시오.
WithOptimizelyProvider HOC는 A/B 테스트를 실행하는 데 사용되는 최적의 클라이언트에 대한 액세스로 향상된 구성 요소를 반환합니다. 이 번들 크기를 제한하기 위해 수행됩니다. 일부 번들을 페이지 유형별로 분리하므로 특정 페이지 유형에서 A/B 테스트 만 실행하는 경우 최적화에 사용하는 SDK 라이브러리의 무게로 오염 페이지 유형 번들을 방지 할 수 있습니다.
ckns_mvt 가 USERContext 내에서 설정되므로 ApplyBasicPageHandlers.js 내의 handlerBeforeContexts 객체 키의 값으로 추가해야하므로 withOptimizelyProvider HOC는 WithContexts HOC와 함께 올바른 순서로 적용되어야합니다. 이를 통해 ckns_mvt 최초 방문시 최 OptimizelyProvider 로 전달하여 service 와 같은 속성과 함께 최적화가 실험을 활성화 해야하는시기를 결정하는 데 사용됩니다.
기사 페이지의 예 :
import withOptimizelyProvider from '#app/legacy/containers/PageHandlers/withOptimizelyProvider' ;
import ArticlePage from './ArticlePage' ;
import applyBasicPageHandlers from '../utils/applyBasicPageHandlers' ;
export default applyBasicPageHandlers ( ArticlePage , {
handlerBeforeContexts : withOptimizelyProvider ,
} ) ;새 페이지 유형을 추가하면 여러 부분이 필요합니다.
/data/{{service}}/{{pageType}}/.json 접감이있는 페이지와 동일한 경로에서 사용할 수 있어야합니다.localhost:7080/igbo.json 인덱스 페이지를 빌드하기위한 데이터가 있어야합니다 localhost:7080/igbomain 요소를 렌더링해야합니다 flex-grow: 1; CSS 선언, 이것은 Flexbox 'Sticky Footer'구현을 사용하여 루트 DIV 인 Visual Header와 Footer 사이의 공간을 채우도록 자라도록하기위한 것입니다. cypress/support/config/settings.js 에서 모든 서비스에 대한 구성이 필요합니다 (새 페이지 유형을 정의되지 않은 것으로 설정하더라도)cypress/integration/pages/cypress/integration/pages/ 에 맞춤형 테스트가 추가되면 E2E 파이프 라인이 새로운 사양 테스트 E2E 파이프 라인 및 라이브 E2E 파이프 라인을 실행하도록 업데이트되어야합니다.NB :이 많은 단계를 통해 단일 거대한 PR이 없도록 새 페이지 유형을 추가 할 때 여러 PR을 갖는 것이 좋습니다. 그러나 사이프러스 테스트 (#6)가 페이지 라우팅 (#5)과 동일한 PR에 추가되지 않으면 즉시 페이지 라우팅 PR을 따라야합니다. 이상적으로는 단일 PR로 처리해야합니다.
읽으십시오 : 기고 .md
노드를 설치하십시오. https://nodejs.org/en/. 우리는 .nvmrc 에 지정된 버전을 사용하고 NVM (Node 버전 관리자)이있는 경우 다음 스크립트를 실행하여 프로젝트 지원 버전으로 자동 변경할 수 있습니다.
nvm use
Simorgh 프로젝트는 패키지 관리에 원사를 사용합니다. NPM 패키지 관리자를 통해 원사를 설치하는 것이 좋습니다. NPM 패키지 관리자는 시스템에 설치할 때 Node.js와 함께 제공됩니다. 원사를 설치하려면이 명령을 실행하십시오.
npm install --global yarn
그런 다음 다음 명령을 실행하여 Simorgh를 설치할 수 있습니다.
git clone [email protected]:bbc/simorgh.git
cd simorgh
yarn install
이 응용 프로그램을 로컬로 실행하려면 핫 레드로드를 사용하여 실행됩니다
yarn dev
응용 프로그램은 http : // localhost : 7080에서 시작됩니다.
기사 페이지는 형식 /news/articles/:id 의 경로에서 제공됩니다. 여기서 ID는 컨텐츠 관리 시스템에서 생성 한 자산 ID입니다.
참고 : BBC의 URL에서 ID 사용을 설명하는 기사
이 두 뉴스 기사는 CMS의 테스트 환경과 로컬에서 제공되므로 종종 테스트에 사용됩니다.
또한 Route /news/articles/:id.amp https://www.ampproject.org에서 AMP HTML 페이지를 제공하고 있습니다.
변형이있는 서비스는 위의 형식을 사용하여 액세스 할 수 없으며 대신 변형을 URL에 제공해야합니다.
월드 서비스 첫 페이지는 service 월드 서비스 사이트를 나타내는 형식 /:service 로 제공됩니다.
World Service 첫 페이지는 AMP의 기사 형식을 따르며 /:service.amp 에서 사용할 수 있습니다.
변형이있는 서비스는 위의 형식을 사용하여 액세스 할 수 없으며 대신 변형을 URL에 제공해야합니다.
주제 페이지는 공개적으로 액세스 할 수없는 내부 BBC API를 사용합니다. 이로 인해 로컬에서 개발할 때 다음 경고가 나타날 수 있습니다.
No BFF_PATH set as environment variable, you will not have access to topics
주제 페이지에서 현지에서 작업 해야하는 내부 개발자는 팀에 연락하여 액세스해야합니다.
스토리 페이지의 권장 사항은 내부 BBC Data Labs API를 사용합니다. envConfig/secret.env 파일에 키/값 쌍을 추가하려면 로컬로 표시되기 위해서는 키/값 쌍을 추가해야합니다.
기사 페이지에서 현지에서 작업 해야하는 내부 개발자는 팀에 연락하여 액세스해야합니다.
경로와 해당 직원 Regexes를 살펴보면 다른 페이지 유형을 찾을 수 있지만 위에서 시작한 다음 다른 경로를 이해하고 찾을 수있는 응용 프로그램의 핵심을 살펴 보는 것이 좋습니다.
Simorgh 응용 프로그램과 분리하여 구성 요소를 개발하기 위해 Storybook을 사용합니다. https://bbc.github.io/simorgh/에서 액세스 할 수 있습니다.
로컬 yarn storybook 실행하려면 http : // localhost : 9001/에서 사용할 수 있습니다. 스토리 북 소개 및 문서는 다음과 같습니다. https://storybook.js.org/basics/introduction/.
로컬로 비디오 스토리를 볼 때 변경 요청 위치 섹션에 요약 된대로 BBC 도메인을 사용하십시오. 이러한 이유로 비디오는 위에서 링크 된 스토리 북의 호스팅 버전에서 작동하지 않습니다.
우리는 또한 색채 QA를 사용하여 이야기에서 크로스 브라우저 테스트를 실행합니다.
또한 글꼴과 함께 렌더링 된 구성 요소를보고 싶다면 캔버스의 리 페인트를 강제해야합니다. 이는 우리의 글꼴이 모두 https://ws-downloads.files.bbci.co.uk/fonts/index.html에 따라 optional 또는 swap 의 font-display 속성을 가지고 있기 때문입니다. 리 페인트를 강제하는 가장 쉬운 방법은 분배기를 미리보기 창과 Knobs 섹션 사이에 이동하거나 브라우저 창을 크기를 조정하는 것입니다.
로컬 네트워크를 통해 액세스 할 수 있도록 응용 프로그램을 호스팅하려면 여기에서 지침을 따르십시오.
프로덕션 빌드 로이 응용 프로그램을 로컬로 실행하려면 실행 : yarn build && yarn start .
우리는 데이터 및 정적 자산을 위해 LocalHost에서 응용 프로그램을 가리키는 애플리케이션을 현지에서 사용하는 yarn build 사용합니다.
이것은 주로 테스트 및 라이브 환경 번들을 사용하여 latest 디버깅에 사용됩니다. 디버그를 시작하기 전에 올바른 환경의 정적 자산 위치에 번들이 존재하는지 확인하십시오.
LocalHost에서 테스트 번들을 실행하려면 :
envConfig/test.env 에서 값을 변경합니다.LOG_DIR='/var/log/simorgh' LOG_DIR='log'rm -rf build && yarn build:test && yarn startLocalHost에서 라이브 번들을 실행하려면 :
envConfig/live.env 에서는 다음의 값을 변경합니다.LOG_DIR='/var/log/simorgh' LOG_DIR='log'rm -rf build && yarn build:live && yarn start일부 기능은 사용자가 영국 내 또는 국제적으로 위치하고 있는지 여부에 따라 다르게 수행됩니다. 특정 LocalHost BBC 도메인을 통해 Simorgh에 액세스하여 특정 버전을 명시 적으로 요청할 수 있습니다.
이러한 URL이 작동하지 않으면 호스트 파일 항목 ( /etc/hosts 또는 C:WindowsSystem32driversetchosts )을 추가해야 할 수도 있습니다.
127.0.0.1 localhost.bbc.co.uk
127.0.0.1 localhost.bbc.com
배포시 CI 환경에서 make buildCi test 및 live 환경 모두에 대한 번들이 생성됩니다. 두 환경에서 .env.test 또는 .env.live 파일은 올바른 번들로 응용 프로그램을 실행하는 데 사용되는 .env 파일을 덮어 씁니다.
yarn build 의 모든 실행은 repo의 번들 분석 파일을 업데이트합니다. 번들 크기의 고장을 보려면 브라우저에서 생성 된 HTML 보고서 ./reports/webpackBundleReport.html 열면 webpack-bundle-analyzer 통해 생성됩니다. 데이터는 JSON ./reports/webpackBundleReport.json 으로도 사용할 수 있습니다.
우리는 AirBnB StyleGuide로 줄을 서고 있으며 더 예쁘게 코드 포맷터로 사용합니다. yarn test:lint 로 실행할 수 있습니다.
우리는 yarn test:unit 로 실행할 수있는 농담 단위 테스트가 있습니다.
yarn test 두 세트를 실행합니다.
우리는 엔드 투 엔드 테스트에 사이프러스를 사용합니다. 연기 테스트를 로컬로 실행하려면이 단일 명령을 실행하십시오.
yarn test:e2e
포트 7080의 프로덕션 서버를 회전시키고 이에 대해 Cypress 테스트를 실행합니다. 연기 테스트를 대화식으로 실행하려면 다음을 실행하십시오.
yarn test:e2e:interactive
이는 테스트가 실행될 때 개별 테스트를 브라우저의 시각적 스트림과 함께 쉽게 실행할 수있는 사용자 인터페이스를로드합니다.
테스트 스위트에서 사용할 수있는 몇 가지 환경 변수가 있습니다.
| 환경 변수 | 효과 | 가능한 값 |
|---|---|---|
| cypress_only_service | 지정된 서비스 만 실행하도록 제한됩니다 | 단일 서비스, 즉 CYPRESS_ONLY_SERVICE=urdu |
| Cypress_app_env | 특정 환경에서 테스트를 실행합니다 | test , local , live |
| Cypress_smoke | 사실이라면 연기 테스트 만 실행합니다 | true , false |
| cypress_uk | 영국에서 Live에 대한 E2E를 실행하는 것을 참조하십시오 | true , false |
| Cypress_skip_eu | EU 외부에서 E2E를 실행하는 것을 참조하십시오 | true , false |
이 명령은 조합하여 실행할 수 있습니다.
E2E Suite AKA yarn test:e2e 또는 yarn test:e2e:interactive 테스트의 하위 집합을 실행합니다. 그렇지 않으면 연기 테스트 로 알고 있습니다. 전체 스위트를 실행하려면 :
CYPRESS_SMOKE=false yarn test:e2e
CYPRESS_ONLY_SERVICE 환경 변수를 사용하여 지정하여 단일 서비스에 대해서만 테스트를 실행하도록 제한 될 수 있습니다. 예를 들어:
CYPRESS_ONLY_SERVICE=urdu yarn test:e2e
특정 사양 만 실행하려면 Cypress를 직접 호출해야합니다. 먼저 Simorgh가 이미 다른 탭에서 실행 한 다음 실행되도록하십시오 (예 : 기사 테스트 만 실행하기 위해).
npx cypress run --spec cypress/integration/pages/articles/index.js
Cypress CLI 사용에 대한 자세한 내용은 https://docs.cypress.io/guides/guides/command-lin.html에서 확인할 수 있습니다.
이것은 영국에 기반을 둔 개발자에게만 영향을 미칩니다 (그러나 영국을 통한 VPN 라우팅을 사용하는 경우 영향을 줄 수 있음).
Cypress .visit () 함수는 테스트 당 단일 도메인을 방문하는 데 잠겨 있습니다. .com 에서 .co.uk 까지 리디렉션으로 인해 영국 내에서 E2E 테스트를 시작할 때 문제가 발생합니다. 기본적으로 사이프러스 테스트는 마치 영국 이외의 지역에서 실행되는 것처럼 실행됩니다. 영국에서 이러한 테스트를 실행하려면 UK Cypress 환경 변수를 테스트로 전달해야합니다. 이렇게하면 URL 결말을 .co.uk 로 대체하여 이러한 테스트를 성공적으로 실행할 수 있습니다.
다음은 예제 명령입니다.
CYPRESS_APP_ENV=test CYPRESS_UK=true CYPRESS_SMOKE=true yarn cypress
이것은 EU에 기반한 개발자에게 영향을 미치지 만 EU가 아닌 국가를 통해 VPN 라우팅을 사용하는 경우 영향을 줄 수 있습니다).
EU 외부에서 사이프러스 테스트를 실행하면 AMP의 EU 동의 배너가 표시되지 않으므로 일부 테스트가 실패 할 수 있습니다. EU 외부에서 이러한 테스트가 실행되는 것을 방지하기 위해 CYPRESS_SKIP_EU=true 설정하십시오.
예제 명령은 다음과 같습니다.
CYPRESS_SKIP_EU=true yarn cypress:interactive
다음 명령은 Simorgh와 Cypress를 모두 실행합니다.
CYPRESS_APP_ENV=local CYPRESS_UK=true CYPRESS_SMOKE=true yarn test:e2e
cypress_app_env는 '테스트'및 '라이브'와 동일하게 설정할 수도 있습니다. cypress_smoke는 참 또는 거짓일 수 있습니다. 기본적으로 사실이며 특정 테스트의 하위 집합을 실행합니다.
우리는 등대를 사용하여 페이지의 성능을 테스트합니다. 그러나 이것들은 Simorgh에서 우리 자신의 내부 CD 프로세스로 옮겨졌습니다. 이를 통해 Simorgh의보다 정확한 묘사에서 이러한 테스트를 실행할 수 있습니다. 크롬 브라우저에서 등대를 직접 실행하거나 Node Lighthouse CLI를 사용할 수 있습니다.
페르시아 신화 새의 이름을 따서 Simorgh라는 이름을지었습니다. Simorgh는 많은 새들 (그리고 일부는 다른 동물들)의 아말감을 하나로 하나로 묶습니다.
행복하게도, 하나의 솔루션에 모든 BBC 기사를 제공하기에 적합한 은유는 응용 프로그램이 더 많은 컨텐츠 유형을 지원하기 위해 진화함에 따라 이제 훨씬 더 적합 할 것입니다. 또한 우리 팀의 국제적 특성에 대한 명확한 언급이지만, BBC가 지원하는 모든 언어의 사용자에게 기사 (및 따른 모든)가 작동하는 기사를 보장하려는 욕구에 대한 명확한 언급입니다.
그것은 또한 실용적인 독특한 이름이며, 더 피상적으로, 새는 매우 예쁘다.
