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

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」は使えない。

でもでもでもでも
どうしても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}」の後ろにある「:(コロン)」を消して保存する
  13. 
            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');
            }
    
  14. 確認したいファイルを右クリックして「Open with Live Server」を選択
  15. Live Serverが起動する
    URL構成
  16. http(s)://[code-serverの名前].[ドメイン名]/proxy/[Live Serverで指定されたポート]/[フォルダ]/[確認したいファイル]