Rust + Yewで開発したフロントエンドをAWS Amplifyにデプロイする
お盆だったのでRustに手を出して見ようと思ったのですが、結局あまり深堀りせずにAWSと戦ってました。
この記事でやること
RustのフロントエンドフレームワークであるYewで作ったWebアプリをAWS Amplifyにデプロイします。
Yewとは？
WebAssemblyを使ってマルチスレッドのフロントエンドWebアプリケーションを作成するためのモダンなRustフレームワークです。
RustでフロントエンドをReactのような感じで書けるみたいです。
AWS Amplifyとは？
ウェブアプリケーションやモバイルアプリケーションを構築するためのAWSのサービスです。 Amplifyにはウェブアプリ構築のために多数の機能がありますが、今回はその中でAmplifyホスティングを使用します。
Yewで作ったアプリをAWS Amplifyにデプロイする手順
Yewの構築に関して、参考にさせていただきました。
必要なものをインストール
amplify cli
npm install -g @aws-amplify/cli
Yew関連
Rust
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
Trunk
cargo install trunk
WebAssembly target
rustup target add wasm32-unknown-unknown
プロジェクトを作る
amplifyを初期化
amplify init
上記コマンドを実行すると色々聞かれますが、ここでは省略します。
公式ドキュメントを参照してください。
Yewでフロントエンドを作る
雑に手順を書きますが、詳細は公式ドキュメント参照してください。
Cargo のプロジェクトを作る
リポジトリ直下に作るとamplifyが自動生成するファイルと混ざりそうなのがいやだったので、frontendディレクトリ配下にYewアプリを配置しました。
cargo new frontend && cd frontend
.gitignoreを置いておく
cargo newで.gitignoreが作られる認識だったのですが、なぜか作られなかったので作っておきます。
/target/
/dist/
**/*.rs.bk
YewでWebフロントエンドを作る(Hello World)
Cargo.tomlにyewを追加
[package]
name = "frontend"
version = "0.1.0"
edition = "2021"
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
[dependencies]
+ yew = "0.19"
ソースコードを編集
main.rsを編集します。
use yew::prelude::*;
#[function_component(App)]
fn app() -> Html {
html! {
<h1>{ "Hello World!!" }</h1>
}
}
fn main() {
yew::start_app::<App>();
}
frontend直下にindex.htmlを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Yew App</title>
</head>
</html>
起動
trunk serve
ブラウザで確認
OK
amplify.ymlでデプロイの設定をする
リポジトリ直下に戻って、amplify.ymlを作ります。
version: 1
frontend:
phases:
preBuild:
commands:
- cd frontend
# install rust
- curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y
- source ~/.cargo/env
# install trunk
- cargo install trunk
# add WASM target
- rustup target add wasm32-unknown-unknown
build:
commands:
- trunk build
artifacts:
baseDirectory: frontend/dist
files:
- "**/*"
cache:
paths:
- frontend/target/**/*
必要なものをインストールした後にビルドしているだけです。
ビルドする度にRustをインストールしているのが無駄なので、本当はRustインストール済みのカスタムイメージを用意したほうがよいと思いますが、取り急ぎはこれで、、、
amplify.ymlの詳細は、ドキュメントを参照してください。
GitHubにpush
最低限動くモノが出来たので、GitHubにpushしておきましょう。
注意点として、amplifyと連携するリポジトリはprivateにしておく必要があります。
（この為「作ったモノはコレです」とこの記事に貼ることも出来ないんだよなぁ、、、）
Amplify HostingとGitHubを接続して、アプリを公開
AWSコンソールからAmplifyとGitHubを連携
ブラウザからAWSにログインしてAmplifyのページに行くと、amplify initしたときに作成されたプロジェクトがあるはずです。
ホスティングの設定画面からGithubを選んで先程pushしたリポジトリと接続すればOKです。
ビルドとデプロイ
amplifyが先程書いたamplify.ymlの設定に従ってビルドとデプロイをしてくれます。完了するまで待ちましょう。
ブラウザから確認
デプロイ完了したらブラウザでamplifyのURLにアクセスして確認しましょう。
OK
最後に
とりあえず、無事にデプロイ出来ました！！
JS以外でのフロントエンドってなんか新鮮。
ただ、現状デプロイしただけなので、それ以上なにが出来るかは全然調べられてないです。
バックエンドとの連携ができないと実運用での利用は難しいので、どこからかいい感じの知見が集まるといいなぁと思っています（他力本願）
Discussion