Warning
現在開発中です。
本番環境: backend/productionApi (plumber を使用)
- LICENSE Apache 2.0
- 使用言語: R
- IP address: 127.0.0.1
- port: 8000
本番のテスト環境: backend/preApi (plumber を使用)
- LICENSE Apache 2.0
- 使用言語: R
- IP address: 127.0.0.1
- port: 8000
開発環境: backend/developmentApi (Hono を使用)
- LICENSE MIT License
- 使用言語: TypeScript
- IP address: 127.0.0.1
- port: 8000
Next.js: frontend
- LICENSE MIT License
- 使用言語: TypeScript
- IP address: 127.0.0.1
- port: 3000
storybook: frontend
- コンポーネントのタカログを見るもの
- port: 6006
flowchart LR
developmentApi<--開発時用--->Next.js
preApi<--本番のテスト用--->Next.js
productionApi<--本番用--->Next.js
subgraph backend
developmentApi
preApi
productionApi
end
subgraph frontend
Next.js
end
flowchart LR
backend<-->frontend
frontend<--cloudflare tunnel--->client["Client PC"]
subgraph Origin Server
backend
frontend
end
subgraph Client PC
client
end
Tip
モデルを追加する際には、必ずお読みください。
Important
バックエンドのエンドポイントと modelType の要素名は一致させる必要があります。
Warning
以下の説明は、エンドポイントの名前をモデル名としているという設定で、説明しています。
const modelType: string[] = ["stableDiffusion4R", "modelA", "modelB", "modelC"];
export { modelType };
modelType ・・・ モデルの名前を書きます。
※ モデルを追加する場合は、modelType にモデル名を追加してください。
Note
エンドポイントは、/モデル名/<prompt>
で設定する必要があります。
※フロントエンドでは以下の URL が組み立てられます。
[frontend/.env
内の NEXT_PUBLIC_API_URL]/[modelType]/[prompt]
example) http://127.0.0.1:8000/stableDiffusion4R/hello
※フロントエンドでは、このデータ構造でバックエンドがデータを返すことを想定して作成しています。
{
"prompt": ["プロンプト"],
"url": ["画像のURL"]
}
/backend/productionApi/plumber.R
以下のプログラムの場合は、モデル名が「stableDiffusion4R」になります。
library(plumber)
library(stableDiffusion4R)
#* @filter cors
cors <- function(req, res) {
res$setHeader("Access-Control-Allow-Origin", "*")
if (req$REQUEST_METHOD == "OPTIONS") {
res$setHeader("Access-Control-Allow-Methods", "GET")
res$setHeader(
"Access-Control-Allow-Headers",
req$HTTP_ACCESS_CONTROL_REQUEST_HEADERS
)
res$status <- 200
return(list())
} else {
plumber::forward()
}
}
#* Generate Dalle Image for R
#* @param prompt プロンプトを入力してください。
#* @get /dalle3/<prompt:character>
function(prompt) {
#prompt = "cat"
prompt <- prompt
url <- stableDiffusion4R::generateDalleImage4R(prompt, Output_image = F)
result <- list(prompt=url[1], url=url[2])
return(result)
}
Note
Node.js
・npm
・yarn
が必要です。
Note
本番環境では、frontend を cloudflare tunnel を利用して配信することを想定しています。
- cloudflare tunnel を作成します。
-
Service は、
http://127.0.0.1:3000
にします。 -
ホストマシンの環境に合わせて、cloudflare tunnel をセットアップしてください。
.env
ファイルを作成し、frontend/.env.prod.example
を参考に適切に環境変数を設定します。
-
.env
ファイルは、gen_dotenv.cmd
(Windows 環境の場合)かsh gen_dotenv.sh
(Linux 環境の場合)を実行することで生成できます。(初回時のみ実行してください。) -
NEXT_PUBLIC_API_URL
は、frontend/.env.prod.example
に書いている情報をそのまま使ってください。
以下のようになっていれば、OK です。
#*dev
# NEXT_PUBLIC_API_URL=http://127.0.0.1:8000
#*pre
# NEXT_PUBLIC_API_URL=http://127.0.0.1:8000
#*production
NEXT_PUBLIC_API_URL=http://127.0.0.1:8000
backend/productionApi
で以下のコマンドを実行します。
※ローカルサーバーが起動します。
Windows
plumber.cmd
Mac
plumber.commnd
をダブルクリックします。
frontend
で以下のコマンドを実行します。
- フロントエンドで使用するパッケージマネージャー: npm
npm i
frontend
で以下のコマンドを実行します。
※npm start
で Web App をローカルサーバーで起動します。
[!TIP] >
frontend
配下にあるプログラムに変更を加えた場合は、npm run build
とnpm start
をnpm run build
->npm run start
の順で実行してください。
npm run build
npm start
Note
本番環境では、frontend を cloudflare tunnel を利用して配信することを想定しています。
- cloudflare tunnel を作成します。
-
cloudflare tunnel を作成する際に、token を控えておきます。 ※Overview の Choose your environment で Docker を選択して表示される「Run the following command: 」の
--token
以降が token です。 -
Service は、
http://stablediffusion4r_api-frontend:3000
にします。
.env
ファイルを作成し、.env.prod.example
を参考に適切に環境変数を設定します。
-
.env
ファイルは、gen_dotenv.cmd
(Windows 環境の場合)かsh gen_dotenv.sh
(Linux 環境の場合)を実行することで生成できます。(初回時のみ実行してください。) -
NEXT_PUBLIC_API_URL
は、.env.prod.example
に書いている情報をそのまま使ってください。 -
CLOUDFLARE_TUNNEL_TOKEN
は、1. で控えておいた token を書いてください。
以下のようになっていれば、OK です。
#*dev
# NEXT_PUBLIC_API_URL=http://127.0.0.1:8000
#*pre
# NEXT_PUBLIC_API_URL=http://127.0.0.1:8000
#*production
NEXT_PUBLIC_API_URL=http://127.0.0.1:8000
CLOUDFLARE_TUNNEL_TOKEN=<控えておいたtokenを書きます。>
#*dev
# NEXT_PUBLIC_API_URL=http://127.0.0.1:8000
#*pre
# NEXT_PUBLIC_API_URL=http://127.0.0.1:8000
#*production
NEXT_PUBLIC_API_URL=http://127.0.0.1:8000
-
docker compose -f prod.docker-compose.yaml up -d
を実行します。
-
このコマンドで、コンテナのビルドから起動までします。
-
cloudflare tunnel のコンテナ・バックエンドのコンテナ・フロントエンドのコンテナの計 3 つが起動します。
Finish!
.env
ファイルを作成し、.env.pre.example
を参考に適切に環境変数を設定します。
-
.env
ファイルは、gen_dotenv.cmd
(Windows 環境の場合)かgen_dotenv.sh
(Linux 環境の場合)を実行することで生成できます。 -
NEXT_PUBLIC_API_URL
は、.env.pre.example
に書いている情報をそのまま使ってください。
以下のようになっていれば、OK です。
#*dev
# NEXT_PUBLIC_API_URL=http://127.0.0.1:8000
#*pre
NEXT_PUBLIC_API_URL=http://127.0.0.1:8000
#*production
# NEXT_PUBLIC_API_URL=http://127.0.0.1:8000
# CLOUDFLARE_TUNNEL_TOKEN=
#*dev
# NEXT_PUBLIC_API_URL=http://127.0.0.1:8000
#*pre
NEXT_PUBLIC_API_URL=http://127.0.0.1:8000
#*production
# NEXT_PUBLIC_API_URL=http://127.0.0.1:8000
- CORS に関する適切な設定をします。
productionApi(本番環境で使う Web API)の設定には、不十分な設定の状態の箇所があります。
Caution
Access-Control-Allow-Origin の設定を、"*"からフロントエンドを配信するのに使用しているオリジンに変更してください。
オリジン名を「https://gen-img.example.hogehoge」とした場合は、以下のように設定します。
res$setHeader("Access-Control-Allow-Origin", "https://gen-img.example.hogehoge")
現在の CORS の設定は、以下のようになっています。
/backend/productionApi/plumber.R
#* @filter cors
cors <- function(req, res) {
res$setHeader("Access-Control-Allow-Origin", "*")
if (req$REQUEST_METHOD == "OPTIONS") {
res$setHeader("Access-Control-Allow-Methods", "GET")
res$setHeader(
"Access-Control-Allow-Headers",
req$HTTP_ACCESS_CONTROL_REQUEST_HEADERS
)
res$status <- 200
return(list())
} else {
plumber::forward()
}
}
docker compose -f pre.docker-compose.yaml up -d
を実行します。
-
このコマンドで、コンテナのビルドから起動までします。
-
バックエンドのコンテナ・フロントエンドのコンテナの計 2 つが起動します。
Finish!
ウェブアプリへのアクセス
http://127.0.0.1:3000/
storybook が生成したカタログへのアクセス
http://127.0.0.1:6006/
[!NOTE] >
Node.js
・npm
・yarn
が必要です。
.env
ファイルを作成し、.env.dev.example
を参考に適切に環境変数を設定します。
-
.env
ファイルは、gen_dotenv.cmd
(Windows 環境の場合)かgen_dotenv.sh
(Linux 環境の場合)を実行することで生成できます。 -
NEXT_PUBLIC_API_URL
は、.env.dev.example
に書いている情報をそのまま使ってください。
以下のようになっていれば、OK です。
#*dev
NEXT_PUBLIC_API_URL=http://127.0.0.1:8000
#*pre
# NEXT_PUBLIC_API_URL=http://127.0.0.1:8000
#*production
# NEXT_PUBLIC_API_URL=http://127.0.0.1:8000
# CLOUDFLARE_TUNNEL_TOKEN=
#*dev
NEXT_PUBLIC_API_URL=http://127.0.0.1:8000
#*pre
# NEXT_PUBLIC_API_URL=http://127.0.0.1:8000
#*production
# NEXT_PUBLIC_API_URL=http://127.0.0.1:8000
backend/developmentApi
で以下のコマンドを実行します。
※yarn dev
で Web API をローカルサーバーで起動します。
- バックエンドで使用するパッケージマネージャー: yarn
※ バックエンドのローカルサーバーも起動しておかないと、画像生成の機能がうまく動作しません。
(現在はポートが 8000 で、ダミーのデータを返すようにしています。)
yarn
yarn dev
frontend
で以下のコマンドを実行します。
- フロントエンドで使用するパッケージマネージャー: npm
npm i
→ Web App を起動する場合、frontend
で以下のコマンドを実行します。
※npm run dev
で Web App をローカルサーバーで起動します。
npm run dev
ウェブアプリへのアクセス
http://127.0.0.1:3000/
→ Storybook のカタログを見る場合、frontend
で以下のコマンドを実行します。
※npm run dev
で Storybook のカタログを起動します。
npm run storybook
storybook が生成したカタログへのアクセス
http://127.0.0.1:6006/
Note
モデルを追加した際にテストを実行して、テストが通ることを確認してください。
テストを実行する前に、以下の部分を適宜変えてください。
frontend/src/__test__/generateImg.test.tsx
//*Web APIのURLを書く
const setCorrectUrl = "http://127.0.0.1:8000";
テストの実行コマンド
# frontendディレクトリで
npm test
or
# frontendディレクトリで
npm run test:watch
- フロントエンドのビルド
# frontendディレクトリで
npm run build
- ビルド後のものでローカルサーバーの起動
# frontendディレクトリで
npm start
以下のように、コンポーネントのカタログを見ることができます。
.env
ファイルを作成し、.env.dev.example
を参考に適切に環境変数を設定します。
-
.env
ファイルは、gen_dotenv.cmd
(Windows 環境の場合)かgen_dotenv.sh
(Linux 環境の場合)を実行することで生成できます。 -
NEXT_PUBLIC_API_URL
は、.env.dev.example
に書いている情報をそのまま使ってください。
以下のようになっていれば、OK です。
#*dev
NEXT_PUBLIC_API_URL=http://127.0.0.1:8000
#*pre
# NEXT_PUBLIC_API_URL=http://127.0.0.1:8000
#*production
# NEXT_PUBLIC_API_URL=http://127.0.0.1:8000
# CLOUDFLARE_TUNNEL_TOKEN=
#*dev
NEXT_PUBLIC_API_URL=http://127.0.0.1:8000
#*pre
# NEXT_PUBLIC_API_URL=http://127.0.0.1:8000
#*production
# NEXT_PUBLIC_API_URL=http://127.0.0.1:8000
docker compose -f dev.docker-compose.yaml up -d
を実行します。
-
このコマンドで、コンテナのビルドから起動までします。
-
storybook のためのコンテナ・バックエンドのコンテナ・フロントエンドのコンテナの計 3 つが起動します。
Finish!
ウェブアプリへのアクセス
http://127.0.0.1:3000/
storybook が生成したカタログへのアクセス
http://127.0.0.1:6006/