scratch www
2.2.3 Hotfix
이것은 스크래치의 오픈 소스 웹 클라이언트입니다! 이것은 스크래치 웹사이트의 대부분에 대한 코드입니다.
특히 이 코드베이스에는 다음을 위한 코드가 포함되어 있습니다.
스크래치-www 프로젝트에는 백엔드 시스템에 특정한 디자인 측면이 많이 있습니다. 자신의 프로젝트에 이를 사용하려면 백엔드 호출을 수행하는 모든 위치를 살펴보고 해당 기능을 수행할 자신만의 백엔드 시스템을 만들어야 합니다.
반면에 스크래치 GUI 프로젝트는 백엔드 시스템을 만들 필요 없이 누구나 사용할 수 있도록 설계되었지만 프로젝트 및 자산 절약을 위한 백엔드 시스템도 지원할 수 있습니다.
이 코드베이스에 대한 귀하의 기여를 환영합니다! "도움말 구함"이라고 표시된 현재 미해결 문제 목록을 찾아보는 것부터 시작해 보세요.
스크래치 www에 기여하는 것은 스크래치 GUI에 기여하는 것보다 더 어려울 수 있습니다. 이는 스크래치-gui가 다른 서비스를 실행할 필요 없이 자체적으로 실행될 수 있는 반면, 스크래치-www는 스크래치 팀이 실행하는 여러 백엔드 시스템과 통신해야 하기 때문입니다("다른 스크래치 저장소와 어떻게 맞는지" 참조). 위에). 스크래치의 소스 코드에 처음으로 기여하는 경우, 스크래치 GUI와 "도움말 구함"이라고 표시된 공개 문제 목록에 익숙해지는 것부터 시작하는 것이 좋습니다.
기여하려면 GitHub의 프로젝트에 기여하기 위한 표준 단계를 따르세요.
이 저장소의 LICENSE 파일을 참조하세요.
다음은 스크래치 코드베이스 작업 방식에 익숙해지는 데 도움이 되는 몇 가지 리소스입니다.
이 코드베이스가 사용하는 중요한 핵심 기술은 다음과 같습니다.
테스트에서는 다음을 사용합니다.
다음을 설치했는지 확인하세요.
스크래치 www 코드는 특정 버전의 종속성에서만 작동하므로 모든 종속성을 최신 상태로 유지하는 것이 중요합니다. 다음 명령을 사용하여 패키지를 업데이트할 수 있습니다.
npm install다음 경고는 무시해도 됩니다.
npm WARN [email protected] requires a peer of react@^0.14.0 but none was installed.
npm WARN [email protected] requires a peer of react@^0.14.0 but none was installed.
npm WARN [email protected] requires a peer of redux@^2.0.0 || ^3.0.0 but none was installed.
npm WARN [email protected] requires a peer of react@^0.14.7 but none was installed.
npm WARN [email protected] requires a peer of react@^0.14.8 but none was installed.이들은 현재 static/js/lib 에 존재합니다.
소스 코드를 브라우저가 읽을 수 있는 HTML 및 JavaScript 번들로 컴파일하려면 웹 브라우저를 통해 액세스할 수 있는 임시 버전의 사이트를 컴퓨터에 생성하면 됩니다.
다음을 실행하여 사이트를 한 번만 "구축"할 수 있습니다.
npm run build또는 다음 명령을 실행하여 파일을 편집하면서 파일을 다시 작성하는 서버를 실행할 수 있습니다.
npm run translate
npm start 참고: npm run translate intl 디렉터리를 빌드합니다. 이 기능이 없어도 사이트는 잘 구축되지만 번역 가능한 텍스트 문자열은 intl을 구축할 때까지 올바르게 표시되지 않습니다.
개발 중에 npm start ./static 또는 ./src 파일에 대한 모든 업데이트를 감시하고 프로젝트 재구축을 트리거합니다. 개발 중에 빌드는 메모리에 저장되며 ./build 디렉터리에서 제공되지 않습니다.
npm run build 또는 npm start 를 사용하여 로컬 사이트를 구축한 후에는 브라우저의 주소 표시줄에 localhost:8333 입력하여 웹 브라우저에서 로컬 컴퓨터에 호스팅된 사이트에 액세스할 수 있습니다.
npm start 실행할 때 주의해야 할 몇 가지 중요한 로그 메시지는 다음과 같습니다.
webpack: bundle is now VALID. – 번들이 메모리에 로드되었으며 이제 브라우저에서 볼 수 있습니다. 이는 npm start 설정을 완료한 후와 파일 업데이트가 브라우저에서 보기 위해 다시 컴파일된 후에 모두 표시됩니다.webpack: bundle is now INVALID. – 이 내용이 표시된다면 브라우저 보기를 위해 아직 컴파일 중인 파일을 업데이트했다는 의미입니다. 페이지는 계속 볼 수 있지만 아직 업데이트한 내용은 볼 수 없습니다. 웹 브라우저에서 사이트를 사용할 수 있게 만드는 npm start 프로세스(위의 "빌드하려면"에서 생성됨)를 중지하려면 터미널에서 ^C (control-c)를 사용하세요.
npm start npm start 전에 명령 시작 부분에 설정하여 다음 환경 변수로 구성할 수 있습니다.
| 변하기 쉬운 | 기본 | 설명 |
|---|---|---|
API_HOST | https://api.scratch.mit.edu | API 요청의 호스트 이름 |
ASSET_HOST | https://assets.scratch.mit.edu | 자산 요청의 호스트 이름 |
BACKPACK_HOST | https://backpack.scratch.mit.edu | 배낭 요청을 위한 호스트 이름 |
PROJECT_HOST | https://projects.scratch.mit.edu | 프로젝트 요청의 호스트 이름 |
FALLBACK | '' | 기존 사이트의 통과 위치 |
THUMBNAIL_URI | /internalapi/project/thumbnail/{}/set/ | 프로젝트 썸네일 업데이트를 위한 URI 템플릿, 요청 호출 시 {} 프로젝트 ID로 대체됩니다. |
THUMBNAIL_HOST | '' | 업로더 서비스의 호스트 이름 |
GTM_ID | '' | Google 태그 관리자 ID |
GTM_ENV_AUTH | '' | Google 태그 관리자 환경 및 인증 정보 |
NODE_ENV | null | production 아닌 경우 앱은 개발처럼 작동합니다. |
PORT | 8333 | 개발자 서버용 포트(http://localhost:XXXX) |
참고: 기본적으로 API_HOST=https://api.scratch.mit.edu 이므로 기본적으로 스크래치 웹사이트에서 실제 데이터를 보고 상호 작용하게 된다는 점에 유의하세요.
대부분의 단위 테스트는 Jest를 사용하여 실행되지만 이전 단위 테스트는 TAP 프레임워크를 사용합니다.
애플리케이션을 빌드하고 모든 단위 및 지역화 테스트를 실행하려면 다음 명령을 사용하십시오.
npm test Jest를 사용하여 명령줄에서 단일 단위 테스트 파일을 실행하려면 다음 명령을 사용하세요.
node_modules/.bin/jest ./test/unit/PATH/TO/FILENAME.test.js 참고: PATH/TO/FILENAME 실행하려는 파일의 실제 경로로 바꾸십시오.
통합 테스트에서는 자체적으로 스크래치 www보다 더 큰 환경이 실행되고 있다고 가정합니다. 예를 들어 많은 경우 테스트 사용자가 사이트에 로그인할 수 있어야 하며 이를 위해서는 백엔드 및 데이터베이스 지원이 필요합니다.
기본적으로 테스트는 Staging 인스턴스에 대해 실행되지만 다른 위치(예: 로컬 빌드)에 대해 테스트를 실행하려는 경우 ROOT_URL 환경 변수(아래 참조)를 사용하여 다른 위치에 전달할 수 있습니다.
모든 통합 테스트에서는 Jest를 테스트 프레임워크로 사용합니다.
명령줄에서 모든 통합 테스트를 실행하려면 다음 안내를 따르세요.
SMOKE_USERNAME=username SMOKE_PASSWORD=password ROOT_URL=https://scratch.mit.edu UNOWNED_SHARED_PROJECT_ID= # UNOWNED_UNSHARED_PROJECT_ID=# OWNED_SHARED_PROJECT_ID=# OWNED_UNSHARED_PROJECT_ID=# npm run test:integration 테스트에서는 유사한 사용자 이름과 동일한 비밀번호를 가진 여러 사용자를 사용합니다. SMOKE_USERNAME으로 전달한 사용자 이름과 동일한 사용자 이름 끝에 1, 2, 3, 4, 5, 6(곧 더 높은 숫자도 추가될 예정)이 추가되어 사용됩니다. 따라서 사용자 이름 "test"를 사용하면 사용자 이름 "test1", "test2", "test3" 등도 사용됩니다. 이 패턴으로 계정을 생성했는지 확인하고 관련된 모든 계정에 동일한 비밀번호를 사용하세요.
이 패턴에 맞는 사용자 이름 집합을 사용할 수 있습니다. 각 계정은 SMOKE_PASSWORD로 전달되는 동일한 비밀번호를 공유해야 합니다.
테스트를 실행하려면 여러 환경 변수를 전달해야 합니다. 대부분은 스테이징 서버를 가리키는 기본값을 가지고 있습니다.
Jest를 사용하여 명령줄에서 단일 파일을 실행하려면:
SMOKE_USERNAME=username SMOKE_PASSWORD=password ROOT_URL=https://scratch.mit.edu node_modules/.bin/jest ./test/integration/filename.test.jsTAP를 사용하여 명령줄에서 단일 파일을 실행하려면 다음을 수행하세요.
SMOKE_USERNAME=username SMOKE_PASSWORD=password ROOT_URL=https://scratch.mit.edu node_modules/.bin/tap ./test/integration-legacy/smoke-testing/filename.js -R classic --no-coverage --timeout=3600-R classic 탭이 이전 보고 스타일을 사용하도록 하여 "nyc" 패키지의 오류를 방지합니다.--no-coverage 탭의 적용 범위 추적 기능을 사용하지 않기 때문입니다.timeout 인수는 전체 탭 테스트 모음의 길이에 대한 것입니다. 시간 초과 오류가 발생하는 경우 이 값을 조정해야 할 수도 있습니다(일부 Selenium 테스트는 실행하는 데 시간이 걸립니다). 여러 브라우저/OS 조합을 원격으로 테스트할 수 있는 온라인 서비스인 Saucelabs를 사용하여 통합 테스트를 실행할 수 있습니다. (현재 모든 테스트는 Mac의 Chrome용으로 작성되었습니다.)
테스트에 사용하려면 Saucelabs 계정이 필요합니다. 액세스 키가 있는 경우 다음에서 액세스 키를 찾을 수 있습니다.
Saucelabs를 사용하여 테스트를 실행하려면 다음 명령을 실행하세요.
SMOKE_USERNAME=username SMOKE_PASSWORD=password SAUCE_USERNAME=saucelabsUsername SAUCE_ACCESS_KEY=saucelabsAccessKey ROOT_URL=https://scratch.mit.edu npm run test:integration:remote참고: 현재 Jest 테스트는 Saucelabs에서 실행되지 않습니다.
| 변하기 쉬운 | 기본 | 설명 |
|---|---|---|
ROOT_URL | scratch.ly | 테스트를 실행하려는 위치 |
SMOKE_USERNAME | None | 테스트를 위해 로그인하는 스크래치 사용자의 사용자 이름 |
SMOKE_PASSWORD | None | 테스트를 위해 로그인하는 스크래치 사용자의 비밀번호 |
SMOKE_REMOTE | false | Sauce Labs에서 테스트할지 여부. test:smoke:sauce를 실행하면 참입니다. |
SMOKE_HEADLESS | false | 헤드리스 모드에서 브라우저를 실행합니다. 지금은 불안정하다 |
SAUCE_USERNAME | None | Sauce Labs 계정의 사용자 이름 |
SAUCE_ACCESS_KEY | None | 사용자 설정에서 Sauce Labs에 대한 액세스 키를 찾을 수 있습니다. |
스테이징 또는 프로덕션에 배포하면 코드가 S3에 업로드되고 Fastly가 구성됩니다.
npm install
virtualenv ENV
. ENV/bin/activate
pip install -r requirements.txt
npm run build && npm run deploy| 변하기 쉬운 | 기본 | 설명 |
|---|---|---|
FASTLY_SERVICE_ID | '' | bin/configure-fastly.js 의 Fastly 서비스 ID |
FASTLY_API_KEY | '' | bin/configure-fastly.js 용 Fastly API 키 |
FASTLY_ACTIVATE_CHANGES | false | 변경 사항을 활성화하고 구성 후 모두 제거 |
AWS_ACCESS_KEY_ID | '' | S3용 AWS 액세스 키 ID |
AWS_SECRET_ACCESS_KEY | '' | S3용 AWS 보안 액세스 키 |
S3_BUCKET_NAME | '' | 배포할 S3 버킷 이름 |
배포 시 Fastly의 API는 활성 VCL 구성을 복제하고 이 저장소의 routes.json 파일의 콘텐츠로 관련 구성 요소만 업데이트하고 새 VCL 구성을 활성화하는 데 사용됩니다.
Routes.json 파일의 대부분은 간단하지만 일부 필드는 용도가 명확하지 않습니다.
routeAlias Fastly에서 정규식 비교 코드의 전체 길이와 복잡성이 너무 커지는 것을 방지하는 데 도움이 됩니다. S3에서 정적 파일로 응답할 수 있는지 확인하기 위해 들어오는 요청 URL을 빠르게 테스트한 대규모 정규식이 하나 있습니다. 일치하는 항목이 없으면 요청을 scrapr2에 전달해야 한다고 가정합니다. routes.json 에서 모든 단일 경로 pattern 정규식을 테스트할 수 있지만 많은 경우가 유사하므로 대신 더 짧고 빠른 모든 routeAlias 항목의 고유한 세트를 사용합니다.
Windows에서 개발하려면 Unix 인터페이스를 제공하는 프로그램을 사용해야 할 수도 있습니다.
이를 수행하기 위한 몇 가지 옵션이 있습니다:
또한 Node를 설치해야 합니다. WSL에 Node를 설치하는 방법은 다음과 같습니다.
현재 스크래치의 기존 구조에서 이 웹 클라이언트로 전환하는 과정에 있습니다. 전환하면서 이 클라이언트가 프로덕션에서 제대로 작동하기 위해 기존 인프라와 상호 작용하는 방법과 관련된 몇 가지 문제가 발생할 것입니다.
스크래치는 이를 웹 클라이언트로 사용하는 것 외에도 새로운 API 백엔드인 스크래치 REST API(비공개 소스)를 사용하도록 전환하고 있습니다. 현재 개발 중이고 불완전하므로 API 엔드포인트가 존재하지 않는 경우 FALLBACK 이 들어오는 경우 기존 스크래치 엔드포인트를 사용하도록 폴백하도록 설정되어 있습니다.
현재 우리가 겪고 있는 대부분의 문제는 FALLBACK 사용과 관련되어 있습니다. 이 변수는 이 웹 클라이언트의 컨텍스트 내에서 요청이 실패하거나 API_HOST 를 사용할 때 대체할 URL을 지정하는 데 사용됩니다. 프로세스에서 지정하지 않으면 사용되지 않으며, 웹 클라이언트나 API를 통해 이루어지지 않은 요청은 도달할 수 없습니다.
FALLBACK=https://scratch.mit.edu 설정하면 웹 클라이언트가 개발 환경의 스크래치 웹 사이트에서 데이터를 검색할 수 있습니다. 그러나 보안 문제로 인해 개발 환경을 통해 스크래치로 데이터를 보내려는 시도는 작동하지 않습니다. 이는 다음 사항이 당분간 중단될 것임을 의미합니다.
또한 FALLBACK=https://scratch.mit.edu 로 설정한 경우 아직 마이그레이션되지 않은 웹 사이트 부분(현재 Discuss , Profile , My Stuff 등)에 대한 링크를 클릭하면 다음으로 이동한다는 점에 유의하세요. 스크래치 웹사이트 자체.
