概述

本指南提供了关于使用 Loco 构建一个包含 REST API 和 React 前端应用的 Todo list 应用的全面演练。概述的步骤涵盖了从项目创建到部署的所有内容。

在此处探索示例仓库 here

关键步骤包括：

• 使用 SaaS starter 创建 Loco 项目
• 使用 React 设置 Vite 前端
• 配置 Loco 以提供前端静态资源
• 在 REST API 中实现 Notes 模型/控制器
• 在开发过程中重新加载服务器和前端
• 将网站部署到生产环境

选择 SaaS Starter

首先，运行以下命令以使用 SaaS starter 创建一个新的 Loco 应用：

& loco new
✔ ❯ App name? · todolist
✔ ❯ What would you like to build? · SaaS app (with DB and user auth)

🚂 Loco app generated successfully in:
/tmp/todolist

按照提示指定应用名称（例如，todolist）并选择 SaaS app 选项。

生成应用后，通过运行以下命令确保您拥有必要的资源：

$ cd todolist
$ cargo loco doctor
✅ SeaORM CLI is installed
✅ DB connection: success
✅ Redis connection: success

验证 SeaORM CLI 已安装，并且数据库和 Redis 连接成功。如果任何资源检查失败，请参阅 快速入门指南 进行故障排除。

一旦 cargo loco doctor 显示所有检查通过，启动服务器：

$ cargo loco start
   Updating crates.io index
   .
   .
   .

                      ▄     ▀
                                 ▀  ▄
                  ▄       ▀     ▄  ▄ ▄▀
                                    ▄ ▀▄▄
                        ▄     ▀    ▀  ▀▄▀█▄
                                          ▀█▄
▄▄▄▄▄▄▄  ▄▄▄▄▄▄▄▄▄   ▄▄▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄▄▄ ▀▀█
 ██████  █████   ███ █████   ███ █████   ███ ▀█
 ██████  █████   ███ █████   ▀▀▀ █████   ███ ▄█▄
 ██████  █████   ███ █████       █████   ███ ████▄
 ██████  █████   ███ █████   ▄▄▄ █████   ███ █████
 ██████  █████   ███  ████   ███ █████   ███ ████▀
   ▀▀▀██▄ ▀▀▀▀▀▀▀▀▀▀  ▀▀▀▀▀▀▀▀▀▀  ▀▀▀▀▀▀▀▀▀▀ ██▀
       ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
                https://loco.rs

environment: development
   database: automigrate
     logger: debug
      modes: server

listening on port 5150

创建前端

对于前端，我们将使用 Vite 和 React。在 todolist 文件夹中，运行：

$ npm create vite@latest
Need to install the following packages:
  create-vite@5.1.0
Ok to proceed? (y) y
✔ Project name: … frontend
✔ Select a framework: › React
✔ Select a variant: › JavaScript

按照提示设置 frontend 作为项目名称。

导航到 frontend 文件夹并安装依赖项：

$ cd todolist/frontend
$ pnpm install

启动开发服务器：

$ pnpm dev

在 Loco 中提供静态资源

首先，将我们所有的 rest api 端点移动到 /api 前缀下。为此，请转到 src/app.rs。在 routes 钩子函数中，将 .prefix("/api") 添加到默认路由。

fn routes() -> AppRoutes {
    AppRoutes::with_default_routes()
        .prefix("/api")
        .add_route(controllers::notes::routes())
}

为生产环境构建前端：

pnpm build

在 frontend 文件夹中，将创建一个 dist 目录。更新主文件夹中的 config/development.yaml 文件，以包含静态中间件：

server:
  middlewares:
    static:
      enable: true
      must_exist: true
      folder:
        uri: "/"
        path: "frontend/dist"
      fallback: "frontend/dist/index.html"

现在，再次运行 Loco 服务器，您应该能看到前端应用通过 Loco 提供服务

$ cargo loco start

开发 UI

安装 react-router-dom、react-query 和 axios

$ pnpm install react-router-dom react-query axios

1. 复制 main.jsx 到 frontend/src/main.jsx。
2. 复制 App.jsx 到 frontend/src/App.jsx。
3. 复制 App.css 到 frontend/src/App.css。

现在，运行服务器 cargo loco start 和前端文件夹中的 UI pnpm dev，开始添加您的 todo list 吧！

改进开发体验

使用 cargo-watch 进行服务器热重载：

$ cargo watch --ignore "frontend" -x check -s 'cargo run start'

现在，您在 Rust 代码中所做的任何更改都将自动重新加载服务器，而您在前端 Vite 中所做的任何更改都将重新加载前端应用。

部署到生产环境

在 frontend 文件夹中，运行 pnpm build。成功构建后，转到 Loco 服务器并运行 cargo loco start。Loco 将直接从服务器提供前端静态文件。

准备 Docker 镜像

运行 cargo loco generate deployment 并选择 Docker 作为部署类型：

$ cargo loco generate deployment
✔ ❯ Choose your deployment · Docker
added: "dockerfile"
added: ".dockerignore"

Loco 将添加一个 Dockerfile 和一个 .dockerignore 文件。请注意，Loco 会检测到静态资源，并将它们包含在镜像中作为一部分

构建容器：

$ docker build . -t loco-todo-list

现在运行容器：

$ docker run -e LOCO_ENV=production -p 5150:5150 loco-todo-list start