Zenn
🌈

AWS Amplify に Rust | Dioxus で作った Webアプリケーションをデプロイしてみた

に公開
AWS
Rust
Amplify
Dioxus
tech

はじめに

AWS Amplifyを使って、過去に私が作ったWebアプリケーションを爆速でデプロイしてみました。
我なりにスムーズにできたので、気になった方はぜひお試しください！

ディレクトリ内にYAMLを作成する

まずは、デプロイ用のYAMLファイルを作成し、リポジトリにプッシュする必要があります。
Dioxusでは、dioxus-cliをインストールしたのちビルドを実施するため、
YAMLファイルを作成して、それらのステップを踏む必要がありそうです。

私は以下のように作ってみました。
自身のディレクトリに合わせて、よしなに編集しちゃってください。

amplify.yaml
version: 1
frontend:
  phases:
    preBuild:
      commands:
        - curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y
        - source ~/.cargo/env
        - cargo install dioxus-cli
        - rustup target add wasm32-unknown-unknown
    build:
      commands:
        - dx build --release --platform web
  artifacts:
    baseDirectory: target/dx/dioxus-web/release/web/public
    files:
      - "**/*"

これをGithub上のリポジトリにプッシュしておきます。

Amplifyでデプロイする

あとはAWSマネジメントコンソールにて、画面ぽちぽちでデプロイしていきます。
Amplifyにアクセスして、「新しいアプリを作成」をクリックします。

ソースコードとプロバイダーを選択する

まずは最初のステップとして、ソースコードとプロバイダーを選択します。
ここで、Githubを選択します。
Amplify

リポジトリを選択する

続いて、あらかじめ作成しておいたDioxusのリポジトリを選択します。
リポジトリ一覧が出てくるので、ここで選択します。

Amplify

アプリケーションの設定

アプリケーションの設定は特に何も変えずにいきます。（必要に応じて、アプリケーション名を変更）
YAMLから自動検出してくれ、ビルド用のコマンドが定義されています。
Amplify

確認

内容に問題なければ、このまま「保存してデプロイ」をクリックします。

あとは、数分から数十分待ち、デプロイが完了するのを待つだけです。
デプロイが完了したら、
ページ上部の「デプロイされたURLにアクセス」をクリックし、動作を確認します！
Amplify

おわりに

DioxusでもAmplifyでデプロイし、動作させることができました。

Web上に公開する手段としてはいくつかあると思いますが、
Amplifyは費用面を抑えられると思いますので、
個人開発でWebアプリケーションを素早くデプロイするにはピッタリですね！

では！

Discussion