Rust、何もわからない... ~Rust ウェブ開発事例紹介~

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

࢘ձ঺հ ؠ੒ ୡ࠸ !JX@UBUTV औక໾$50 ৽ଔͰ*OEFFE+BQBOʹೖࣾɻ΢Σϒ্ͷٻਓ ืू৘ใΛूΊͯఏڙ͢ΔσʔλύΠϓϥΠϯ ͷ։ൃʹैࣄɻ ೥݄ʹFTUJF΁71PG1SPEVDUTͱͯ͠ ࢀը͠ɺ೥݄ʹ$50΁ब೚ɻ ϓϩμΫτ෦໳Λ౷ׅͯ͠ϓϩμΫτ࿈ܞͷઃ ܭ΍ɺ৽نϓϩμΫτ։ൃΛߦ͏ɻ

Slide 3

Slide 3 text

ొஃऀ঺հ LFOLPPPP 4PGUXBSF&OHJOFFS લ৬*OEFFE+BQBOͰ͸ɺػցֶ शɾࣗવݴޠॲཧΛ༻͍ͯσʔλ͔ ΒϝλσʔλΛੜ੒͢ΔγεςϜΛ ։ൃɻ FTUJFͰ͸3VTUΛ༻͍ͨ΢ΣϒΞϓ Ϧͷ։ൃʹऔΓ૊Ήɻ ʰ࣮ફ3VTUϓϩάϥϛϯάೖ໳ʱ ʰΞϧΰϦζϜ࣮ٕݕఆ ެࣜςΩε τʦΤϯτϦʔʙதڃฤʧʱڞஶɻ NBUTV 4PGUXBSF&OHJOFFS ૣҴాେֶ੓࣏ܦࡁֶ෦ଔɻ ೥ΑΓϑΥϧγΞגࣜձࣾ ʹͯ8FCΤϯδχΞͱͯ͠ۈ຿ɻ ೥ΑΓFTUJFʹࢀըɻ ʰ࣮ફ3VTUϓϩάϥϛϯάೖ໳ʱ ڞஶɻ

Slide 4

Slide 4 text

ຊ೔ͷྲྀΕ Φʔϓχϯά r FTUJFͱ͸ʁ NJO "DUJYXFC Ͱշద΢ΣϒΞϓϦੜ׆ LFOLPPPP NJO όοΫΤϯυΛ3VTUʹॻ͖׵͑ΔͷͬͯͲͷ͘Β͍͔͔ΔΜͰ͔͢ʁ NBUTV NJO શମΛ௨ͯ͠ͷ2" NJO Ϋϩʔδϯά NJO

Slide 5

Slide 5 text

ຊ೔ͷྲྀΕ • )BTIUBHʮ3VTUԿ΋Θ͔Βͳ͍ʯΛ࢖ͬͯΠϕϯτΛ੝Γ্͍͛ͯͩ͘͞ʂ • 2"ػೳΛͥͻ͝׆༻͍ͩ͘͞ʂ • ऴྃޙɺຊ೔ͷࢿྉΛμ΢ϯϩʔυͰ͖ΔΑ͏ʹ͍ͨ͠·͢

Slide 6

Slide 6 text

FTUJFͱ͸ʁ

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

৽ίʔϙϨʔταΠτ ʢ IUUQTXXXFTUJFKQDPSQ ʣ ͷ͝঺հ

Slide 10

Slide 10 text

͜Ε·ͰͷϓϩμΫτ܈

Slide 11

Slide 11 text

ͦΕΛࢧ͑ΔਐԽ͠ଓ͚ΔσʔλύΠϓϥΠϯ

Slide 12

Slide 12 text

20/4 20/5 20/6 20/7 20/8 20/9 20/10 20/11 20/12 21/1 21/2 21/3 21/4 21/5 21/6 21/7 21/8 21/9 21/10 21/11 ϏδωεΠϯύΫτ ओͳಋೖاۀ ԻॱɺҰ෦ൈਮ BOENPSF .33 Y ௚ۙϲ݄

Slide 13

Slide 13 text

1IBTF ۭࣨɾاۀ৘ใͷ σʔλج൫ߏங 1IBTF 1IBTF τϥϯβΫγϣϯ ϓϥοτϑΥʔϜ

Slide 14

Slide 14 text

ෳ਺ϓϩμΫτͷ૬৐ޮՌͰاۀՁ஋ΛരൃతʹߴΊΔ 1SPEVDU ۭࣨɾاۀ৘ใͷ σʔλج൫ߏங 1SPEVDU 1SPEVDU τϥϯβΫγϣϯ ϓϥοτϑΥʔϜ "1*ߏ૝ ଟ༷ͳݴޠ ৽͍͠ϓϩμΫτͷόοΫΤϯυΛ3VTUͰॻ͍ͯ·͢ʂ

Slide 15

Slide 15 text

ͬͦ͘͞-5͍͖·͠ΐ͏ʂ )BTIUBH3VTUԿ΋Θ͔Βͳ͍ 2"ػೳΛͥͻ͝׆༻͍ͩ͘͞ʂ

Slide 16

Slide 16 text

actix-web で快適ウェブアプリ生活 @kenkoooo

Slide 17

Slide 17 text

今日話すこと 1. actix-web で爆速ウェブアプリ開発 2. actix-web ミドルウェア

Slide 18

Slide 18 text

actix-web で爆速ウェブアプリ開発

Slide 19

Slide 19 text

actix-web と ● Rust で作られたウェブフレームワーク ● ウェブアプリに必要な機能をカバー ● 広く使われている ● ドキュメント・exampleが充実

Slide 20

Slide 20 text

ウェブフレームワークと？

Slide 21

Slide 21 text

ウェブフレームワークと？ GET /index.html

Slide 22

Slide 22 text

ウェブフレームワークと？ POST /tweet/new

Slide 23

Slide 23 text

ウェブフレームワークと？

Slide 24

Slide 24 text

actix-web ってどんな感じ？ ● actix-web を使って簡単にウェブアプリが書ける ● "The Rust Programming Language" ○ 公式チュートリアル ○ https://rust-lang.github.io/async-book/ ○ 最後章でウェブサーバーを作る

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

ウェブフレームワークと？ GET /index.html

Slide 27

Slide 27 text

これだけで動く！actix-web use actix_web::{get, App, HttpServer, Responder}; #[get("/index.html")] async fn index() -> impl Responder { "HELLO WORLD" } #[actix_web::main] async fn main() -> std::io::Result<()> { HttpServer::new(|| App::new().service(index)) .bind(("127.0.0.1", 8080))? .run() .await }

Slide 28

Slide 28 text

Slide 29

Slide 29 text

これだけで動く！actix-web #[get("/index.html")] async fn index() -> impl Responder { "HELLO WORLD" }

Slide 30

Slide 30 text

これだけで動く！actix-web #[post("/tweet/new")] async fn post_new_tweet () -> impl Responder { // ツイートする }

Slide 31

Slide 31 text

これだけで動く！actix-web #[post("/tweet/new")] async fn post_new_tweet (new_tweet: Json) -> Json { // ツイートする }

Slide 32

Slide 32 text

これだけで動く！actix-web #[post("/tweet/new")] async fn post_new_tweet (new_tweet: Json) -> Json { // ツイートする } 関数引数に渡すと、 actix-web が body として受け取る

Slide 33

Slide 33 text

これだけで動く！actix-web #[post("/tweet/new")] async fn post_new_tweet ( new_tweet: Json, ) -> Json { // ツイートする }

Slide 34

Slide 34 text

これだけで動く！actix-web #[post("/tweet/new")] async fn post_new_tweet ( new_tweet: Json, twitter_client : Data, ) -> Json { // ツイートする }

Slide 35

Slide 35 text

これだけで動く！actix-web #[post("/tweet/new")] async fn post_new_tweet ( new_tweet: Json, twitter_client : Data, ) -> Json { // ツイートする } Data を引数に渡すと、フレームワーク側から引っ張ってくる

Slide 36

Slide 36 text

これだけで動く！actix-web #[post("/tweet/new")] async fn post_new_tweet ( new_tweet: Json, twitter_client : Data, cache: Data, ) -> Json { // ツイートする } Data を引数に渡すと、フレームワーク側から引っ張ってくる

Slide 37

Slide 37 text

まとめ ● actix-web で超簡単ウェブアプリ ● 関数を書くだけ ● 関数に色々渡せる ● 良い感じにやってくれる #[post("/tweet/new")] async fn post_new_tweet ( new_tweet: Json, twitter_client : Data, cache: Data, ) -> Json { // ツイートする }

Slide 38

Slide 38 text

actix-web ミドルウェア

Slide 39

Slide 39 text

ウェブフレームワークと？

Slide 40

Slide 40 text

ウェブフレームワークと？ actix-web フレームワーク #[post("/tweet/new")] async fn post_new_tweet( new_tweet: Json, client: Data, ) -> Json { // 関数の中身 } リクエストレスポンス引数返り値いい感じにやってくれる

Slide 41

Slide 41 text

もっと良くしたい！

Slide 42

Slide 42 text

もっと色々やってほしい！ actix-web フレームワーク #[post("/tweet/new")] async fn post_new_tweet( new_tweet: Json, client: Data, user_data: UserData, ) -> Json { // 関数の中身 } 引数リクエストデータベースユーザー情報を取得

Slide 43

Slide 43 text

もっと色々やってほしい！ #[post("/tweet/new")] async fn post_new_tweet( new_tweet: Json, client: Data, user_data: UserData, ) -> Json { // 関数の中身 } 引数リクエストデータベースユーザー情報を取得 actix-web ミドルウェア

Slide 44

Slide 44 text

もっと色々やってほしい！ #[post("/tweet/new")] async fn post_new_tweet( new_tweet: Json, client: Data, user_data: UserData, ) -> Json { // 関数の中身 } 引数リクエストデータベースユーザー情報を取得ミドルウェア3 ミドルウェア2 ミドルウェア1

Slide 45

Slide 45 text

actix-web ミドルウェア impl Service for Middleware { fn call(&self, req: ServiceRequest ) -> Self::Future { // req に対して色々処理 // 次の処理に req を渡す self.service.call(req).await.map(|res| res.map_into_left_body ()) } }

Slide 46

Slide 46 text

actix-webミドルウェア例 fn call(&self, req: ServiceRequest ) -> Self::Future { let token = parse_token(&req); // リクエストからトークンを取り出す // トークンを使って、ユーザー情報を取得 let user_info = self.client.get_user_info(&token); // ユーザー情報をリクエストに詰める req.extensions_mut ().insert(user_info); // リクエストを次の処理に渡す service.call(req).await.map(|res| res.map_into_left_body ()) }

Slide 47

Slide 47 text

ミドルウェアでデータを渡す #[post("/tweet/new")] async fn post_new_tweet ( new_tweet: Json, twitter_client : Data, ) -> Json { // ツイートする }

Slide 48

Slide 48 text

ミドルウェアでデータを渡す #[post("/tweet/new")] async fn post_new_tweet ( new_tweet: Json, twitter_client : Data, user_data: ReqData, ) -> Json { // ツイートする } ミドルウェアでリクエストに渡したデータを引数として引っ張ってくる

Slide 49

Slide 49 text

actix-web ミドルウェアまとめ ● actix-web メッチャ簡単 ● ミドルウェアでカスタマイズしまくり

Slide 50

Slide 50 text

まとめ

Slide 51

Slide 51 text

まとめ #[post("/tweet/new")] async fn post_new_tweet ( new_tweet: Json, twitter_client : Data, user_data: ReqData, ) -> Json { // ツイートする } ミドルウェアから来たデータサーバーから来たリクエスト中身関数を作るだけ！ドンドン関数に渡せる！

Slide 52

Slide 52 text

Rust導入から5ヶ月… @kenkoooo

Slide 53

Slide 53 text

Rust導入から5ヶ月… ● Rust導入から5ヶ月 ● プロダクト既にリリース済み ○ 実装したいもが沢山 ○ 入社して作ってくれ！

Slide 54

Slide 54 text

Rust導入から5ヶ月… よかったこと ● 生産性が高い ○ パッケージマネージャ ○ メッチャ強い補完 (rust-analyzer) ● Rust流設計を強制される ○ 参照を持ち回さない

Slide 55

Slide 55 text

Rust導入から5ヶ月… 大変なこと ● サードパーティ公式SDKがない ○ Datadog ○ SendGrid ○ Auth0 ○ etc.

Slide 56

Slide 56 text

Rust導入から5ヶ月… 他メンバーへ教育 ● 試行錯誤中 ● 動くプロジェクトがあれ、動かしながら試せる ● コードレビューをちゃんとする ● コンパイラが教えてくれる

Slide 57

Slide 57 text

まとめ Rustやったことない人 ● 頑張って教えるで入ってください！ Rustやってる人 ● 教えてください！！！副業・アルバイト・インターンも募集中です！

Slide 58

Slide 58 text

助けて！

Slide 59

Slide 59 text

バックエンドをRustに書き換えるってどれくらいかかるんですか？ @matsu7874

Slide 60

Slide 60 text

アジェンダ ● 事例紹介 ○ アプリケーション概要 ○ どように書き換えを意思決定したか ○ 実際にやってみて ● TypeScriptと連携 ○ ts_rs ○ paperclip

Slide 61

Slide 61 text

自己紹介松本健太郎 (@matsu7874) ● estie SWE ○ 2021/12から業務委託 ○ 2022/05から正社員としてフルタイム勤務 ● 『実践Rustプログラミング入門』共著

Slide 62

Slide 62 text

事例紹介プロトタイプアプリバックエンド再実装

Slide 63

Slide 63 text

アプリケーション概要 ● プロトタイプ開発中アプリケーション ○ バックエンド API10本くらい ● Node.jsで開発していたバックエンドをRustに書き換えた MySQL MySQL Actix Next.js Next.js(API) Next.js

Slide 64

Slide 64 text

どように書き換え意思決定をしたか ● 環境 ○ Node.jsに詳しい業務委託エンジニアがチームを抜ける ○ estieとしてRustに力を入れていきたい ● チームメンバーを中心にメリット・デメリットを整理 ○ CTOや他チームエンジニアからも意見をもらいながら ● 長期的な視点をもって意思決定した ○ アプリケーション開発効率・安全性 ○ エンジニア採用

Slide 65

Slide 65 text

懸念・議論 ● 型定義二重管理問題 ○ Rust実装 APIをTSから呼ぶと両方言語で型定義が必要になる ○ Rustから自動生成するツールを利用することで解決 ● Rust用コンテナが必要問題 ○ 他チームで既に運用しており、行けると判断 ● Rustが書けるエンジニアがアサインできるか問題 ○ 興味を持てる人をアサインできれ、キャッチアップしてもらえる

Slide 66

Slide 66 text

実際にやってみて ● 実稼働3日で再実装できた ○ 5~7日くらいと想定していたが、kenkooooさんチームノウハウを活かすことができた ■ Actix-web, sqlx, paperclip, anyhowなど ● プロトタイプをRustで書くこと是非まだ分からない ○ 保守しにくいコードを書きにくくする効果あると思う

Slide 67

Slide 67 text

フロントエンド Rustと連携

Slide 68

Slide 68 text

フロントエンド Rustと連携課題 RustでもAPI リクエスト・レスポンス型を定義したときに、TSでAPI リクエスト・レスポンス型を書かなくて済むようにしたい。解決策別プロジェクトで ts_rs を使っていたが、クライアント側コードを生成する OpenAPI を使うために paperclip を導入した。

Slide 69

Slide 69 text

ts_rs: TS interface定義を生成するクレート https://docs.rs/ts-rs/latest/ts_rs/

Slide 70

Slide 70 text

paperclip: OpenAPI 定義ファイルを生成するクレート

Slide 71

Slide 71 text

paperclip: OpenAPI 定義ファイルを生成するクレート https://paperclip-rs.github.io/paperclip/actix-plugin.html

Slide 72

Slide 72 text

paperclip: OpenAPI 定義ファイルを生成するクレート https://paperclip-rs.github.io/paperclip/actix-plugin.html

Slide 73

Slide 73 text

paperclip: OpenAPI 定義ファイルを生成するクレート ● OpenAPI 定義ファイルが出力されるで超便利 ● クレートを分割したときにどう書けるか https://paperclip-rs.github.io/paperclip/actix-plugin.html

Slide 74

Slide 74 text

まとめ

Slide 75

Slide 75 text

まとめ ● 将来にベットする形で実験コストを支払った ○ Rustを仕事で書きたいエンジニア多そう ● 既にスタックを共有する効果が現れている ○ Actix-web, sqlx, paperclip, anyhow チームメンバーを募集しています ● Meety こちら ○ https://meety.net/matches/wXzgmcmNgWNO

Slide 76

Slide 76 text

2"λΠϜ 次回開催に向け、アンケートのご協⼒をお願いします！ https://forms.gle/yGE4pKPEc2CY2ZKE9

Slide 77

Slide 77 text

.FFUZ΍Γ·͠ΐ͏ʂ kenkoooo matsu7874 ハードル⾼ければTwitter DMくださいー！ @iw_tasu

Slide 78

Slide 78 text

࣍ճ3VTUΠϕϯτܾఆʂ 最新情報はConnpass/Twitterにて！登壇希望の⽅がいれば、お声がけください！⼀緒に盛り上げていきましょう〜

Slide 79

Slide 79 text

ຊ೔͸ɺ͝ࢀՃ͍͖ͨͩ ੣ʹ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ