用于部署到 Fly 的 Remix Stack，包含 PostgreSQL、身份验证、测试、代码检查、格式化等功能。

npx create-remix@latest template remix-run/blues-stack

Remix Blues Stack

The Remix Blues Stack

了解更多关于 Remix Stacks 的信息。

npx create-remix@latest --template remix-run/blues-stack

此 Stack 中包含什么

使用 Docker 进行多区域 Fly 应用部署
多区域 Fly PostgreSQL 集群
用于 Fly 备份区域回退的健康检查端点
使用 GitHub Actions 在合并到生产环境和暂存环境时进行部署
使用基于 cookie 的会话进行邮箱/密码身份验证
使用 Prisma 进行数据库 ORM 操作
使用 Tailwind 进行样式设计
使用 Cypress 进行端到端测试
使用 MSW 进行本地第三方请求模拟
使用 Vitest 和 Testing Library 进行单元测试
使用 Prettier 进行代码格式化
使用 ESLint 进行代码检查
使用 TypeScript 进行静态类型检查

不喜欢 Stack 中的某些部分？ Fork 它，修改它，并使用 npx create-remix --template your/repo！打造你自己的 Stack。

快速开始

点击此按钮创建一个 Gitpod 工作区，其中已设置好项目、启动了 Postgres 并预装了 Fly

开发

首先运行此 Stack 的 remix.init 脚本，并将它对你的项目所做的更改提交。

npx remix init
git init # if you haven't already
git add .
git commit -m "Initialize project"

在 Docker 中启动 Postgres 数据库
```
npm run docker
```
注意：npm 脚本将在 Docker 在后台设置容器时完成。请确保 Docker 已完成并且你的容器正在运行，然后再继续。
初始设置
```
npm run setup
```
运行首次构建
```
npm run build
```
启动开发服务器
```
npm run dev
```

这将在开发模式下启动你的应用，并在文件更改时重建资源。

数据库种子脚本会创建一个新用户，其中包含一些可用于入门的数据

邮箱：rachel@remix.run
密码：racheliscool

如果你不想使用 Docker，你还可以使用 Fly 的 Wireguard VPN 连接到开发数据库（甚至是你的生产数据库）。你可以在此处找到设置 Wireguard 的说明，在此处找到创建开发数据库的说明。

部署

此 Remix Stack 带有两个 GitHub Actions，它们会自动处理将你的应用部署到生产环境和暂存环境。

在首次部署之前，你需要执行以下操作

安装 Fly
注册并登录 Fly
```
fly auth signup
```
注意：如果你有多个 Fly 帐户，请确保你在 Fly CLI 中登录的帐户与你在浏览器中登录的帐户相同。在你的终端中，运行 fly auth whoami 并确保邮箱与在浏览器中登录的 Fly 帐户匹配。
在 Fly 上创建两个应用，一个用于暂存，一个用于生产
```
fly apps create blues-stack-template
fly apps create blues-stack-template-staging
```
注意：成功创建应用后，请仔细检查 fly.toml 文件，确保 app 键是你创建的生产应用的名称。此 Stack 在初始化时会自动附加唯一的后缀，这可能与你在 Fly 上创建的应用不匹配。如果出现此不匹配，你可能会在 Github Actions CI 日志中看到 404 错误。
初始化 Git。
```
git init
```
创建一个新的 GitHub 存储库，然后将其添加为你的项目的远程存储库。请勿立即推送你的应用！
```
git remote add origin <ORIGIN_URL>
```
将 FLY_API_TOKEN 添加到你的 GitHub 存储库。为此，请转到你在 Fly 上的用户设置并创建一个新的令牌，然后将其使用名称 FLY_API_TOKEN 添加到你的存储库密钥中。
将 SESSION_SECRET 添加到你的 fly 应用密钥，为此，你可以运行以下命令
```
fly secrets set SESSION_SECRET=$(openssl rand -hex 32) --app blues-stack-template
fly secrets set SESSION_SECRET=$(openssl rand -hex 32) --app blues-stack-template-staging
```
注意：在创建暂存密钥时，你可能会收到来自 Fly CLI 的类似警告
```
WARN app flag 'blues-stack-template-staging' does not match app name in config file 'blues-stack-template'
```
这仅仅表示当前目录包含引用我们在第一步中创建的生产应用的配置。忽略此警告并继续创建密钥。
如果你没有安装 openssl，你也可以使用 1password 生成随机密钥，只需将 $(openssl rand -hex 32) 替换为生成的密钥即可。

为你的暂存环境和生产环境创建一个数据库。运行以下命令

fly postgres create --name blues-stack-template-db
fly postgres attach --app blues-stack-template blues-stack-template-db

fly postgres create --name blues-stack-template-staging-db
fly postgres attach --app blues-stack-template-staging blues-stack-template-staging-db

注意：当你附加暂存数据库时，你会因相同的原因收到与上面 fly set secret 步骤中相同的警告。不用担心。继续！

Fly 将负责为你设置 DATABASE_URL 密钥。

现在一切都已设置好，你可以提交并将你的更改推送到你的存储库。每次提交到你的 main 分支都会触发部署到你的生产环境，每次提交到你的 dev 分支都会触发部署到你的暂存环境。

如果在部署到 Fly 时遇到任何问题，请确保你已按照上述所有步骤操作，如果已按照操作，则将尽可能多的关于你部署的详细信息（包括你的应用名称）发布到 Fly 支持社区。他们通常在那边响应迅速，并希望能够帮助解决你的任何部署问题和疑问。

多区域部署

一旦你的站点和数据库在一个区域中运行，你可以按照 Fly 的扩缩和多区域 PostgreSQL 文档添加更多区域。

请务必为你的应用设置 PRIMARY_REGION 环境变量。你可以在 fly.toml 中使用 [env] 配置将其设置为你希望用作你的应用和数据库的主要区域的区域。

在其他区域中测试你的应用

安装 ModHeader 浏览器扩展（或类似扩展），并使用它加载你的应用，并将标头 fly-prefer-region 设置为你想要测试的区域名称。

你可以检查响应中的 x-fly-region 标头，以了解你的请求由哪个区域处理。

GitHub Actions

我们使用 GitHub Actions 进行持续集成和部署。任何进入 main 分支的内容都将在运行测试/构建等之后部署到生产环境。dev 分支中的任何内容都将部署到暂存环境。

测试

Cypress

我们在此项目中使用 Cypress 进行端到端测试。你会在 cypress 目录中找到这些测试。在进行更改时，请在 cypress/e2e 目录中添加到现有文件或创建一个新文件以测试你的更改。

我们使用 @testing-library/cypress 以语义方式选择页面上的元素。

要在开发中运行这些测试，请运行 npm run test:e2e:dev，这将为应用以及 Cypress 客户端启动开发服务器。确保数据库如上所述在 docker 中运行。

我们有一个实用程序，用于测试身份验证功能，而无需执行登录流程

cy.login();
// you are now logged in as a new user

我们还有一个实用程序，可以在你的测试结束时自动删除用户。只需确保在每个测试文件中添加此实用程序

afterEach(() => {
  cy.cleanupUser();
});

这样，我们就可以保持你的本地数据库清洁，并使你的测试彼此隔离。

Vitest

对于实用程序和单个组件的较低级别测试，我们使用 vitest。我们通过 @testing-library/jest-dom 提供了特定于 DOM 的断言帮助程序。

类型检查

此项目使用 TypeScript。建议为你的编辑器设置 TypeScript，以获得非常棒的编辑器内类型检查和自动完成体验。要对整个项目运行类型检查，请运行 npm run typecheck。

代码检查

此项目使用 ESLint 进行代码检查。这在 .eslintrc.js 中配置。

格式化

我们在此项目中使用 Prettier 进行自动格式化。建议安装一个编辑器插件（例如 VSCode Prettier 插件）以在保存时获得自动格式化。还有一个 npm run format 脚本，你可以运行它来格式化项目中的所有文件。