Remix Grunge 堆栈

了解更多关于 Remix 堆栈。

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

堆栈内容

• AWS 部署，使用 Architect
• 生产就绪的 DynamoDB 数据库
• GitHub Actions 用于在合并到生产和预发布环境时进行部署
• 使用 基于 Cookie 的会话 的电子邮件/密码身份验证
• 通过 arc.tables 访问 DynamoDB
• 使用 Tailwind 进行样式设计
• 使用 Cypress 进行端到端测试
• 使用 MSW 在本地模拟第三方请求
• 使用 Vitest 和 Testing Library 进行单元测试
• 使用 Prettier 格式化代码
• 使用 ESLint 进行代码风格检查
• 使用 TypeScript 进行静态类型检查

不喜欢堆栈中的某些部分？Fork 它，修改它，并使用 npx create-remix --template your/repo！把它变成你自己的。

快速入门

单击此按钮以创建包含项目设置的 Gitpod 工作区

开发

• 首先运行此堆栈的 remix.init 脚本，并将它对项目所做的更改提交到版本库。

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

• 验证应用程序是否已正确设置（可选）

  npm run validate
  

• 启动开发服务器

  npm run dev
  

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

相关代码

这是一个非常简单的笔记应用程序，但它是使用 Architect 和 Remix 构建完整堆栈应用程序的良好示例。主要功能包括创建用户、登录和注销以及创建和删除笔记。

• 创建用户，以及登录和注销 ./app/models/user.server.ts
• 用户会话，以及验证会话 ./app/session.server.ts
• 创建和删除笔记 ./app/models/note.server.ts

arc sandbox 附带的数据库是内存数据库，因此如果重新启动服务器，你将丢失数据。预发布和生产环境不会以这种方式运行，而是在部署和 Lambda 执行之间将数据持久保存到 DynamoDB 中。

部署

此 Remix 堆栈附带两个 GitHub Actions，它们处理将应用程序自动部署到生产和预发布环境。默认情况下，Arc 将部署到 us-west-2 区域，如果你希望部署到其他区域，你需要更改你的 app.arc

在你第一次部署之前，你需要做几件事

• 创建一个新的 GitHub 版本库

• 注册 并登录你的 AWS 帐户

• 将 AWS_ACCESS_KEY_ID 和 AWS_SECRET_ACCESS_KEY 添加到 你的 GitHub 版本库的秘密。转到你的 AWS 安全凭据 并点击“访问密钥”选项卡，然后点击“创建新的访问密钥”，然后你可以复制这些密钥并将其添加到你的版本库的秘密。

• 安装 AWS CLI。

• 创建 AWS 凭据文件。

• 除了你的 AWS 凭据之外，你还需要为你的 CloudFormation 提供一个 SESSION_SECRET 变量，分别用于预发布和生产环境，以及一个用于 Arc 本身的 ARC_APP_SECRET。

  npx arc env --add --env staging ARC_APP_SECRET $(openssl rand -hex 32)
  npx arc env --add --env staging SESSION_SECRET $(openssl rand -hex 32)
  npx arc env --add --env production ARC_APP_SECRET $(openssl rand -hex 32)
  npx arc env --add --env production SESSION_SECRET $(openssl rand -hex 32)
  

  如果你没有安装 openssl，你也可以使用 1password 生成一个随机密钥，只需将 $(openssl rand -hex 32) 替换为生成的密钥。

我在哪里可以找到我的 CloudFormation？

你可以在 sam.yaml 文件中找到 Architect 为你生成的 CloudFormation 模板。

要在 AWS 上找到它，你可以搜索 CloudFormation（确保你在查看正确的区域！），并找到你的堆栈的名称（名称是 app.arc 中名称的 PascalCased 版本，因此默认情况下它是 RemixGrungeStackStaging 和 RemixGrungeStackProduction），它与 app.arc 中的名称匹配，你可以在“资源”选项卡下找到所有应用程序的资源。

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

Vitest

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

类型检查

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

代码风格检查

该项目使用 ESLint 进行代码风格检查。它在 .eslintrc.js 中配置。

格式化

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