t3 turbo and clerk
v1.1.0
이 템플릿이 작동하려면 Oauth 제공 업체로 불화를 활성화해야합니다. 서기 대시 보드에서 User & Authentication / Social Providers 에서 소셜 옵션을 찾을 수 있습니다.
Discord 추가 외에 설정을 변경하면 변경 사항을 처리하려면 엑스포 코드를 업데이트해야 할 수도 있습니다.
Turborepo를 사용하고 다음을 포함합니다.
.github
└─ workflows
└─ CI with pnpm cache setup
.vscode
└─ Recommended extensions and settings for VSCode users
apps
├─ expo
└─ next.js
├─ Next.js 13
├─ React 18
└─ E2E Typesafe API Server & Client
packages
├─ api
| └─ tRPC v10 router definition
└─ db
└─ typesafe db-calls using Prisma
실행하려면 아래 단계를 따르십시오.
# Install dependencies
pnpm i
# Configure environment variables.
# There is an `.env.example` in the root directory you can use for reference
cp .env.example .env
# Push the Prisma schema to your database
pnpm db-push Expo는 게시 가능한 키에 .env를 사용하지 않으므로 apps/expo/app.config.ts 로 이동하여 추가해야합니다.
const CLERK_PUBLISHABLE_KEY = "your-clerk-publishable-key";
dev -script를 구성하십시오참고 : Expo Go와 함께 실제 전화를 사용하려면
pnpm dev실행하고 QR 코드를 스캔하십시오.
apps/expo/package.json 엽니 dev . + "dev": "expo start --ios",pnpm dev 실행하십시오. apps/expo/package.json 에서 dev 스크립트를 변경하여 Android 에뮬레이터를 엽니 다. + "dev": "expo start --android",pnpm dev 실행하십시오. 참고 로컬로 빌드하는 경우
pnpm with-env next build사용하여 ENV를 올바르게 삽입해야합니다.
데이터가 지속되지 않으므로 서버리스 환경에서 SQLITE 데이터베이스를 배포하는 것이 좋습니다. 철도에서 빠른 PostgreSQL 데이터베이스를 프로비저닝했지만 물론 다른 데이터베이스 제공 업체를 사용할 수 있습니다. 올바른 데이터베이스를 사용하도록 Prisma 스키마가 업데이트되었는지 확인하십시오.
다음.js 응용 프로그램을 Vercel에 배포합시다. Turborepo 앱을 배포 한 적이 있다면 단계는 매우 간단합니다. Vercel에 배포에 대한 공식 Turborepo 가이드를 읽을 수도 있습니다.
apps/nextjs 폴더를 루트 디렉토리로 선택하고 다음 빌드 설정을 적용하십시오. 
설치 명령은 엑스포 패키지를 필터링하고 종속성 설치의 몇 초 (및 캐시 크기)를 저장합니다. 빌드 명령을 사용하면 터보를 사용하여 응용 프로그램을 구축하게합니다.
DATABASE_URL , NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY 및 CLERK_SECRET_KEY 환경 변수를 추가하십시오.
완료! 앱이 성공적으로 배포해야합니다. 엑스포 앱의 url 에 대한 localhost 대신 도메인을 지정하고 개발 중이 아닌 경우 엑스포 앱이 백엔드와 통신 할 수 있도록 사용하십시오.
엑스포 응용 프로그램을 배포하는 것은 웹의 Next.js와 비교하여 약간 다르게 작동합니다. 온라인 앱을 "배포"하는 대신 Apple App Store 및 Google Play와 같은 앱 스토어에 앱의 제작 빌드를 제출해야합니다. 엑스포 문서에서 모범 사례를 포함한 전체 배포 앱을 읽을 수 있습니다.
엑스포 애플리케이션 서비스가 부족한 EA Build를 설정하여 시작하겠습니다. 빌드 서비스는 전체 기본 개발 설정없이 앱 빌드를 작성하는 데 도움이됩니다. 아래 명령은 첫 번째 빌드를 작성하는 요약입니다.
// Install the EAS CLI
$ pnpm add -g eas-cli
// Log in with your Expo account
$ eas login
// Configure your Expo app
$ cd apps/expo
$ eas build:configure초기 설정 후 첫 번째 빌드를 만들 수 있습니다. Android 및 iOS 플랫폼을 위해 빌드하고 다른 Eas.json 빌드 프로파일을 사용하여 프로덕션 빌드 또는 개발 또는 테스트 빌드를 만들 수 있습니다. iOS를위한 생산 빌드를 만들어 봅시다.
$ eas build --platform ios --profile production
--profile플래그를 지정하지 않으면 Eas는 기본적으로production프로파일을 사용합니다.
첫 번째 프로덕션 빌드가 있으므로이를 상점에 제출할 수 있습니다. EAS 제출은 건물을 매장으로 보내는 데 도움이 될 수 있습니다.
$ eas submit --platform ios --latest
eas build ... --auto-submit사용하여 빌드 및 제출을 단일 명령으로 결합 할 수도 있습니다.
사용자가 앱을 가져 오기 전에 앱 스토어에 추가 정보를 제공해야합니다. 여기에는 스크린 샷, 앱 정보, 개인 정보 보호 정책 등이 포함됩니다. 여전히 미리보기에도 EAS 메타 데이터는 대부분 의이 정보를 도울 수 있습니다.
Google, Apple, Facebook 등과 같은 Clerk와 함께 Oauth 소셜 제공 업체를 사용하는 경우 서기 대시 보드에서 엑스포 응용 프로그램을 위해 Oauth 리디렉션 URL을 화이트리스트로 만들어야합니다.
apps/expo/app.config.ts 에서 독립형 앱을 식별하는 데 사용될 scheme 추가하십시오.
import { ExpoConfig , ConfigContext } from "@expo/config" ;
const CLERK_PUBLISHABLE_KEY = "your-clerk-publishable-key" ;
const defineConfig = ( _ctx : ConfigContext ) : ExpoConfig => ( {
name : "expo" ,
slug : "expo" ,
scheme : "your-app-scheme" ,
// ...
} ) ;그런 다음 서기 대시 보드에서 사용자 및 인증> 소셜 연결> 설정 으로 이동하여 앱의 체계를 추가하고 URL을 리디렉션 URL 필드로 리디렉션하십시오.
your-app-scheme://oauth-native-callback 여기에서 your-app-scheme app.config.ts 에 정의 된 scheme 에 해당하며 oauth-native-callback 소셜 제공자와 인증 할 때 정의 된 리디렉션 URL에 해당합니다. 참조는 SignInwithoauth.tsx를 참조하십시오.
이에 대한 자세한 내용은 박람회 문서에서 찾을 수 있습니다.
이제 TestFlight Application Build에서 소셜 제공 업체에 로그인 할 수 있어야합니다.
모든 것이 승인되면 사용자는 마침내 앱을 즐길 수 있습니다. 작은 오타를 발견했다고 가정 해 봅시다. 새 빌드를 만들고 매장에 제출 한 다음이 문제를 해결하기 전에 승인을 기다려야합니다. 이 경우 EAS 업데이트를 사용 하여이 긴 프로세스를 거치지 않고 사용자에게 작은 버그 수정을 빠르게 보낼 수 있습니다. EAS 업데이트를 설정하여 시작하겠습니다.
아래 단계는 EAS 업데이트 가이드로 시작하는 것을 요약합니다.
// Add the ` expo-updates ` library to your Expo app
$ cd apps/expo
$ pnpm expo install expo-updates
// Configure EAS Update
$ eas update:configure앱에 업데이트를 보내기 전에 새 빌드를 만들어 앱 스토어에 제출해야합니다. 기본 API가 포함 된 모든 변경에 대해 앱을 재건하고 앱 스토어에 업데이트를 제출해야합니다. 2 단계와 3 단계를 참조하십시오.
모든 것이 업데이트 될 준비가되었으므로 production 빌드에 대한 새로운 업데이트를 만들어 봅시다. --auto 플래그를 사용하여 EAS 업데이트는 현재 GIT 브랜치 이름을 사용 하고이 업데이트에 커밋 메시지를 사용합니다. 자세한 내용은 EAS 업데이트가 어떻게 작동하는지 확인하십시오.
$ cd apps/expo
$ eas update --auto귀하의 OTA (공중에서) 업데이트는 항상 App Store의 규칙을 따라야합니다. App Store 승인을받지 않으면 앱의 기본 기능을 변경할 수 없습니다. 그러나 이것은 사소한 변경 및 버그 수정을 위해 앱을 업데이트하는 빠른 방법입니다.
완료! 이제 생산 빌드를 만들고 매장에 제출하고 EAS 업데이트를 설치 했으므로 모든 것이 준비됩니다!
스택은 Create-T3-Turbo에서 유래합니다.
