ホーム>プログラミング関連>AI ソースコード
ダウンロード

Clerk Authenticationを使用してT3 Turboを作成します

店員のダッシュボードのセットアップ

このテンプレートが機能するには、OAuthプロバイダーとしてDiscordを有効にする必要があります。 Clerk DashboardでUser & Authentication / Social Providersの下にソーシャルオプションを見つけることができます

Discordを追加する以外でここに設定を変更する場合は、変更する要件を処理するためにExpoコードを更新する必要がある場合があります。

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アプリを構成します

Expoは公開可能なキーに.envを使用していないため、 apps/expo/app.config.tsにアクセスしてそこに追加する必要があります。 

 const CLERK_PUBLISHABLE_KEY = "your-clerk-publishable-key";

expo dev -scriptを構成します

注： Expo Goで物理的な電話を使用する場合は、 pnpm devを実行してQRコードをスキャンしてください。

iOSシミュレーターを使用します

  1. Expo Docsに示されているように、XcodeおよびXcommandラインツールがインストールされていることを確認してください。
  2. iOSシミュレーターを開くには、 apps/expo/package.jsonでdevスクリプトを変更します。 
 +  "dev": "expo start --ios",
  1. Project Rootフォルダーでpnpm devを実行します。

Android用

  1. Expo Docsに示されているAndroid Studioツールをインストールします。
  2. apps/expo/package.jsonでdevスクリプトを変更して、Androidエミュレーターを開きます。 
 +  "dev": "expo start --android",
  1. Project Rootフォルダーでpnpm devを実行します。

展開

next.js

注Localllyを構築している場合は、ENVを正しく挿入する必要があります。たとえばpnpm with-env next build使用する

前提条件

データが持続しないため、サーバーレス環境にSQLiteデータベースを展開することはお勧めしません。鉄道で簡単なPostgreSQLデータベースをプロビジョニングしましたが、もちろん他のデータベースプロバイダーを使用できます。 PRISMAスキーマが更新され、正しいデータベースが使用されるようにしてください。

Vercelに展開します

next.jsアプリケーションをvercelに展開しましょう。 Turborepoアプリを展開したことがある場合は、手順は非常に簡単です。また、Vercelへの展開に関する公式のTurborepoガイドを読むこともできます。

  1. Vercelで新しいプロジェクトを作成し、Root Directoryとしてapps/nextjsフォルダーを選択し、次のビルド設定を適用します。

Vercel Deployment Settings

インストールコマンドはExpoパッケージをフィルターし、依存関係のインストールの数秒（およびキャッシュサイズ）を保存します。ビルドコマンドにより、ターボを使用してアプリケーションをビルドします。

  1. DATABASE_URL 、 NEXT_PUBLIC_CLERK_PUBLISHABLE_KEYおよびCLERK_SECRET_KEY環境変数を追加します。

  2. 終わり！アプリは正常に展開する必要があります。ドメインを割り当てて、Expoアプリのurlにlocalhost代わりに使用して、Expoアプリが開発中にバックエンドと通信できるようにします。

エキスポ

Expoアプリケーションの展開は、Web上のnext.jsと比較して、わずかに異なって機能します。アプリをオンラインで「展開」する代わりに、Apple App StoreやGoogle Playなど、アプリの生産ビルドをアプリストアに提出する必要があります。エキスポドキュメントで、ベストプラクティスを含むアプリの完全な配布を読むことができます。

  1. EXPOアプリケーションサービスの略であるEASビルドをセットアップすることから始めましょう。ビルドサービスは、完全なネイティブ開発セットアップを必要とせずに、アプリのビルドを作成するのに役立ちます。以下のコマンドは、最初のビルドを作成する概要です。 

    // 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

  2. 最初のセットアップ後、最初のビルドを作成できます。 AndroidプラットフォームとiOSプラットフォーム用に構築し、異なるEAS.JSONビルドプロファイルを使用して、生産ビルドまたは開発、またはテストビルドを作成できます。 iOS向けの制作ビルドを作りましょう。 

     $ eas build --platform ios --profile production

    --profileフラグを指定しない場合、EASはデフォルトでproductionプロファイルを使用します。

  3. 最初の生産ビルドがあるので、これを店に提出できます。 EAS送信は、ビルドを店に送るのに役立ちます。 

     $ eas submit --platform ios --latest

    また、ビルドを組み合わせて、 eas build ... --auto-submitを使用して単一のコマンドで送信することもできます。

  4. アプリをユーザーの手に入れる前に、アプリストアに追加情報を提供する必要があります。これには、スクリーンショット、アプリ情報、プライバシーポリシーなどが含まれます。プレビュー中に、EASメタデータはこの情報のほとんどを支援します。

  5. たとえば、Google、Apple、Facebookなどなど、OAUTHソーシャルプロバイダーをClerkで使用している場合は、Clerk DashboardのExpoアプリケーションのために独自の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をリダイレクトURLSフィールドにリダイレクトします。 

    your-app-scheme://oauth-native-callback

    ここでは、 your-app-scheme app.config.tsで定義されているschemeに対応し、 oauth-native-callbackソーシャルプロバイダーで認証するときに定義されたリダイレクトURLに対応します。参照については、signinwithoauth.tsxを参照してください。

    これについての詳細については、Expoドキュメントをご覧ください。

    これで、TestFlightアプリケーションビルドでソーシャルプロバイダーにサインインできるようになりました。

  6. すべてが承認されると、ユーザーは最終的にアプリを楽しむことができます。小さなタイプミスを見つけたとしましょう。この問題を解決する前に、新しいビルドを作成し、店に提出し、承認を待つ必要があります。これらの場合、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

  7. アプリに更新を送信する前に、新しいビルドを作成してアプリストアに送信する必要があります。ネイティブAPIを含むすべての変更については、アプリを再構築し、アップデートをアプリストアに送信する必要があります。手順2と3を参照してください。

  8. すべてが更新の準備ができたので、 productionビルドの新しいアップデートを作成しましょう。 --auto Flagを使用すると、EASアップデートは現在のgitブランチ名を使用し、この更新にメッセージをコミットします。詳細については、EASアップデートの仕組みをご覧ください。 

    $ cd apps/expo
$ eas update --auto

    OTA（Arver the Air）の更新は、常にApp Storeのルールに従う必要があります。 App Storeの承認を得なければ、アプリの主要な機能を変更することはできません。しかし、これは、マイナーな変更とバグ修正のためにアプリを更新するための迅速な方法です。

  9. 終わり！生産ビルドを作成し、店舗に提出し、EASアップデートをインストールしたので、何でも準備ができています！

参照

スタックは、Create-T3-Turboに由来します。

拡大する
追加情報
関連アプリ
おすすめ
関連情報 すべて