Rust(axum, sqlx)とReactでWebアプリ開発 - 備忘録2 デプロイ&機能追加編

はじめに

前回の記事の続き。
長くなりそうだったので分割。

※もしより正確な情報だったり詳細な内容をご存じの方はコメントで教えていただけると幸いです。

概要

前回の記事の要約も兼ねて、ざっと今回制作しているWebアプリの概要を記載する。

• バックエンド
  • Rust
    • axum
    • sqlx
• フロントエンド
  • React

バックエンドのデプロイ

今回は shuttle にデプロイする。
「Rust ネイティブのクラウド開発プラットフォーム」とのことで、いくつか記事も出てきたので公式ドキュメントと並べながら進めることにした。

参考にした記事

cargo shuttle runまで

まずはローカルでのshuttle対応を目指す。
shuttleにデプロイするためには、対応するようにコードを書き換えないといけないらしい。

shuttleのプロジェクト作成方法などはほかの資料にあるため省略。

進めていくと以下のようなエラーが発生。

error: failed to select a version for `sqlx`.
    ... required by package `shuttle-shared-db v0.47.0`
    ... which satisfies dependency `shuttle-shared-db = "^0.47.0"` of package `todo v0.1.0 (C:\Users\gravi\Desktop\dev\rust\rust_todo)`
versions that meet the requirements `^0.7.1` are: 0.7.4, 0.7.3, 0.7.2, 0.7.1

ローカルではsqlx 0.8.0で進めていたのだが、どうやらshuttle側が未対応らしい。
ということで0.7.1に落としてみるとうまくいった様子。

cargo shuttle runを打つと、shuttleの設定を含んだDockerコンテナが起動する。
今までのローカル開発で動かしていたDockerコンテナとは別のコンテナが起動しているみたいだった。

ここで困ったのが、ローカルサーバーを立ち上げるとブラウザからDBに繋がらなくなってしまった。
いろいろ調べてみると、shuttleの公式ドキュメントサイトにある「Search or ask...」で調べると、デフォルトポートは8000番で立ち上がっていることが分かった。
（これはshuttleが用意したAIが回答を生成しているっぽい）

ローカルでは3000番を指定していたので、8000番に直すと繋がった。

cargo shuttle deploy

デプロイ用のコマンドを打つとまたエラーが発生。

2024-09-12T16:21:54.018+09:00 [Deployer] error: test failed, to rerun pass `--bin todo`
2024-09-12T16:21:54.022+09:00 [Deployer]  INFO Releasing queue slot
2024-09-12T16:21:54.022+09:00 [Deployer]  INFO Entering Crashed state
2024-09-12T16:21:54.022+09:00 [Deployer]  INFO Build failed
2024-09-12T16:21:54.022+09:00 [Deployer] ERROR shuttle_deployer::deployment::queue: {error="Pre-deployment test failure: The deployed application's tests failed. HINT: re-run deploy with `--no-test` to skip tests."} Service build encountered an error

テストが通らないので怒られている。
そしてテストを無視してデプロイする方法も教えてくれている。（--no-test）

確かにローカルサーバーのポート番号を変えたのでテストが通らなくなる。
DBの接続先をshuttleのコンテナに変えてみたがうまくいかない。
あまりよろしくないと思うが、今回はこのままデプロイすることにする。

cargo shuttle deploy --no-test

うまくいくとコンソールにはデプロイ成功したログと、WEB上には Running が表示される。

2024-09-12T16:22:53.476+09:00 [Deployer]  INFO Entering Running state
2024-09-12T16:22:53.476+09:00 [Deployer]  INFO Starting service

ちなみにデプロイ成功すると本番用のURLがshuttleから発行されるので、
テスト用のコードに本番用のURLを入れるとテストが通った。（しかしデプロイ時にはやはり--no-testをつけないとデプロイできなかった）

バックエンドのデプロイまで終わった時点のコードはこちら

フロントエンドのデプロイ

フロントエンドはReactなので選択肢は多そうだが、今回はCloudflareを選択。
以下の記事を参考にした。

特に困ったことはなかった。
package.jsonにdeployコマンドがなかったので追加したぐらい。

deploy.yml

次にGithub Actionsを使って、自動デプロイ環境を作ることにした。
Cloudflareにデプロイしたので以下の記事を参考に進めた。
トークン発行などまでの流れは以下の記事の通りなので省略。

困ったのはdeploy.ymlの設定だ。
成功するまで11回失敗した。

原因はバージョンが違ったり(記事はv3で書かれているが現在はv4が最新)、デプロイディレクトリが違ったり（ルート直下の一つ下にReactのソースを置いている）、様々だった。

Github上でエラーメッセージが出ているので、読み込んで調べて修正して...を繰り返して試行錯誤した結果、何とか自動デプロイに成功した。

ここまでのソースは以下。

自動デプロイについて調べた際に見たりした記事。

リファクタと機能追加

デプロイした後に見直していて、少し動作が気になったところがあったので修正を加えた。

• useCallback,useMemo,遅延読み込みなどの追加
• ローディング中のUIを追加
• Labelフィルター時のUI変更
• CSS Modulesに変更

最終的なコードは以下。

完成したアプリケーションのデモ画面

• 初期表示
  

• ローディング中
  

• Labelフィルター時
  

• データ更新時（これもう少し見せ方工夫したかった...）
  
  ↓
  

最後に

前回の記事で紹介した書籍をベースに、本番環境にデプロイしたり、自分なりにアップデートをすることができた。

ユーザー認証機能はないため、アプリケーションのURLを記載するのは控えるが（全世界に公開したら誰に何を書き込まれるかわからない）、身内の中での掲示板的な使い方はできるかもしれない。

次はユーザー認証を入れたり、今回やっていないフロントエンドもRustで書く(追記：挑戦してみました)ということに挑戦してみたい。

追記

実は途中までハードコーディングでWEBアプリケーションの画面URLをコードに記載していたので、shuttleのsecrets機能を使って環境変数からURLを取得するようにした。

派生記事リンク