从零到部署用Rust构建Web的教程

在本次实践研讨会中，我们将指导您完成使用 Rust 作为 API、Actix-Web 作为 Web 框架、SQLx 用于数据库连接、Dioxus 用于前端以及 Shuttle 用于部署来构建全栈应用程序的过程。本研讨会假设您对 Rust 及其语法有基本的了解。

在整个研讨会中，您将学习如何使用 Actix-Web 设置 Rust 项目，实现电影的 CRUD 操作，使用 SQLx 与 PostgreSQL 建立数据库连接，使用 Dioxus 设计响应式前端，以及使用Shuttle将应用程序部署到托管环境。

在研讨会结束时，你将建立一个实用的电影收集管理器应用程序。你将了解如何用Actix-Web创建API，用SQLx处理数据库，用Dioxus设计和开发前端，以及用Shuttle部署应用。本工作坊将为你提供使用Rust构建全栈应用程序的实践经验和见解。

详细点击标题， 以下摘录：

先决条件：

• Rust 编程语言的基础知识
• 熟悉 HTML、CSS 和 JavaScript 会有所帮助，但不是必需的

步骤描述：

1. 安装Rust、Cargo和其他依赖项

2.用Actix-Web、SQLx和Shuttle构建API
  - 介绍Shuttle、Actix-Web及其功能
  - 设置和部署一个Actix-Web项目
  - 用SQLx建立数据库连接
  - 为电影列表创建API端点
  - 实现电影的CRUD操作

3.用Dioxus设计前端
  - Dioxus简介
  - 设置和安装
  - 组件
  - 状态管理
  - 事件处理
  - 构建

包存储结构：

├── api            # Rust API code
│   ├── lib        # Actix-Web API code
│   └── shuttle    # Shuttle project
├── front          # Dioxus front-end code
├── shared         # Common code shared between the API and the front-end
└── README.md      # Workshop instructions and guidance

工具：
使用Visual Studio Code作为我们的代码编辑器。
如果您也想使用Visual Studio Code，请安装以下扩展插件：

• Rust Analyzer
• CodeLLDB
• Crates
• Better TOML
• Rust Test Explorer
• REST Client

Shuttle
这是我们要用来部署后端（api和数据库）的工具和平台。
cargo install cargo-shuttle

Dioxus
Dioxus是我们要用来构建前端的框架。
请务必安装Dioxus CLI：

cargo install dioxus-cli
之后，确保Rust的wasm32-unknown-unknown目标已经安装：

rustup target add wasm32-unknown-unknown

Docker
我们还需要安装Docker，以便在开发后端时进行本地部署。

DBeaver
我们将使用DBeaver连接到数据库并运行查询。你可以自由地使用你喜欢的任何其他工具。

cargo-watch
我们还将使用cargo-watch在我们对代码进行修改时自动重新编译我们的后端。

cargo install cargo-watch

cargo-make
最后，我们来安装cargo-make：

cargo install cargo-make
我们将利用cargo-make来运行所有我们需要运行的命令，以便构建和部署我们的后端和前端。

GitHub 存储库，其中包含带有测试、模拟、内存数据库、CI/CD 等的最终代码。

创建工作区
为项目创建一个新文件夹，并通过创建包含以下内容的文件来初始化新工作区：Cargo.toml

[workspace]
members = [
    "api/lib",
    "api/shuttle",
    "shared"
]

初始化存储库
让我们为我们的项目初始化一个新的 git 存储库。
git init

创建crate
现在我们有了一个工作区，我们可以创建将成为其中一部分的crate。
对于API，我们将创建两个 crate：

• lib：包含 API 代码的库。
• shuttle：可执行shuttle 项目。

拥有两个不同的crate是完全可有可无的，但这将使我们有一个更干净的项目结构，而且如果我们决定将来不使用Shuttle，也会使我们更容易重用API库代码。

Shuttle将使我们能够在本地运行我们的API，并以最小的努力将其部署到云端，但它不是构建API的必要条件。

我们可以决定使用一个不同的可执行文件来运行我们的API，该文件将使用lib crate作为一个依赖项。例如，我们可以直接使用Actix-web来创建这样一个二进制文件，并将其作为Docker镜像发布。

创建lib crate
让我们通过运行以下命令来创建lib crate：

cargo new api/lib --name api-lib --lib --vcs none

注意，我们使用 --lib 标志来创建一个库crate。如果你忘记添加这个标志，你将不得不手动修改Cargo.toml文件，使其成为一个库crate。

在这种情况下，vsc标志是用来告诉cargo不要初始化一个新的git仓库。记住，我们在上一步已经做了这个。

创建Shuttle crate
让我们通过运行以下命令来创建shuttle  crate：

 cargo shuttle init api/shuttle -t actix-web --name api-shuttle

创建shared包crate
最后，让我们shared通过运行以下命令来创建包：
cargo new shared --lib

构建项目：
让我们构建该项目以确保一切都按预期工作。
cargo build

如您所见，一个新target文件夹已创建。该文件夹包含工作区中所有 crate 的编译代码，这就是我们看到如此多对象要提交的原因。

shuttle编码
打开api/shuttle文件夹并查找该src/main.rs文件。这是我们应用程序的入口点。

你会看到这样的东西：

use actix_web::{get, web::ServiceConfig};
use shuttle_actix_web::ShuttleActixWeb;

#[get("/")]
async fn hello_world() -> &'static str {
    "Hello World!"
}

#[shuttle_runtime::main]
async fn actix_web(
) -> ShuttleActixWeb<impl FnOnce(&mut ServiceConfig) + Send + Clone + 'static> {
    let config = move |cfg: &mut ServiceConfig| {
        cfg.service(hello_world);
    };

    Ok(config.into())
}

Shuttle为我们生成了一个简单的hello-world Actix-web应用程序。
正如您所看到的，它非常简单。
该actix_web函数是我们应用程序的入口点。它返回一个实例， ShuttleShuttleActixWeb将使用该实例来运行我们的应用程序。
在此函数中，我们将配置不同的路由。目前我们只有一条路线：/，它映射到hello_world函数。

在项目的根目录中，运行以下命令：
cargo shuttle run

访问localhost:8000
应该在屏幕上看到一条问候语！

使用 Shuttle 进行部署
到目前为止，一切都很好。我们有一个可用的 API，并且可以在本地运行它。现在，让我们将其部署到云端，看看使用 Shuttle 是多么容易做到这一点。

转到工作区的根目录并创建一个Shuttle.toml包含以下内容的文件：
name = "name_you_want"

现在我们有了一个Shuttle.toml文件，我们可以将 API 部署到云端。为此，请运行以下命令：
cargo shuttle deploy

应该会收到错误消息。
需要登录，运行 cargo shuttle login

请注意，您需要拥有GitHub帐户才能登录：
运行cargo shuttle login命令时，您将被重定向到这样的Shuttle页面，以便您可以授权Shuttle访问您的GitHub帐户。

现在我们已经登录了，我们可以将 API 部署到云端。

1、我们需要创建项目环境：
cargo shuttle project start
完成此操作后，如果您想再次部署，则无需再次执行此步骤。

2、部署请运行以下命令：
cargo shuttle deploy

您应该在终端中看到所有内容是如何在Shuttle云中部署和编译的。这可能需要一段时间。

访问：curl https://<your_project_name>.shuttleapp.rs
我们已将 API 部署到云端！

详细点击标题