1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Databricks AppsにSPAアプリを含めたカスタムアプリを作成する

Posted at

はじめに

Databricks AppsにSPAアプリを含めたカスタムアプリを作成する方法について検証します。

前段

前提環境

以下Databricks Appsのシステム環境に準じます。
Databricks Apps System Environment

  • Ubuntu 22.04 LTS
  • Python 3.11
  • FastAPI 0.115.6

フォルダ構成

Nuxt.jsで作成したSPAのフロントエンドをFastAPIに統合するためのフォルダ構成は以下の通りです。
(FastAPIにSPAアプリケーションを統合するを参照してください)

プロジェクトルート/
├── .gitignore       # Gitで追跡しないファイルの設定
├── backend/          # FastAPIアプリケーション
│   ├── main.py       # FastAPIのエントリーポイント
│   ├── requirements.txt # アプリケーションで使用するライブラリを記載する
│   ├── app.yaml      # Databricks Appsのデプロイ用ファイル
│   ├── static/       # 静的ファイルを格納するディレクトリ
│   └── ...
│
└── frontend/         # SPAフロントエンド (例: Nuxt.js)
    ├── pages/
    ├── .output/
    │   └── static/   # Nuxt.jsのビルド結果
    ├── nuxt.config.ts
    └── ...

デプロイ準備

Nuxt.jsのビルド結果をFastAPIに統合するために、以下の手順を実行します。(Nuxt.jsのビルドは実行済み想定)
ビルド結果をFastAPIのstaticディレクトリにコピーする必要があるため、以下のコマンドを実行します。

cp -r ./frontend/.output/static/* ./backend/static/

ファイルのコピーが完了したら、databricksへファイル共有を行います。

cd ./backend
databricks sync --watch . /Workspace/Users/<username>/<app_name>

このsyncコマンドは.gitignoreを参照してファイルを共有しているようなので、.gitignoreにbackend/static/を入れた場合、ファイル共有ができないようです。
そのため、一時的に.gitignoreからbackend/static/を削除してファイル共有を行ってください。
(pipenvを使っている場合だとrequirements.txtが.gitignoreに入れる場合もあり、その場合は同様に一時的に削除してください)

ファイル共有がうまくいっていれば以下のようにワークスペース内にファイルが表示されます。
(static内はNuxt.jsのビルド結果が格納されています)

workspace.png

デプロイ

デプロイは通常のDatabricks Appsのデプロイと同じ手順で行えます。

cd ./backend
databricks apps deploy --app-name <app_name>  --source-code-path /Workspace/Users/<username>/<app_name>

デプロイが完了したら、Databricks Appsのページから払い出されたURLにアクセスしてみます。

ブラウザでhttps://<app_name>-XXX.databricksapps.com/にアクセスして、SPAのフロントエンドが正常に表示されることを確認します。

index.png

about.png

また、https://<app_name>-XXX.databricksapps.com/api/にcurlでアクセスして、APIが正常に動作していることを確認します。

curl https://<app_name>-XXX.databricksapps.com/api
# {"Hello": "World"}
curl https://<app_name>-XXX.databricksapps.com/api/items/1?q=hoge
# {"item_id": 1, "q": "hoge}

正常にアクセスできたら、デプロイは完了です。

まとめ

Databricks AppsにSPAアプリを含めたカスタムアプリをデプロイする方法について説明しました。
主なステップは以下の通りです:

  • Nuxt.jsのビルド(実行済み想定)
  • ビルド結果をFastAPIのstaticディレクトリにコピー
  • ファイル共有
  • Databricks Appsへデプロイ

ここまでできれば既存のFastAPI+SPAフロントエンド(ReactやVueなど)の構成がDatabricks Appsに移行できるということになります。

参考

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?