remix gospel stack

Turborepo와 함께 복음 스택

Turborepo 파이프 라인, Prisma, PostgreSQL 또는 SQLite (Litefs)가있는 Remix TypeScript Monorepo, Docker는 fly.io, pnpm, shadcn/ui tailwindcss로 배포됩니다.

QuickStart (권장)

pnpm create remix@latest --init-script --install --template https://github.com/PhilDL/remix-gospel-stack

? 이 저장소는 다음과 같습니다.

• TypeScript 만.
• Monorepo 작업 공간을 처리하기 위해 PNPM 패키지 관리자와 호환됩니다.
• Turborepo Pipelines + Cache를 사용하여 Monorepo를 빌드, 보풀, 타이 테크 및 테스트합니다.

(대체) 저장소 복제

git clone [email protected]:PhilDL/remix-gospel-stack.git
cd remix-gospel-stack
pnpm add -w @remix-run/dev
pnpm remix init

스택에 무엇이 있습니까?

이 스택은 Turborepo 및 PNPM 작업 공간으로 구동되는 리믹스 방향 Monorepo입니다. Docker 컨테이너 빌딩을 통해 Fly.io에 즉시 배포 할 수있는 리믹스 앱이 포함되어 있습니다.

이 패키지는 pnpm 선택한 패키지 관리자로 사용하여 작업 공간을 관리합니다. Workspace 정의 yarn Package.json 파일에 넣지 npm 보장은 없습니다.

Turborepo 및 PNPM 작업 공간으로 구동되는 Monorepo 아키텍처 :

• 응용 프로그램이 포함 된 apps 폴더

  • remix-app : ESM의 Remix.Run 앱.
  • remix-vercel : Remix.run 앱, Vercel에 배치 할 준비가되었습니다.
  • nextjs-app : 다음 .js 앱

• 예제를 포함하는 packages

  • ui : Shadcn/UI로 구동되는 REACT UI 패키지 예제. 일부 예제 구성 요소 및 Shadcn/UI Tailwind Config는 Tailwind 플러그인 및 사전 설정으로 내 보냅니다.
  • database : 다른 패키지 또는 앱에서 사용할 준비가 된 프리즘 래퍼. TSUP와 함께 번들. 설치 중에 선택한 내용에 따라 postgresql 또는 sqlite // litefs 일 수 있습니다.
  • business : Prisma database 종속성으로 사용하고 예제와 같은 저장소 패턴을 사용하는 예제 패키지.
  • internal-nobuild : 빌드 단계가없는 순수한 타이프 스크립트 인 예제 패키지. 패키지의 main 엔트리 포인트는 직접 src/index.ts 입니다. Remix는 자체 빌드 단계 (Esbuild와 함께)로 컴파일을 처리합니다. 이 패키지에는 유리한 단위 테스트도 포함되어 있습니다. Remix는 tsconfig.json 경로를 사용하여 해당 프로젝트 및 해당 유형을 참조합니다. 패키지 게시를 계획하지 않을 때는 이러한 유형의 내부 패키지를 권장합니다.

• config-packages :

  • 다른 사전 설정 구성이있는 eslint 패키지.
  • TS 구성, 사전 설정이 다릅니다.
  • 테일 윈드 구성.

모든 리믹스 미래 플래그가 활성화되었습니다.

 future : {
  unstable_optimizeDeps : true ,
  v3_fetcherPersist : true ,
  v3_lazyRouteDiscovery : true ,
  v3_relativeSplatPath : true ,
  v3_throwAbortReason : true ,
  v3_singleFetch : true ,
  v3_routeConfig : true ,
} ,

다른 뭐야?

• Docker와 함께 리믹스 앱 멀티 지역 플라이 앱 배포
• 데이터베이스는 설치에서 선택한 2 가지 맛으로 제공됩니다.
  • 다중 지역 플라이 플라이 포스트 그레 스크린 클러스터
  • litefs- 분산 된 sqlite
• 플라이 백업 지역 폴백을위한 리믹스 앱 HealthCheck 엔드 포인트
• GitHub 작업은 생산 및 준비 환경에 병합에 대한 리믹스 앱을 배포합니다.
• 리믹스 앱에서 극작가와의 엔드 투 엔드 테스트
• 다른 패키지 내부에 Vitest 및 테스트 라이브러리를 사용한 단위 테스트.
• 더 예쁘고 코드 형식
• TypeScript의 정적 유형

경고 다음 모든 명령은 Monorepo Root 디렉토리 에서 시작해야합니다.

개발

• 종속성을 설치하십시오.

  pnpm install

  또한 example .env.example을 복사해야합니다.

  cp .env.example .env
  cp .env.example .env.docker

• PostgreSQL Docker 컨테이너를 시작하십시오

  pnpm run docker:db

  참고 : NPM 스크립트가 완료되고 Docker는 백그라운드에서 컨테이너를 설정합니다. Docker가 완료되었고 진행하기 전에 컨테이너가 실행되는지 확인하십시오.

• 프리즘 스키마를 생성합니다

  pnpm run generate

• Prisma 마이그레이션을 데이터베이스로 실행하십시오

  pnpm run db:migrate:deploy

• 첫 번째 빌드를 실행하십시오 ( ... 을 통해 종속성으로)

  pnpm run build --filter=@remix-gospel-stack/remix-app...

  간단히 pnpm run build 실행하면 NextJS 앱을 포함하여 모든 것이 구축됩니다.

• 리믹스 데브 서버를 실행하십시오

  pnpm run dev --filter=@remix-gospel-stack/remix-app

PostgreSQL과 SQLite (Litefs) 사이의 전환

• PostgreSQL과 Sqlite (Litefs) 사이를 전환하려면 저장소의 루트에서 사용할 수있는 터보 생성기가 있습니다.

  pnpm turbo gen scaffold-database

  그런 다음 프롬프트를 따르십시오. 그러나 Prisma Migrations는 특정 데이터베이스에 연결되어 있으므로 migrations 폴더를 삭제해야합니다.

  참고 : 다른 패키지 (LiteFS-JS)가 필요한 SQLITE (LITEFS)로 전환 한 후 pnpm i --fix-lockfile 다시 실행해야합니다. 첫 번째 마이그레이션을 생성하려면 pnpm run setup 다시 실행해야 할 수도 있습니다.

패키지를 만듭니다

내부 패키지

turbo gen workspace --name @remix-gospel-stack/foobarbaz --type package --copy

그런 다음 프롬프트를 따르십시오

테스트, 유형 체크, 보풀, 설치 패키지 ...

사용 가능한 파이프 라인을 확인하려면 turbo.json 파일을 확인하십시오.

• Cypress Tests 및 Dev를 실행하십시오

  pnpm run test:e2e:dev --filter=@remix-gospel-stack/remix-app

• 모든 것을 보풀

  pnpm run lint

• 전체 Monorepo를 입력하십시오

  pnpm run typecheck

• 전체 monorepo를 테스트하십시오

  pnpm run test
  or
  pnpm run test:dev

• 리믹스 앱에서 NPM 패키지를 설치하는 방법은 무엇입니까?

  pnpm add dayjs --filter @remix-gospel-stack/remix-app

• config-package 폴더에서 tsconfigs, eslint configs를 조정하십시오. 그런 다음 모든 패키지 또는 앱 이이 구성에서 확장됩니다.

fly.io - 배포 - postgresql

경고 다음 모든 명령은 Monorepo Root 디렉토리 에서 시작해야합니다.

첫 배포 전에 몇 가지 작업을 수행해야합니다.

• 첫 번째 노래는 플라이 클리를 부릅니다

  fly auth signup

• 하나의 앱, 하나는 스테이징을위한 두 개의 앱을 만들고 생산을위한 앱을 만듭니다.

  fly apps create remix-gospel-stack
  fly apps create remix-gospel-stack-staging

  참고 : 앱을 성공적으로 만든 후에는 fly.toml 파일을 두 번 확인하여 app 키가 생성 된 프로덕션 앱의 이름인지 확인하십시오. 이 스택은 INT에서 고유 한 접미사를 자동으로 추가하여 즉시 생성 한 앱과 일치하지 않을 수 있습니다. 이 불일치가있는 경우 GitHub 조치 CI 로그에 404 개의 오류가 표시 될 수 있습니다.

• git 초기화.

  git init

• 새 GitHub 저장소를 작성한 다음 프로젝트의 리모컨으로 추가하십시오. 아직 앱을 푸시하지 마십시오!

  git remote add origin < ORIGIN_URL >

• github 리포지어에 FLY_API_TOKEN 추가하십시오. 이렇게하려면 즉시 사용자 설정으로 이동하여 새 토큰을 작성한 다음 FLY_API_TOKEN 이라는 이름으로 리포지트 비밀에 추가하십시오.

• 준비 및 생산 환경 모두에 대한 데이터베이스를 만듭니다.

데이터베이스 생성 :

fly postgres create --name remix-gospel-stack-db
fly postgres attach --app remix-gospel-stack remix-gospel-stack-db

fly postgres create --name remix-gospel-stack-staging-db
fly postgres attach --app remix-gospel-stack-staging remix-gospel-stack-staging-db

참고 : 위의 fly set secret 단계에서 수행 한 스테이징 데이터베이스를 첨부 할 때 같은 이유로 동일한 경고를받을 수 있습니다. 걱정할 필요가 없습니다. 진행하다!

Fly는 귀하를 위해 DATABASE_URL Secret을 설정해야합니다.

Fly.io에 배포 - Sqlite litefs

경고 다음 모든 명령은 Monorepo Root 디렉토리 에서 시작해야합니다.

첫 배포 전에 몇 가지 작업을 수행해야합니다.

• 첫 번째 노래는 플라이 클리를 부릅니다

  fly auth signup

• 하나의 앱, 하나는 스테이징을위한 두 개의 앱을 만들고 생산을위한 앱을 만듭니다.

  fly apps create remix-gospel-stack
  fly apps create remix-gospel-stack-staging

  참고 : 앱을 성공적으로 만든 후에는 fly.toml 파일을 두 번 확인하여 app 키가 생성 된 프로덕션 앱의 이름인지 확인하십시오. 이 스택은 INT에서 고유 한 접미사를 자동으로 추가하여 즉시 생성 한 앱과 일치하지 않을 수 있습니다. 이 불일치가있는 경우 GitHub 조치 CI 로그에 404 개의 오류가 표시 될 수 있습니다.

• git 초기화.

  git init

• 새 GitHub 저장소를 작성한 다음 프로젝트의 리모컨으로 추가하십시오. 아직 앱을 푸시하지 마십시오!

  git remote add origin < ORIGIN_URL >

• github 리포지어에 FLY_API_TOKEN 추가하십시오. 이렇게하려면 즉시 사용자 설정으로 이동하여 새 토큰을 작성한 다음 FLY_API_TOKEN 이라는 이름으로 리포지트 비밀에 추가하십시오.

준비 및 생산 환경 모두에 대한 SQLITE 데이터베이스에 대한 지속적인 볼륨을 만듭니다. 다음을 실행하십시오 (귀하의 요구와 선택한 영역에 따라 GB 크기를 자유롭게 변경하십시오 (https://fly.io/docs/reference/regions/). 영역을 변경하는 경우 Fly.TOML에서 기본_region을 변경하십시오.

fly volumes create data --region cdg --size 1 --app remix-gospel-stack
fly volumes create data --region cdg --size 1 --app remix-gospel-stack-staging

그런 다음 볼륨을 앱에 첨부하십시오.

fly consul attach --app remix-gospel-stack
fly consul attach --app remix-gospel-stack-staging

코딩을 시작하십시오!

이제 모든 것이 설정되었으므로 변경 사항을 저장소로 커밋하고 밀어 넣을 수 있습니다. main 브랜치에 대한 모든 커밋은 생산 환경에 배치를 유발하며 dev 지점에 대한 모든 커밋은 스테이징 환경에 배치를 트리거합니다.

비행기로 배포하는 문제가 발생하면 위의 모든 단계를 따르고있는 경우 배포 (앱 이름 포함)에 대한 많은 세부 정보를 Fly Support 커뮤니티에 게시하십시오. 그들은 일반적으로 저기에 반응이 좋으며 배포 문제와 질문을 해결하는 데 도움이되기를 바랍니다.

다중 지역 배포

단일 지역에서 사이트와 데이터베이스가 실행되면 Fly의 스케일링 및 다중 지역 PostgreSQL 문서를 따라 더 많은 지역을 추가 할 수 있습니다.

앱의 PRIMARY_REGION 환경 변수를 설정하도록하십시오. fly.toml 에서 [env] config를 사용하여 앱과 데이터베이스의 기본 영역으로 사용하려는 영역으로 설정할 수 있습니다.

다른 지역에서 앱을 테스트합니다

모드 헤더 브라우저 확장 (또는 유사한 것)을 설치하고 테스트하려는 지역 이름으로 설정된 헤더 fly-prefer-region 으로 앱을로드하는 데 사용하십시오.

귀하의 요청이 처리 한 지역을 알기 위해 응답에 대한 x-fly-region 헤더를 확인할 수 있습니다.

Github 동작

지속적인 통합 및 배포를 위해 GitHub 동작을 사용합니다. main 브랜치에 들어가는 것은 테스트/빌드/등을 실행 한 후 생산에 배치됩니다. dev 지점의 모든 것이 준비에 배치됩니다.

Docker 이미지를 수동으로 빌드하여 fly.io로 배포하십시오

• Docker 네트워크를 만듭니다

   docker network create app_network
  

• Docker 이미지를 작성하십시오

  pnpm docker:build:remix-app

• Docker 이미지를 실행하십시오

  pnpm docker:run:remix-app

• (옵션) fly.io에 수동으로 배포하려면 :

  DOCKER_DEFAULT_PLATFORM=linux/amd64 flyctl deploy --config ./apps/remix-app/fly.toml --dockerfile ./apps/remix-app/Dockerfile

유용한 터보 포포 링크

Turborepo의 힘에 대해 자세히 알아보십시오.

• 파이프 라인
• 캐싱
• 원격 캐싱 (베타)
• 범위의 작업
• 구성 옵션
• CLI 사용

감사해요

• ESM 설정은 @kentcdodds의 서사시 스택에서 큰 영감을 받았습니다.
• 놀라운 구성 요소 라이브러리에 대한 @shadcn에게 감사드립니다.
• UI 통합 및 일부 모범 사례는 @Juliusmarminge Project ACME-CORP Monorepo에서 뻔뻔스럽게 빌려 왔습니다.

지원하다

템플릿이 유용하다고 생각되면 별을주는 것을 고려하십시오. 감사해요!

부인 성명

나는 Monorepo, Docker 또는 CI의 전문가가 아닙니다. 여기에 제안 된 설정은 많은 것 중 하나이며 아마도 10 배 향상 될 수 있지만, 그 과정에서 직접 배우고 있으므로 가능한 개선이 보이면 PR을 제출하십시오. 나는 그것을 크게 감사하겠습니다!