VSCodeでのポートフォワーディング

VSCodeはポートフォワーディング機能を提供しており、ローカルまたはリモート開発環境に外部からアクセスすることができます。この機能はテストやデバッグの目的で非常に便利です。

背景

私たちはしばしばローカル環境やリモート開発環境で開発を行いますが、これらは公にアクセスできません。しかし、状況によっては外部からローカルやリモート開発環境にアクセスする必要があります。例えば、サードパーティのサービスと統合する必要がある場合や、同じネットワーク上にないデバイスからウェブやサービスをテストする必要がある場合などです。

使用方法

まず、ローカル開発環境を起動し、サービスが実行されていることを確認します。サービスは特定のポート（例：localhost:8080）でリッスンします。

次に、VSCodeの下部パネルにある「ポート」機能を見つけます。「ポートを転送」ボタンが表示されるので、クリックして転送したいポート番号（例：8080）を入力します。

この機能を初めて使用する場合は、GitHubアカウントにサインインしてアクセスを許可するよう求められます。

MacOSを使用している場合は、VSCodeへのキーチェーンアクセスを許可するよう求められます。パスワードを入力して「許可」をクリックしてください。

数秒待つと、ポートが正常に転送されたことが表示されます。

これで転送されたURLを通じてローカル開発環境にアクセスできるようになります。例えば、ポート8080を転送した場合、https://xxx-1234.asse.devtunnels.ms（URLは異なる場合があります）を通じてアクセスできます。

ご覧のように、この転送されたURLにアクセスする際にも認証が必要です。「認証」をクリックするだけです。これはほとんどの場合の要件を満たし、ローカル開発環境のセキュリティを確保します。

しかし、APIエンドポイントやWebhookなど、認証なしで外部からローカル開発環境にアクセスさせたい場合は、VSCodeの「ポート」パネルでレコードを見つけ、右クリックして公開することができます。

注意：ローカル開発環境を外部に公開することはセキュリティリスクを引き起こす可能性があります。これを行う前にリスクを理解していることを確認してください。

最後に、作業が終わったらポートフォワーディングを閉じることを忘れないでください。

結論

この記事では、VSCodeのポートフォワーディング機能を紹介しました。この機能により、外部からローカルまたはリモート開発環境にアクセスすることができます。テストやデバッグの目的で非常に便利ですが、セキュリティリスクを引き起こす可能性があるため、ローカル開発環境を外部に公開する際は注意してください。