[VSCode] code-serverでLive Serverを動かす

2024年6月5日synology

はじめに

先日Synology NAS内のContainer Manager（Docker）にcode-serverを入れて、ブラウザ上からSynology NAS内のvscodeにアクセスできるようにした。

（code-serverの導入方法は省略）

html/css/javascriptファイルなどを更新した時、リアルタイムで挙動を確認できるVSCodeの拡張機能「Live Server」がとても便利。
しかし、code-server（ブラウザ上）ではLive Serverが動作しない問題があった。

• 表示を確認したいファイル「index.html」が開かない！



• ブラウザ版VSCode上で実行したLive ServerでのURL構成

http(s)://[Live Serverで指定されたポート].[code-serverの名前].[ドメイン名]

• Windowsクライアント上で実行したLive ServerでのURL構成

http://[127.0.0.1 または localhost]:[Live Serverで指定されたポート]/[フォルダ]/[確認したいファイル]

そもそも「Live Server」はローカル環境にサーバを立てて表示確認を行うヤツである。
ブラウザ版VSCodeは『VSCodeをインストールしていなくてもブラウザを開けばプログラミングできる』という強みがあるので、ローカル環境だのをイジくる「Live Server」は使えない。

• もうひとつのブラウザ版VSCode「vscode.dev」ではLive Serverがインストールできない

でもでもでもでも
どうしてもcode-serverでLive Serverを使いたい！
「Remote Tunnels」は知らん。

対処法

1. code-server版VSCodeを開く
2. 拡張機能「Live Server」をインストールする
3. Live Serverの右下にある歯車マークをクリックして「拡張機能の設定」を選択
4. 「Live Server › Settings: Host」を探す
5. 「127.0.0.1」→「[code-serverの名前].[ドメイン名]/proxy/」に変更
   例: codeserver.baikin.net/proxy/
6. Synology NAS内のContainer Manager（Docker）フォルダを開く
7. code-serverをインストールしたフォルダを開く
8. 「extensions」フォルダを開く
9. 「ritwickdey.liveserver-●●」フォルダを開く
10. 「out」フォルダを開く
11. 「src」フォルダを開く
12. ファイル「appModel.js」を開き、「${host}」の後ろにある「:（コロン）」を消して保存する

        else if (params[0] && params[0].startsWith('microsoft-edge')) {
            params[0] = `microsoft-edge:${protocol}://${host}:${port}/${path}`;
        }
        try {
            require('opn')(`${protocol}://${host}:${port}/${path}`, { app: params || [''] });
        }
        catch (error) {
            this.showPopUpMsg(`Server is started at ${host}:${this.runningPort} but failed to open browser. Try to change the CustomBrowser settings.`, true);
            console.log('\n\nError Log to open Browser : ', error);
            console.log('\n\n');
        }

13. 確認したいファイルを右クリックして「Open with Live Server」を選択
14. Live Serverが起動する
    URL構成

http(s)://[code-serverの名前].[ドメイン名]/proxy/[Live Serverで指定されたポート]/[フォルダ]/[確認したいファイル]