Remix typescript monorepo с трубопроводами Turborepo, 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 + кэш для построения, прозрачной, типичной чек и проверки 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. Содержит приложение Remix готово к развертыванию на Fly.io через здание контейнера Docker.
Этот пакет использует pnpm в качестве менеджера пакетов, выбранного для управления рабочими пространствами. Это может работать с yarn и npm если вы поместите определения рабочей области в файл package.json, но нет никакой гарантии.
Папка apps , содержащая приложения
remix-app : приложение remix.run в ESM.remix-vercel : приложение remix.run, готовое к развертыванию на Vercel.nextjs-app : приложение Next.js packages с папками, содержащие примеры
ui : пример пакета react ui, питаемый от Shadcn/UI. Некоторые примеры компонентов и конфигурации Shadcn/UI Tailwind экспортируются как плагин и предустановку Tailwind.database : обертка Prisma, готовая к использованию в других пакетах или в приложениях. В комплекте с TSUP. Может быть PostgreSQL или SQLite // LITEFS в зависимости от того, что вы выбираете во время установки.business : пример пакета с использованием database PRISMA в качестве зависимости и использования такого примера схема репозитория .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 ,
} ,Предупреждение все следующие команды должны быть запущены из каталога Monorepo Root
Установите зависимости.
pnpm installВы также должны скопировать пример .env.Example:
cp .env.example .env
cp .env.example .env.dockerЗапустите контейнер Docker PostgreSQL
pnpm run docker:dbПРИМЕЧАНИЕ. Сценарий NPM будет завершен, пока Docker устанавливает контейнер на заднем плане. Убедитесь, что Docker закончился, и ваш контейнер работает перед продолжением.
Генерировать схему Prisma
pnpm run generateЗапустите миграцию Prisma в базу данных
pnpm run db:migrate:deploy Запустите первую сборку (с зависимостями через ...
pnpm run build --filter=@remix-gospel-stack/remix-app... Запуск простого pnpm run build будет построить все, включая приложение NextJS.
Запустите сервер remix dev
pnpm run dev --filter=@remix-gospel-stack/remix-appЧтобы переключиться между PostgreSQL и SQLite (LITEFS), есть турбогенератор, который вы можете использовать из корня хранилища.
pnpm turbo gen scaffold-database Затем следуйте подсказкам. Будьте осторожны, хотя миграции Prisma связаны с конкретной базой данных, поэтому вам придется удалить папку migrations .
Примечание. Вам придется снова запустить
pnpm i --fix-lockfileпосле перехода на SQLite (LITEFS), для которого требуется другой пакет (LiteFS-JS). Возможно, вам также придется снова запустить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 . Любой пакет или приложение затем будут проститься от этих конфигураций. Предупреждение все следующие команды должны быть запущены из каталога Monorepo Root
До первого развертывания вам нужно сделать несколько вещей:
Сначала петь Fly CLI
fly auth signupСоздайте два приложения на лету, одно для постановки и одно для производства:
fly apps create remix-gospel-stack
fly apps create remix-gospel-stack-stagingПримечание. Как только вы успешно создали приложение, дважды проверьте файл
fly.toml, чтобы убедиться, что клавишаappявляется именем созданного вами производственного приложения. Этот стек автоматически добавляет уникальный суффикс в init, который может не соответствовать созданным вами приложениям на Fly. Скорее всего, вы увидите 404 ошибки в ваших журналах CI GitHub, если у вас есть это несоответствие.
Инициализировать git.
git initСоздайте новый репозиторий GitHub, а затем добавьте его в качестве удаленного для вашего проекта. Еще не толкайте свое приложение!
git remote add origin < ORIGIN_URL > Добавьте 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 для вас.
Предупреждение все следующие команды должны быть запущены из каталога Monorepo Root
До первого развертывания вам нужно сделать несколько вещей:
Сначала петь Fly CLI
fly auth signupСоздайте два приложения на лету, одно для постановки и одно для производства:
fly apps create remix-gospel-stack
fly apps create remix-gospel-stack-stagingПримечание. Как только вы успешно создали приложение, дважды проверьте файл
fly.toml, чтобы убедиться, что клавишаappявляется именем созданного вами производственного приложения. Этот стек автоматически добавляет уникальный суффикс в init, который может не соответствовать созданным вами приложениям на Fly. Скорее всего, вы увидите 404 ошибки в ваших журналах CI GitHub, если у вас есть это несоответствие.
Инициализировать git.
git initСоздайте новый репозиторий GitHub, а затем добавьте его в качестве удаленного для вашего проекта. Еще не толкайте свое приложение!
git remote add origin < ORIGIN_URL > Добавьте FLY_API_TOKEN в свой репо. Чтобы сделать это, перейдите к настройкам пользователя на Fly и создайте новый токен, затем добавьте его в свои секреты репо с именем FLY_API_TOKEN .
Создайте постоянный объем для базы данных SQLite как для вашей постановки, так и для производственных сред. Запустите следующее (не стесняйтесь изменить размер GB на основе ваших потребностей и региона по вашему выбору (https://fly.io/docs/reference/regions/). Если вы измените регион, убедитесь, что вы также измените Primary_region на fly.toml)::
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. Обычно они довольно отзывчивы и, надеюсь, могут помочь решить любую из ваших вопросов развертывания и вопросов.
После того, как у вас есть сайт и база данных в одном регионе, вы можете добавить больше регионов, следуя масштабированию Fly и многорегиональному постгресскому документам.
Обязательно установите переменную среды PRIMARY_REGION для вашего приложения. Вы можете использовать [env] config в fly.toml , чтобы установить его в регион, который вы хотите использовать в качестве основного региона как для вашего приложения, так и для базы данных.
Установите расширение браузера Modheader (или что-то подобное) и используйте его для загрузки вашего приложения с помощью 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/DockerfileУзнайте больше о силе турборепо:
Если вы нашли шаблон полезным, пожалуйста, подумайте о том, чтобы дать ему звезду. Спасибо вам!
Я ни в коем случае не эксперт по монорепо, докеру или CI. Настройка, предложенная здесь, является одним из многих и, вероятно, может быть улучшена в 10 раз, но я учитесь на этом пути, поэтому, если вы увидите какое -либо возможное улучшение, пожалуйста, отправьте PR. Я буду очень признателен!