はじめに

以下のサイトでGCPでホストしているVoicevoxにブラウザから音声を取得しようとしたらCORS制限ではじかれた。
そのため、設定を変えたDocker Imageをアップロードして対処したので手順を忘れないようにメモ

環境変数などで設定できる方法があれば知りたい
ソースも少し読んだけどなさそうだった

※自己責任でお願いします

VoiceVoxとChatGPT、VRoidのモデルを使ったAI会話のサイト

null

手順

1. ローカルにDocker上でVoicevoxを構築する
2. ブラウザからCORSの設定を変更する
3. 設定を変更したコンテナからDockerのImageを作成
4. Docker ImageをArtifact Registryにpushする
5. CloudRunでpushしたImageをデプロイする

1．ローカルにDocker上でVoicevoxを構築する

まずローカルのDockerにVoicevoxを構築する

公式を参考にして構築する。コンテナを削除しないように --rm は削除する。

docker pull voicevox/voicevox_engine:cpu-ubuntu20.04-latest
docker run --name voicevox -p 50021:50021 voicevox/voicevox_engine:cpu-ubuntu20.04-latest

2.ブラウザからCORSの設定を変更する

起動後、http://localhost:50021/settingにアクセスすると設定画面が表示される

すべて許可する

CORS Policy Modeをlocalappsからallに変更

特定のドメインのみ許可する

Allow Originにプロトコルから入力する。
例 https://dev.hy-clear.com

保存ができたらコンテナを停止しておく。
削除しないように注意

3.設定を変更したコンテナからDockerのImageを作成

commitコマンドを使用してDockerのイメージを作成する。
Artifact Registryで使えるように名前を以下のようにする。

<リージョン>-docker.pkg.dev/<プロジェクト名>/<コンテナ名>/<イメージ名>:<タグ>

今回は東京リージョンに設定したので以下のようにした

asia-northeast1-docker.pkg.dev/<プロジェクト名>/voicevox/voicevox-custom:latest

docker ps -a でコンテナのIDを調べてcommitで上記の名前のイメージを作る

docker ps -a

docker commit containerId imageName

4.Docker ImageをArtifact Registryにpushする

pushを行う前にArtifact Registryとgcloud CLIの設定が必要
Artifact Registryのコンテナを作成するときは作ったイメージに合わせる
以下のサイトなど参考

準備ができたらgloudのコンソールを開いてログインする

gcloud auth login

リージョンを使用できるように設定する。今回は東京リージョン(asia-northeast1-docker.pkg.dev)で設定している。

gcloud auth configure-docker asia-northeast1-docker.pkg.dev

3.で設定したイメージをpushする。２GBくらいあるので少し待つ

docker push asia-northeast1-docker.pkg.dev/<プロジェクト名>/voicevox/voicevox-custom:latest

5.CloudRunでpushしたImageをデプロイする

あとはCloudRunでコンテナイメージをArtifact Registryから選択して設定する。
CloudRunの設定は省略