Remix TypeScript Monorepo Turborepo Pipelines、Prisma、PostgreSQLまたはSQLite(LiteFS)、Docker Deploy to Fly.io、PNPM、Shadcn/UI Tailwindcss。
pnpm create remix@latest --init-script --install --template https://github.com/PhilDL/remix-gospel-stack?このリポジトリは意見を述べられています:
- タイプスクリプトのみ。
- PNPMパッケージマネージャーとのみ互換性があり、Monorepoワークスペースを処理します。
- Turborepo Pipelines + Cacheを使用して、モノレポを構築、リント、TypeCheck、テストします。
git clone [email protected]:PhilDL/remix-gospel-stack.git
cd remix-gospel-stack
pnpm add -w @remix-run/dev
pnpm remix initこのスタックは、ターボレポとPNPMワークスペースを搭載したリミックス志向のモノレポです。 Dockerコンテナの建設を介して、fly.ioに既製のリミックスアプリを含む。
このパッケージは、 pnpm選択したパッケージマネージャーとして使用して、ワークスペースを管理します。 Package.jsonファイルにワークスペースの定義を配置すると、 yarnおよびnpmで動作する場合がありますが、保証はありません。
アプリケーションを含むappsフォルダー
remix-app :ESMのRemix.Runアプリ。remix-vercel :Remix.runアプリ、Vercelに展開する準備ができています。nextjs-app :next.jsアプリ例を含むpackagesフォルダー
ui :shadcn/uiを搭載したReact UIパッケージの例。いくつかの例コンポーネントとShadCN/UI Tailwind構成は、Tailwindプラグインおよびプリセットとしてエクスポートされます。database :他のパッケージまたはアプリで使用する準備ができているPrismaラッパー。 TSUPにバンドルされています。 PostgreSqlまたはsqlite // litefsインストール中に選択したものを依存することができます。business :Prisma database依存関係として使用し、例のようなリポジトリパターンを使用した例パッケージ。internal-nobuild :ビルドステップのない純粋なタイプスクリプトである例パッケージ。パッケージのmainエントリポイントは、直接src/index.tsです。 Remixは、独自のビルドステップ(EsBuildを使用)でコンパイルすることができます。このパッケージには、Vitestのユニットテストも含まれています。 Remixはtsconfig.jsonパスを使用して、そのプロジェクトとそのタイプを参照しています。パッケージの公開を計画しない場合は、これらのタイプの内部パッケージをお勧めします。 config-packages :
future : {
unstable_optimizeDeps : true ,
v3_fetcherPersist : true ,
v3_lazyRouteDiscovery : true ,
v3_relativeSplatPath : true ,
v3_throwAbortReason : true ,
v3_singleFetch : true ,
v3_routeConfig : true ,
} ,警告以下のすべてのコマンドは、モノレポルートディレクトリから起動する必要があります
依存関係をインストールします。
pnpm installまた、例をコピーする必要があります。Env.example:
cp .env.example .env
cp .env.example .env.dockerPostgreSql Dockerコンテナを起動します
pnpm run docker:db注: NPMスクリプトは、Dockerがバックグラウンドでコンテナをセットアップする間に完了します。 Dockerが終了し、進行する前にコンテナが実行されていることを確認してください。
Prismaスキーマを生成します
pnpm run generatePrismaの移行をデータベースに実行します
pnpm run db:migrate:deploy最初のビルドを実行します( ...オプションを介して依存関係を使用)
pnpm run build --filter=@remix-gospel-stack/remix-app... Simply pnpm run build実行すると、NextJSアプリを含むすべてが構築されます。
Remix Devサーバーを実行します
pnpm run dev --filter=@remix-gospel-stack/remix-appPostgreSQLとSQLite(LiteFS)を切り替えるには、リポジトリのルートから使用できるターボジェネレーターがあります。
pnpm turbo gen scaffold-database次に、プロンプトに従います。ただし、Prismaの移行は特定のデータベースにリンクされているため、 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ファイルを確認して、利用可能なパイプラインを確認してください。
pnpm run test:e2e:dev --filter=@remix-gospel-stack/remix-apppnpm run lintpnpm run typecheckpnpm run test
or
pnpm run test:devpnpm add dayjs --filter @remix-gospel-stack/remix-appconfig-packageフォルダーでTSCONFIGS、ESLINT構成を微調整します。その後、任意のパッケージまたはアプリはこれらの構成から拡張されます。 警告以下のすべてのコマンドは、モノレポルートディレクトリから起動する必要があります
最初の展開の前に、いくつかのことをする必要があります。
最初のシングアップThe Fly Cli
fly auth signupフライに2つのアプリを作成します。1つはステージング用、もう1つは生産用です。
fly apps create remix-gospel-stack
fly apps create remix-gospel-stack-staging注:アプリを正常に作成したら、
fly.tomlファイルを再確認して、appキーが作成したプロダクションアプリの名前であることを確認します。このスタックは、Flyで作成したアプリと一致しない場合があるINITで一意のサフィックスを自動的に追加します。この不一致がある場合、GitHubアクションに404のエラーが表示される可能性があります。
Gitを初期化します。
git init新しいgithubリポジトリを作成し、プロジェクトのリモコンとして追加します。まだアプリをプッシュしないでください!
git remote add origin < ORIGIN_URL > githubリポジトリにFLY_API_TOKENを追加します。これを行うには、Flyのユーザー設定に移動して新しいトークンを作成し、 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秘密をあなたのために設定するのに役立ちます。
警告以下のすべてのコマンドは、モノレポルートディレクトリから起動する必要があります
最初の展開の前に、いくつかのことをする必要があります。
最初のシングアップThe Fly Cli
fly auth signupフライに2つのアプリを作成します。1つはステージング用、もう1つは生産用です。
fly apps create remix-gospel-stack
fly apps create remix-gospel-stack-staging注:アプリを正常に作成したら、
fly.tomlファイルを再確認して、appキーが作成したプロダクションアプリの名前であることを確認します。このスタックは、Flyで作成したアプリと一致しない場合があるINITで一意のサフィックスを自動的に追加します。この不一致がある場合、GitHubアクションに404のエラーが表示される可能性があります。
Gitを初期化します。
git init新しいgithubリポジトリを作成し、プロジェクトのリモコンとして追加します。まだアプリをプッシュしないでください!
git remote add origin < ORIGIN_URL > githubリポジトリにFLY_API_TOKENを追加します。これを行うには、Flyのユーザー設定に移動して新しいトークンを作成し、 FLY_API_TOKENという名前でレポの秘密に追加します。
ステージング環境と実稼働環境の両方で、SQLiteデータベースの永続的なボリュームを作成します。以下を実行します(お客様のニーズと選択した地域(https://fly.io/docs/reference/regions/)に基づいてGBサイズを自由に変更してください。リージョンを変更する場合は、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のスケーリングおよびマルチリージョンPostgreSQLドキュメントをフォローして、より多くの領域を追加できます。
アプリのPRIMARY_REGION環境変数を設定するようにしてください。 [env] config in the fly.tomlを使用して、アプリとデータベースの両方の主要な領域として使用する領域に設定できます。
Modheader Browser拡張機能(または同様のもの)をインストールし、テストしたい地域名にヘッダーfly-prefer-regionセットを使用してアプリをロードします。
x-fly-regionヘッダーを応答で確認して、リクエストが処理された領域を知ることができます。
継続的な統合と展開には、GitHubアクションを使用します。 mainブランチに入るものはすべて、テスト/ビルドなどを実行した後、生産に展開されます。 devブランチ内のすべてがステージングに展開されます。
docker network create app_network
pnpm docker:build:remix-apppnpm docker:run:remix-appDOCKER_DEFAULT_PLATFORM=linux/amd64 flyctl deploy --config ./apps/remix-app/fly.toml --dockerfile ./apps/remix-app/DockerfileTurborepoの力について詳しく知る:
テンプレートが便利だと思った場合は、星を与えることを検討してください。ありがとうございます!
私は決してMonorepo、Docker、またはCIの専門家ではありません。ここで提案されているセットアップは多くの1つであり、おそらく10倍改善できますが、私は途中で自分で学んでいるので、改善の可能性があると思われる場合はPRを提出してください。私はそれを大いに感謝します!