큐브코브라
Release
매직: 더 개더링 큐브를 구축, 관리, 플레이 테스트하기 위한 오픈 소스 웹 애플리케이션입니다.
Cube Cobra에 기여하는 데 관심이 있으시면 이 프로젝트에 대한 기여 지침을 읽어보세요.
NodeJS, Redis 및 원하는 IDE를 설치해야 합니다(VSCode를 권장합니다). 여기에서 필요한 리소스를 찾을 수 있습니다:
노드 20
NodeJS: https://nodejs.org/en/download/
레디스 서버:
brew install redisapt-get install redis Redis를 설치한 후 서버를 시작합니다. Mac에서는 이를 수행하는 지름길은 brew services start redis 입니다. brew services list 통해 상태를 확인할 수 있습니다.
Localstack은 S3, DynamoDB 및 Cloudwatch를 포함하여 CubeCobra를 실행하는 데 필요한 AWS 서비스의 로컬 에뮬레이션을 제공합니다.
localstack 사이트의 설치 지침을 따를 수 있습니다. 권장되는 설정에는 Docker 컨테이너에서 localstack을 실행하는 것이 포함되며, 여기에는 Docker Desktop도 필요합니다.
brew install localstack/tap/localstack-clicurl 명령 사용 localstack이 설치되면 CLI localstack start --detached 를 사용하여 백그라운드에서 서버를 시작할 수 있습니다. localstack status 통해 상태를 확인할 수 있습니다.
VSCode(강력히 권장되지만 필수는 아님): https://code.visualstudio.com/ VSCode용 ESLint 확장: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint VSCode용 Prettier 확장: https ://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
VSCode(ESLint 및 Prettier 확장 포함)가 권장되는 환경입니다. 이 설정을 사용할 때 선택한 작업 공간이 복제한 루트 폴더인지 확인하세요. 그러면 ESLint 플러그인이 Linting 규칙과 함께 작동할 수 있습니다. Prettier는 코드에 표준 형식을 자동으로 적용합니다. 이러한 플러그인을 사용하면 린팅 및 코드 형식 지정 규칙을 훨씬 쉽게 준수할 수 있습니다.
첫 번째 설정에서는 다음을 실행해야 합니다.
yarn install && yarn build
yarn setup:local이는 다음을 수행합니다.
Windows를 사용하는 경우 bash를 스크립트 셸로 설정해야 합니다.
bash 어딘가에 설치되어 있는지 확인하고 [아래 경로 대신 bash 경로를 사용하여] 다음 명령을 실행해야 합니다.
yarn config set script-shell " C: \ Program Files \ git \ bin \ bash.exe "그런 다음 다음과 같이 프로그램을 시작할 수 있습니다.
yarn start:dev이 스크립트는 다음을 수행합니다.
이제 브라우저를 열고 http://localhost:8080을 통해 앱에 연결할 수 있습니다.
(노드가 로그에 포트 5000에서 실행 중이라고 나와 있음에도 불구하고 연결하려면 포트 8080을 사용해야 합니다.)
Nodemon은 소스 파일이 변경될 때마다 애플리케이션을 다시 시작합니다.
애플리케이션에 로컬로 액세스한 후 탐색 모음의 "등록" 링크를 사용하여 새 사용자 계정을 만들어야 합니다.
환경 변수는 .env 파일에서 채워집니다. 체크인된 .env 파일이 없으므로 설정 스크립트는 .env_EXAMPLE .env 로 복사하고 일부 기본값을 사용하여 LocalStack에서 지원하는 CubeCobra를 지원합니다.
원하는 경우 LocalStack이 아닌 실제 AWS 리소스에 대해 Cube Cobra의 로컬 인스턴스를 실행할 수 있습니다. AWS 계정을 사용하여 S3, DynamoDB 및 Cloudwatch를 설정한 후 자격 증명을 .env 파일에 삽입할 수 있습니다.
다음은 환경 변수를 작성하는 방법에 대한 표입니다.
| 변수 이름 | 설명 | 필수의? | | --------- | ------------------------------------- ----------------------------- | --------- | --- | | AWS_ACCESS_KEY_ID | 계정의 AWS 액세스 키입니다. | 예 | | AWS_ENDPOINT | AWS에 사용할 기본 엔드포인트입니다. 호스팅된 AWS가 아닌 localstack을 가리키는 데 사용됩니다. | | | AWS_LOG_그룹 | 사용할 AWS CloudWatch 로그 그룹의 이름입니다. | 예 | | AWS_LOG_STREAM | 사용할 AWS CloudWatch 로그 스트림의 이름입니다. | | | AWS_지역 | 사용할 AWS 리전입니다(기본값: us-east-2). | 예 | | AWS_SECRET_ACCESS_KEY | 계정의 AWS 보안 액세스 키입니다. | 예 | | 큐브코브라_버전 | 큐브 코브라 버전. | | | 데이터_버킷 | 사용할 AWS S3 버킷의 이름입니다. 계정에 이 버킷을 생성해야 합니다. | 예 | | 도메인 | 서버의 도메인 이름입니다. 이메일과 같은 외부 리디렉션에 사용됩니다. | 예 | | 다운타임_활성 | 사이트가 다운타임 모드에 있는지 여부입니다. | | | 다이나모_프리픽스 | DynamoDB 테이블에 사용할 접두사입니다. 이를 기본값으로 그대로 둘 수 있습니다. | 예 | | EMAIL_CONFIG_PASSWORD | 이메일 전송에 사용할 이메일 계정의 비밀번호입니다. | | | EMAIL_CONFIG_USERNAME | 이메일 전송에 사용할 이메일 계정의 사용자 이름입니다. | | | 환경 | 큐브 코브라를 실행할 수 있는 환경 | 예 | | | NITROPAY_활성화됨 | 당사의 광고 제공업체인 NitroPay를 활성화할지 여부입니다. | | | NODE_ENV | 큐브 코브라를 실행할 수 있는 환경 | 예 | | PATREON_CLIENT_ID | Patreon OAuth 앱의 클라이언트 ID입니다. | | | PATREON_CLIENT_SECRET | Patreon OAuth 앱의 클라이언트 비밀번호입니다. | | | PATREON_HOOK_SECRET | Patreon 웹훅의 비밀. | | | PATREON_REDIRECT | Patreon OAuth 앱의 리디렉션 URL입니다. | | | 포트 | Cube Cobra를 실행할 포트입니다. | 예 | | REDIS_호스트 | Redis 서버의 URL입니다. | 예 | | REDIS_설정 | Redis 서버 설정 여부 - Redis에는 필요하지만 Elasticache에는 필요하지 않습니다. | | | 비밀 | 암호화를 위한 비밀 문구입니다. 기본값을 그대로 둘 수 있습니다. | 예 | | 세션_비밀 | 세션 암호화를 위한 비밀 문구입니다. 기본값을 그대로 둘 수 있습니다. | 예 | | 세션 | 세션 쿠키의 이름입니다. 기본값을 그대로 둘 수 있습니다. | 예 | | TCG_PLAYER_PRIVATE_KEY | TCGPlayer API의 개인 키입니다. | | | TCG_PLAYER_PUBLIC_KEY | TCGPlayer API의 공개 키입니다. | | | 캐시_활성화됨 | 캐싱을 활성화할지 여부입니다. | | | 자동 확장_그룹 | 이 인스턴스가 실행되고 분산 캐시에 사용되는 자동 확장 그룹의 이름입니다. | | | 캐시_비밀 | 분산 캐시의 비밀입니다. | |
초기 설정 스크립트에서 yarn update-cards 카드 정의를 생성하는 것입니다. 이 스크립트를 실행하면 scryfall에서 최신 데이터를 가져옵니다.
카드 분석을 원할 경우 다음 스크립트를 실행할 수 있습니다.
yarn update-all이는 순서대로 다음을 수행합니다.
Express 4는 PugJS 3을 사용한 템플릿 렌더링과 JSON 기반 API 엔드포인트 정의를 모두 지원하는 미니멀리스트 웹 프레임워크를 제공합니다. HTML 템플릿은 주로 서버에서 주입된 초기 props를 사용하여 React가 부트스트랩할 수 있는 최소 페이지를 렌더링하는 데 사용됩니다.
우리는 모든 카드 정의를 사전 처리된 대용량 파일에 보관하므로 프로덕션 노드는 파일을 다운로드하고 로드하기만 하면 되며 준비가 되면 S3에서 최신 파일을 가져올 수 있습니다. 카드 데이터가 필요할 때마다 다른 서비스에 요청하는 것보다 메모리에서 읽는 것이 훨씬 빠르기 때문에 이렇게 합니다.
외부 프로세스는 카드 정의를 업데이트하고 S3에 업로드하는 역할을 담당합니다. 이와 동일한 프로세스는 카드 분석 및 데이터 내보내기 업데이트도 담당합니다.
우리는 멀티플레이어 드래프팅을 위한 동시성 제어를 위해 Redis를 사용합니다. 모든 Redis 작업은 multiplayerDrafting.js 에서 처리됩니다.
Express 서버의 각 인스턴스는 매일 밤 node-schedule을 사용하여 작업을 실행하여 s3의 메모리 내 카드 데이터베이스를 업데이트합니다.
Bash 스크립트( jobs/definition )는 AWS에서 주기적으로 실행되어 시간별, 일별 및 주별 작업을 실행합니다.
프런트엔드와 백엔드에서 사용할 수 있는 카드 필터가 정의됩니다. Nearley는 카드 데이터베이스에 적용할 수 있는 필터를 정의하는 코드를 생성하는 데 사용되는 nodejs 파서 툴킷입니다.
TypeScript 5.5는 바닐라 JS 구성 요소의 사용을 PropTypes로 대체하기 위해 점차적으로 출시되고 있습니다.
구성 요소는 SCSS를 사용하는 [Bootstrap v5.1][boostrap]으로 구동되는 Reactstrap 9에서 제공됩니다.
구성 요소는 일반적으로 추가 스타일 지정을 위해 부트스트랩 클래스를 직접 사용하지만 공개 CSS 파일에 정의된 전역 클래스 이름을 사용할 수도 있습니다.
