Parallels を使ってクライアント・サーバー構成で開発している方はこの設定が必要になるかもしれません。
バージョンは Parallels Desktop 17 です。
ことのはじめ
以前、フロントエンドに Svelte、バックエンドに FastAPI を用いてパスワードを生成するアプリを作りました。
▶︎ https://github.com/nnamm/PasswordGenerator
動作イメージとしては下図の「1Password mini」で、スライドバーの動作に合わせてパスワードを生成します。
もちろん、パスワードを生成するだけならフロントエンド/バックエンド構成にする必要はありません。JavaScript や Python だけでできるでしょうし。
でも、今回は「フロントとバックを分けて開発したい( Web API やりたい)」ので分けてみました。バックエンドは AWS などにデプロイするテイで Kuntu on Parallels を使いました。
構成
OS | Tech stack | |
---|---|---|
Frontend | macOS | Svelte (当時は V2 系) |
Backend | Kubuntu | Kubuntu |
実際にデプロイしたら、ローカルで実行するより遅延はあるのだろうとは思いますが、「作りたいテーマであること」と「WebAPI やりたい」を優先した構成です。
起動するもリクエストがサーバーに届かない
(iTerm2 + neovim + tmux)
Svelte/FastAPI のコードを書いて、それぞれ起動していざリクエストしてみたところ・・・サーバーが反応していないぞ?
調べてみると「ポートフォワーディングしないといけない」ということがわかりました。
そりゃそうですよね。
macOS からの HTTP リクエスト(ポート 80 )を、Kbuntu でuvicorn api.main:app --host 0.0.0.0 --port 8000 --reload
したポート 8000 に渡してあげないといけませんから。
というわけで、Parallels にポートフォワーディングルールを追加します。
Parallels のポートフォワード設定方法
①設定を開きます(⌘+,
)
②ネットワーク → Shared → 「+」をクリックします
③以下を入力します
- ソースポート: macOS からのリクエストポート番号
- 転送先: VM の IP address ( VM 側の Terminal で"ip a"するとわかります)
- 宛先ポート: uvicorn で指定したポート番号
試していませんが、転送先に VM 名を指定できそうですね。
④ポートフォワーディングルールが追加されたら OK
これで動くようになりました!