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
これで動くようになりました！