feat: PWA支持，合并静态文件到可执行文件中，简化部署 (#3)

* feat: PWA支持

* feat: 静态文件嵌入到可执行文件

* docs: 修改文档

* feat: 修改 manifest.json 文件

* feat: 支持 service worker

.github/workflows/build.yml

@@ -18,26 +18,7 @@ env:
   REGISTRY: ghcr.io
 
 jobs:
-  build-web:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v3
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: latest
-          cache: "yarn"
-          cache-dependency-path: web/yarn.lock
-      - name: Build web
-        run: cd web && yarn && yarn build
-      - name: Upload artifact
-        uses: actions/upload-artifact@v3
-        with:
-          name: wol-web
-          path: web/dist
-          if-no-files-found: error
-  build-server:
+  build:
     strategy:
       fail-fast: false
       matrix:
@@ -120,7 +101,21 @@ jobs:
           toolchain: stable
           target: ${{ matrix.settings.target }}
           override: true
-      - name: Build
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: latest
+          cache: "yarn"
+          cache-dependency-path: web/yarn.lock
+      - name: Build web
+        run: yarn && yarn build
+        working-directory: web
+
+      - name: Move web file
+        run: mv web/dist www
+
+      - name: Build server
         uses: actions-rs/cargo@v1
         with:
           use-cross: ${{ matrix.settings.use-cross }}
@@ -139,8 +134,7 @@ jobs:
   publish:
     runs-on: ubuntu-latest
     needs:
-      - build-web
-      - build-server
+      - build
     steps:
       - name: Checkout repository
         uses: actions/checkout@v3

Cargo.toml

@@ -6,7 +6,6 @@ edition = "2021"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-actix-files = "0.6"
 actix-web = "4.3"
 anyhow = "1.0"
 base64 = "0.21"
@@ -17,6 +16,7 @@ env_logger = "0.10"
 futures-util = { version = "0.3", default-features = false }
 lazy_static = "1.4"
 log = "0.4"
+rust-embed = { version = "6.7", features = ["mime-guess"] }
 serde = "1.0"
 serde_yaml = "0.9"
 surge-ping = "0.8"

README.md

@@ -10,15 +10,25 @@ Wol 是 wake on lan 的简写，是一个轻量、简洁的 Wol 管理服务，
 - 占用资源少，运行速度快。
 - 跨平台：可以在 Linux、macOS 和 Windows 操作系统上运行。
 - 支持 basic auth，保护服务配置
+- 支持 PWA，实现原生应用一样的体验
 
 ## 安装和使用
 
-### Docker 中使用（推荐）
+### Docker 中使用（Linux 推荐）
 
 推荐使用 Docker 安装方式，使用简单方便，只需运行如下命令：
 
 ```sh
 docker pull ghcr.io/nashaofu/wol:latest
+
+# 使用docker host模式
+docker run -d \
+  --name wol \
+  --net host \
+  -v /path/to/wol.yaml:/opt/wol/yaml \
+  ghcr.io/nashaofu/wol:latest
+
+# 不使用docker host模式
 docker run -d \
   --name wol \
   -p 3300:3300 \
@@ -30,20 +40,12 @@ docker run -d \
 
 如果需要自定义配置，可将项目根目录下的 `wol.example.yaml` 文件拷贝到 `/opt/wol` 目录下并重命名为 `wol.yaml`，具体配置参考配置章节，也可以修改启动命令，指定配置文件位置。
 
-### 系统中使用
-
-1. 前往[release](https://github.com/nashaofu/wol/releases)页面下载`wol-client.zip`与`wol-xxxx.zip`，`xxxx`表示系统架构，请根据自己的情况选择
-2. 新建一个目录`wol`,解压`wol-client.zip`到`wol/www`,解压`wol-xxxx.zip`到`wol`目录下，最终目录结构如下
+### 系统中使用(Windows/Mac 推荐)
 
-   ```bash
-   .
-   ├── wol # wol-xxxx.zip
-   └── www # wol-client.zip
-       ├── ... # other files
-       └── index.html
-   ```
+Windows/Mac 桌面版的 docker 不支持`--net=host`,所以推荐这种使用方式。
 
-3. 在终端中运行`./wol`即可启动服务。同时也支持在启动时指定服务的端口号与配置文件。
+1. 前往[release](https://github.com/nashaofu/wol/releases)页面下载`wol-xxxx.zip`，`xxxx`表示系统架构，请根据自己的情况选择
+2. 解压出`wol-xxxx.zip`中的可执行文件，然后在终端中运行即可启动服务。同时也支持在启动时指定服务的端口号与配置文件。
 
    ```bash
    Usage: wol [OPTIONS]
@@ -62,8 +64,8 @@ docker run -d \
 ```yaml
 # basic auth 配置，auth 可为 null，表示关闭认证
 auth:
-  username: ''
-  password: ''
+  username: ""
+  password: ""
 # 设备列表
 devices:
   - name: Windows # 设备名称

build-docker.sh

@@ -22,7 +22,3 @@ wget https://github.com/nashaofu/wol/releases/latest/download/wol-${target}.zip
 unzip wol-${target}.zip
 mv wol-${target}/wol wol/wol
 chmod +x wol/wol
-
-wget https://github.com/nashaofu/wol/releases/latest/download/wol-web.zip
-unzip wol-web.zip
-mv wol-web wol/www

src/asset.rs

@@ -0,0 +1,20 @@
+use actix_web::{error::ErrorNotFound, HttpRequest, HttpResponse, Responder, Result};
+use rust_embed::RustEmbed;
+
+#[derive(RustEmbed)]
+#[folder = "www"]
+struct Asset;
+
+pub async fn serve(req: HttpRequest) -> Result<impl Responder> {
+  let path = &req.path()[1..];
+
+  let file = Asset::get(path)
+    .or(Asset::get("index.html"))
+    .ok_or(ErrorNotFound("Not Found"))?;
+
+  Ok(
+    HttpResponse::Ok()
+      .content_type(file.metadata.mimetype())
+      .body(file.data),
+  )
+}

src/main.rs

@@ -1,20 +1,20 @@
 pub mod api;
 pub mod args;
+pub mod asset;
 pub mod errors;
 pub mod middleware;
 pub mod settings;
 pub mod wol;
 
-use actix_files::{Files, NamedFile};
 use actix_web::{
-  dev::{fn_service, ServiceRequest, ServiceResponse},
   middleware::{Logger, NormalizePath},
   web, App, HttpServer,
 };
 use dotenv::dotenv;
 use std::io;
 
 use args::ARGS;
+use asset::serve;
 use middleware::BasicAuth;
 
 #[actix_web::main]
@@ -34,17 +34,7 @@ async fn main() -> Result<(), io::Error> {
           .wrap(Logger::default())
           .configure(api::init),
       )
-      .service(
-        Files::new("/", "./www")
-          .index_file("index.html")
-          .use_etag(true)
-          .default_handler(fn_service(|req: ServiceRequest| async {
-            let (req, _) = req.into_parts();
-            let file = NamedFile::open_async("./www/index.html").await?;
-            let res = file.into_response(&req);
-            Ok(ServiceResponse::new(req, res))
-          })),
-      )
+      .default_service(web::to(serve))
   })
   .bind(("0.0.0.0", ARGS.port))?
   .run()

web/index.html

@@ -7,7 +7,12 @@
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
     />
     <title>Wol</title>
-    <meta name="description" content="Wol 是 wake on lan 的简写，是一个轻量、简洁的 Wol 管理服务，支持检测设备是否开机成功。" />
+    <link rel="manifest" href="./manifest.json" />
+    <link rel="icon" href="./favicon.svg" />
+    <meta
+      name="description"
+      content="Wol 是 wake on lan 的简写，是一个轻量、简洁的 Wol 管理服务，支持检测设备是否开机成功。"
+    />
   </head>
   <body>
     <div id="root"></div>

web/package.json

@@ -40,6 +40,7 @@
     "less": "^4.1.3",
     "less-loader": "^11.1.3",
     "rimraf": "^5.0.1",
-    "typescript": "^5.1.6"
+    "typescript": "^5.1.6",
+    "workbox-rspack-plugin": "^0.0.2"
   }
-}
+}

web/public/manifest.json

@@ -0,0 +1,14 @@
+{
+  "name": "Wol",
+  "short_name": "Wol",
+  "start_url": ".",
+  "display": "standalone",
+  "background_color": "#001529",
+  "description": "Wol 是 wake on lan 的简写，是一个轻量、简洁的 Wol 管理服务，支持检测设备是否开机成功。",
+  "icons": [
+    {
+      "src": "favicon.svg",
+      "sizes": "any"
+    }
+  ]
+}

web/rspack.config.js

@@ -1,4 +1,5 @@
 const path = require("path");
+const { GenerateSW } = require("workbox-rspack-plugin");
 
 const prod = process.env.NODE_ENV === "production";
 
@@ -24,10 +25,16 @@ module.exports = {
     html: [
       {
         template: "index.html",
-        favicon: "favicon.svg",
         minify: true,
       },
     ],
+    copy: {
+      patterns: [
+        {
+          from: "public",
+        },
+      ],
+    },
   },
   devServer: {
     historyApiFallback: true,
@@ -79,4 +86,10 @@ module.exports = {
       },
     ],
   },
+  plugins: [
+    new GenerateSW({
+      clientsClaim: true,
+      skipWaiting: true,
+    }),
+  ],
 };