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

# はじめに

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

## 前段
- [Azure DatabricksでDatabricks Appsを検証するための環境構築](https://qiita.com/kei1-dev/items/c5d1f21687bd23489166)
- [Databricks Apps でカスタムアプリのデプロイ](https://qiita.com/kei1-dev/items/3e749e2519535f8c0d56)
- [FastAPIにSPAアプリケーションを統合する](https://qiita.com/kei1-dev/items/09fb914e724016b654eb)

# 前提環境
以下Databricks Appsのシステム環境に準じます。
[Databricks Apps System Environment](https://learn.microsoft.com/en-us/azure/databricks/dev-tools/databricks-apps/#the-databricks-apps-system-environment)

- Ubuntu 22.04 LTS
- Python 3.11
- FastAPI 0.115.6 

# フォルダ構成

Nuxt.jsで作成したSPAのフロントエンドをFastAPIに統合するためのフォルダ構成は以下の通りです。
([FastAPIにSPAアプリケーションを統合する](https://qiita.com/kei1-dev/items/09fb914e724016b654eb)を参照してください)
```
プロジェクトルート/
├── .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ディレクトリにコピーする必要があるため、以下のコマンドを実行します。

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

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

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

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

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

![workspace.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479886/a5797298-e82c-02de-d24e-e7118c0288e6.png)


# デプロイ

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

```bash
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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479886/25725b42-4761-d6ab-81e3-aeb6bfb439e5.png)

![about.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479886/d3e93fbe-1c49-e39c-7cbf-57127d98e386.png)


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

```bash
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へデプロイ

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

# 参考

- [Databricks Apps Configuration](https://learn.microsoft.com/en-us/azure/databricks/dev-tools/databricks-apps/configuration#configuring-your-databricks-apps-with-the-appyaml-file)
- [Databricks Apps Deploy](https://learn.microsoft.com/en-us/azure/databricks/dev-tools/databricks-apps/deploy)