リモート先で起動させたdevcontainerの特定コンテナにポートフォワードする手順

探し方が悪いのか、リモート先で起動させたdevcontainerの特定コンテナにブラウザアクセス方法が見つからず、
いろいろ触ってわかったので、忘れないように残しておく。

まず、作業マシンのvscodeからリモートのマシンにホスト接続してdevcontainerを起動する。 (ここまでの手順については割愛)

ここでリモート先のdevcontainer設定は以下の通りとする。 .devcontainer/devcontainer.json

{
    "name": "sample",
    "dockerComposeFile": ["../docker-compose.yml", "docker-compose.yml"],
    "service": "dev",
    "workspaceFolder": "/workspace/sample",
}

docker-compose.yml

version: '3'
services:
  nginx:
    image: nginx:latest
    container_name: nginx
    hostname: nginx
    ports:
      - "80:80"

.devcontainer/docker-compose.yml

version: '3'
services:
  dev:
    image: ubuntu
    container_name: dev
    hostname: dev
    volumes:
      - ./:/workspace/sample
    command: sleep infinity

devコンテナ内でコード書いて、nginxコンテナ上で公開しているシンプルな構成

ここから作業マシンのブラウザでリモートのnginxコンテナに接続させる。
手順は以下の通り、

コマンドパレットを起動して(macならcmd + shift + p)、「Forward a port」を選択
入力フォームに接続したいコンテナ名とポートを入力
今回の例だと「nginx:80」と入力

ここまでで一旦、作業マシンのブラウザでlocalhostと入力するとnginxコンテナのトップページが表示されるようになる。

ローカルの80以外でフォーワードさせたい場合は、
vscodeのポートタブを開いて変更したい設定を右クリック、メニューから「Change Local Address Port」を選択して、
ポート番号を入力することでポート変更できる。

以上