More than 1 year has passed since last update.

WSL2にブラウザからアクセスする

Posted at 2023-12-29

お疲れ様です。秋並です。

今回は、ブラウザ上からWSL2にアクセスする手順について解説したいと思います。(jupyter labのようなイメージ)

正確には、下図のように

という流れになります。

事前条件

WSL2+ubuntuがインストールされており、使用できる状態になっている。
参考サイト：WSL2のインストールを分かりやすく解説【Windows10/11】

最初に、以下サイトよりCLI版のvscodeをダウンロードしてください。
https://code.visualstudio.com/Download

次に、ダウンロードしたファイルを解凍すると、「code」という名前の実行ファイルが出力されるので、WSL2上の任意のディレクトリにコピーしてください。

WSL2上で

explorer.exe .

と入力すると、エクスプローラでWSL2上のディレクトリを開くことができるので、

今回のようなちょっとしたファイルを windows → WSL2 にコピーするときに便利です。

（もちろん、cpコマンドによりコピーすることもできます）

先ほどコピーしてきた「code」があるディレクトリ上で、下記コマンドを実行することで、CLI版のvscodeを起動します。

./code serve-web --without-connection-token --accept-server-license-terms

この状態で、ブラウザから localhost:8000 にアクセスすると、下図のようにvscodeの画面が表示されます。

ここで、ターミナルに表示されているユーザー名を確認していただくと、WSL2で設定したユーザー名になっており、ブラウザからWSL2にアクセスできていることが分かると思います。

ここまでで、ブラウザからWSL2にアクセスすることは可能になりましたが、PCを起動するたびに上記のコマンドを実行するのは少々面倒なので、パソコン起動時に自動でサーバーが起動するようにしたいと思います。

1．最初に、windows上で「タスクスケジューラ」を起動してください。
起動が完了したら、「基本タスクの作成」をクリックします。

2．「タスクの名前」を設定します。名前はご自身が分かりやすい任意の名前でOKです。

3．「トリガー」を設定します。「ログオン時」を選択してください。

4．「操作」を設定します。「プログラムの開始」を選択してください。

5．最後に、プログラムを下記のように設定します。

「プログラム/スクリプト」：wsl.exe
「引数の追加（オプション）：cd ＜「code」があるディレクトリまでのパス＞; ./code serve-web --without-connection-token --accept-server-license-terms

＜codeがあるディレクトリまでのパス＞はご自身の環境に合わせて置きかえてください。

上記でサーバーの自動起動の設定は完了です。

PCを再起動した際も、localhost:8000にアクセスできることを確認してみてください。

上記の設定の場合、「ACアダプタに接続されているときのみ」タスクが実行されるので、常にタスクを実行したい場合は、設定を変更しておくとよいと思います。

（下図の「コンピュータをAC電源で使用している場合のみタスクを開始する」のチェックを外す）

今回は、

について解説しました。

ブラウザからローカルのWSL2にアクセスできることにどれだけ需要があるかわかりませんが、この記事が少しでも皆さんのお役に立てれば幸いです。