【VSCode】ローカル環境で開発したサービスを簡単に外部公開できる「Local Port Forwarding」の使い方

1. VSCodeでGitHubアカウントでログインする

VSCodeを起動し、アカウントボタンをクリックして、GitHubアカウントでログインします。ログイン済みの場合は下図の様になります。もしまだログインしていないようでしたら「Backup and Sync Settings…」をクリックして、GitHubアカウントでログインしてください。

これで基本的には準備は完了です。

1. プロジェクトの作成

ローカルで開発しているアプリケーションを起動します。今回は、ローカルで起動したNode.jsを外部公開してみます。次のコマンドを実行してNode.jsプロジェクトを作成します。

コマンド実行

mkdir node-app
cd node-app
npm init -y
npm install express
code .

2. サーバーの作成

次のコードをindex.jsに記述します。

index.js

const express = require('express')
const app = express()
const port = 8080
app.get('/', (req, res) => res.send('Hello World!'))
app.listen(port, () => console.log(`listening at http://localhost:${port}`))

3. サーバーの起動

次のコマンドを実行して、サーバーを起動します。

コマンド実行

node index.js

4. ブラウザでアクセス

ブラウザでhttp://localhost:8080にアクセスして、Hello World!が表示されることを確認します。

1. Local Port Forwardingの設定

VSCodeのTerminalエリアにある「PORTS」をクリックして「Local Port Forwarding」の設定を開きます。

下図の箇所に公開したいローカル環境のポート番号を入力します。今回は8080を入力します。

初回はGitHubアカウントでの認証が必要です。次のような画面が表示されたら「Authorize Dev Tunnels」をクリックします。

2. ローカル環境の外部公開

次のように「Forwarded Address」の箇所にURLが表示されます。このURLにアクセスすると、ローカル環境で起動したサービスにアクセスできます。

• https://<ランダムな文字列>-<ポート番号>.asse.devtunnels.msの形式でURLが表示されます。

1. ブラウザでアクセス

ブラウザを開いて、生成されたURLにアクセスします。

• https://<ランダムな文字列>-<ポート番号>.asse.devtunnels.ms

2. GitHubアカウントでログイン

初回のアクセス時にはGitHubアカウントでのログインが必要です。次のような画面が表示されたら、GitHubアカウントでログインしてください。

3. アクセス確認

次のようにMicrosoftの画面が表示され開発者トンネルにアクセスする確認の画面が表示されます。「続行」をクリックします。

次のようにローカル環境で起動したサービスにアクセスできることを確認します。以降は、このURLにアクセスするとローカル環境で起動したサービスにアクセスできます。

1. Local Port Forwardingの停止

VSCodeのTerminalエリアにある「PORTS」をクリックして「Local Port Forwarding」の設定を開き、さきほど設定したポート番号の箇所にある「x」ボタンをクリックします。

これで外部公開が停止されます。