Remix Grunge Stack

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

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

Stack 中包含的内容

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

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

快速开始

点击此按钮创建一个使用项目设置的 Gitpod 工作区

开发

• 首先运行此 stack 的 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 Stack 带有两个 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 脚本，您可以运行该脚本来格式化项目中的所有文件。