普段バックエンドを触ることが多いけど、最近はThree.jsやUnityなどユーザ側の技術に興味が向いています。
学生なのでUnityのStudentプランがあるらしい。
個人ではThree.jsの比重が大きくなってきた。
今回は、そういった静的サイトをつくる際に、開発中であってもCORSなどの理由でHTTPサーバから配信する必要がある。
JavaScriptのライブラリ調査やささっと動作確認するために、node, webpack, gulp, react, nuxt, next, vite, .. なんやらかんやらをセットアップするのは馬鹿げていると考えている。今ここにあるindex.htmlとjsを読み込んで動作確認がしたいんや！プロジェクトごとにnpm i してとか、設定ファイルを追加してとか無理。
単純にいまあるindex.htmlとjsを配信できるHTTPサーバをRustで用意する方法を書き溜め
ActixWebで配信
使うのはRust x ActixWeb。
ActixWebは静的ファイルを配信することがとても簡単だし、バイナリにできるので一度作っておけば複数のプロジェクトで自由に扱える。余計な設定もしなくてすむようにしている。
ソースコードはほぼ公式のものを流用している。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
use actix_files::NamedFile; use actix_web::{HttpRequest, Result}; use std::path::PathBuf; async fn index(req: HttpRequest) -> Result<NamedFile> { let path: PathBuf = req.match_info().query("filename").parse().unwrap(); Ok(NamedFile::open(path)?.use_last_modified(true)) } #[actix_web::main] async fn main() -> std::io::Result<()> { use actix_web::{web, App, HttpServer}; let port = std::env::var("APP_PORT").expect("APP_PORT must be set"); let bind = format!("0.0.0.0:{}", port); HttpServer::new(|| App::new().route("/{filename:.*}", web::get().to(index))) .bind(&bind)? .run() .await } |
ソースコードはGithubに挙げているので、細かい部分は確認してね。
バイナリは、開発中の作業ディレクトリのルートに配置して下記コマンドで起動します。
APP_PORTを環境変数として渡せば好きなポートでbindします。
|
1 |
$ APP_PORT=3000 ./fs |
作業ディレクトリは自由でいいんだけど、例えば下記のような感じであれば、localhost:3000/index.html でアクセスできる。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$ tree . ├ ─ ─ fs ├ ─ ─ index.html ├ ─ ─ css │ └ ─ ─ app.css ├ ─ ─ js │ └ ─ ─ app.js ├ ─ ─ images │ ├ ─ ─ 1.jpg │ ├ ─ ─ 2.jpg │ └ ─ ─ 3.png |
fsバイナリは取り回しがいい。
nginxやapacheではプロジェクトごとに仮想ルートを作ったり、設定ファイルを書いたりしないといけない。
このバイナリなら作業ディレクトリにおいてコマンド実行ですぐ起動するので最高。
じゃあね〜〜〜。