32 个版本 (13 个稳定版)

4.0.1	2023 年 2 月 15 日
4.0.0	2022 年 3 月 12 日
3.0.5	2020 年 12 月 22 日
3.0.2	2020 年 11 月 21 日
0.2.6	2019 年 11 月 29 日

#22 in HTTP 服务器

4,141 每月下载量
用于 20 个 crates (7 个直接)

Unlicense OR MIT

36KB
326 行

将 actix-web 静态文件作为资源支持

将 actix-web 静态文件作为资源支持
- 法律
- 特性
- 用法
  - 用例 1：静态资源文件夹
  - 用例 2：package.json - npm 管理文件夹
  - 用例 3：package.json - WebPack 使用
  - 用例 4：yarn 包管理器
  - 用例 5：类似 Angular 的应用程序

法律

双许可下 MIT 或 UNLICENSE。

特性

将静态资源嵌入单个自包含的可执行文件
在 actix-web 中提供静态资源
使用 npm 包管理器安装依赖项
运行自定义 npm 运行命令（例如 webpack）
支持类似 npm 的包管理器（yarn）
支持类似 angular 的路由器

用法

用例 1：静态资源文件夹

在您的项目中创建包含静态资源的文件夹（例如 static）

cd project_dir
mkdir static
echo "<p>Hello, world\!</p>" > static/index.html

将相关的 actix-web-static-files 依赖项添加到 Cargo.toml

[dependencies]
actix-web = "4.0"
actix-web-static-files = "4.0"
static-files = "0.2.1"

[build-dependencies]
static-files = "0.2.1"

添加 build.rs 并调用打包资源

use static_files::resource_dir;

fn main() -> std::io::Result<()> {
    resource_dir("./static").build()
}

将生成的代码包含在 src/main.rs 中

use actix_web::{App, HttpServer};
use actix_web_static_files::ResourceFiles;

include!(concat!(env!("OUT_DIR"), "/generated.rs"));

#[actix_web::main]
async fn main() -> std::io::Result<()> {
    HttpServer::new(move || {
        let generated = generate();
        App::new().service(ResourceFiles::new("/", generated))
    })
    .bind("127.0.0.1:8080")?
    .run()
    .await
}

运行服务器

cargo run

请求资源

$ curl -v https://127.0.0.1:8080/
*   Trying ::1...
* TCP_NODELAY set
* Connection failed
* connect to ::1 port 8080 failed: Connection refused
*   Trying 127.0.0.1...
* TCP_NODELAY set
* Connected to localhost (127.0.0.1) port 8080 (#0)
> GET / HTTP/1.1
> Host: localhost:8080
> User-Agent: curl/7.64.1
>
< HTTP/1.1 200 OK
< content-length: 20
< content-type: text/html
< etag: "14:606a2226"
< date: Sun, 23 May 2021 19:46:42 GMT
<
* Connection #0 to host localhost left intact
<p>Hello, world!</p>* Closing connection 0

另请参阅

用例 2：package.json - npm 管理的文件夹

在您的项目中创建包含静态资源的文件夹（例如 static）

cd project_dir
mkdir static_packages
cd static_packages
echo '{}' > package.json
# install your npm dependencies (here we use fontawesome as an example)
npm install --save-dev @fortawesome/fontawesome-free

将生成的文件夹添加到你的版本控制系统（这里：git）的忽略文件中

cd project_dir
echo "static_packages/node_modules" >> .gitignore

在 Cargo.toml 中添加与第一个用例相同的 dependencies 和 build-dependencies

添加 build.rs 并调用打包资源

use static_files::npm_resource_dir;

fn main() -> std::io::Result<()> {
    npm_resource_dir("./static_packages")?.build()
}

以与第一个用例相同的方式将生成的代码包含在 main.rs 中

在你的 HTML 中引用资源（static/index.html）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/static/@fortawesome/fontawesome-free/css/all.css">
    <script defer src="/static/@fortawesome/fontawesome-free/js/all.js"></script>
    <title>Hi</title>
</head>
<body>
    <i class="fas fa-thumbs-up"></i>
</body>
</html>

用例 3：package.json - WebPack 使用

在你的项目中创建包含静态资源的文件夹（例如 web），安装所需的包和 webpack

cd project_dir
mkdir -p web/src
cd web
echo -e "node_modules\ndist" > .gitignore
echo '{}' > package.json


# install lodash for usage in example
npm install --save lodash

# install webpack npm dependencies
npm install webpack webpack-cli html-webpack-plugin clean-webpack-plugin --save-dev

添加 web/webpack.config.js

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'actix-web-static-files WebPack',
    }),
  ],
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist', 'bundle'),
  },
};

添加 web/src/index.js

import _ from 'lodash';

function component() {
  const element = document.createElement('div');

  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

修改 web/package.json 并添加 "scripts" 部分

{
  "dependencies": {
    "lodash": "^4.17.21"
  },
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "html-webpack-plugin": "^5.2.0",
    "webpack": "^5.24.2",
    "webpack-cli": "^4.5.0"
  },
  "scripts": {
    "build": "webpack"
  }
}

在 Cargo.toml 中添加与第一个用例相同的对 actix-web-static-files 的依赖

添加 build.rs 并调用打包资源

use static_files::NpmBuild;

fn main() -> std::io::Result<()> {
    NpmBuild::new("web")
        .install()?
        .run("build")?
        .target("web/dist/bundle")
        .change_detection()
        .to_resource_dir()
        .build()
}

将生成的代码包含在 src/main.rs 中

use actix_web::{App, HttpServer};
use actix_web_static_files;

include!(concat!(env!("OUT_DIR"), "/generated.rs"));

#[actix_web::main]
async fn main() -> std::io::Result<()> {
    HttpServer::new(move || {
        let generated = generate();
        App::new().service(actix_web_static_files::ResourceFiles::new("/", generated))
    })
    .bind("127.0.0.1:8080")?
    .run()
    .await
}

运行服务器

cargo run

请求资源

$ curl -v https://127.0.0.1:8080
*   Trying ::1...
* TCP_NODELAY set
* Connection failed
* connect to ::1 port 8080 failed: Connection refused
*   Trying 127.0.0.1...
* TCP_NODELAY set
* Connected to localhost (127.0.0.1) port 8080 (#0)
> GET / HTTP/1.1
> Host: localhost:8080
> User-Agent: curl/7.64.1
>
< HTTP/1.1 200 OK
< content-length: 199
< content-type: text/html
< etag: "c7:5e403845"
< date: Sun, 09 Feb 2020 16:51:45 GMT
<
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>actix-web-static-files WebPack</title>
  </head>
  <body>
  <script type="text/javascript" src="main.js"></script></body>

另请参阅

WebPack 示例

用例 4：yarn 包管理器

我们可以使用除 npm 之外的其他包管理器。例如，要使用 yarn，只需将 .executable("yarn") 添加到 NpmBuild 调用中

use static_files::NpmBuild;

fn main() -> std::io::Result<()> {
    NpmBuild::new("web")
        .executable("yarn")
        .install()?
        .run("build")?
        .target("web/dist/bundle")
        .change_detection()
        .to_resource_dir()
        .build()
}

另请参阅

yarn WebPack 示例

用例 5：类似 Angular 的应用程序

如果你使用 Angular 作为前端，你可能想要通过前端应用程序的 index.html 解决所有未找到的调用。为此，只需在资源创建后调用方法 resolve_not_found_to_root

use actix_web::{middleware::Logger, App, HttpServer};
#[cfg(feature = "ui")]
use actix_web_static_files;

#[cfg(feature = "ui")]
use angular_example_frontend::generate;

#[actix_web::main]
async fn main() -> std::io::Result<()> {
    env_logger::init();
    HttpServer::new(move || {
        let mut app = App::new().wrap(Logger::default());
        #[cfg(feature = "ui")]
        {
            let generated = generate();
            app = app.service(
                actix_web_static_files::ResourceFiles::new("/", generated)
                    .resolve_not_found_to_root(),
            );
        }
        app
    })
    .bind("127.0.0.1:8080")?
    .run()
    .await
}

在这种情况下，请务必将你的静态资源路由放在所有其他路由之后。

您可以在 Angular Router 示例中查看完整的示例。

依赖项

~15–26MB
~458K SLoC