1. zaki-lknr

    Posted

    zaki-lknr
Changes in title
+オフライン環境のインフラ系のエンジニアでもVS Codeを便利に使う方法
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,227 @@
+インターネットに接続できないVS Code……、インフラでオンプレな人だとまれによくある環境だと思うのですが、下記のような構成です。
+
+![VSCode Remote-Development構成図-ページ3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256859/1b73e422-9f28-22ca-1f04-9d18d9418ed6.png)
+
+こんな感じの"共用ファイルサーバー"を介したファイルのやり取り程度はできる構成で、インターネットに接続できない開発ネットワークの検証用winクライアントにVS Codeを入れたいし、そこから接続するLinuxサーバーへRemote Developmentを使って操作したい、それにはどうすればいいか、という内容です。
+
+初期設定はちょっと面倒かもしれませんが、面倒に見合う作業の効率化は得られると思うので、VS Codeのインストールなどに制限がなければぜひ導入したい構成です。
+
+2020.02.19時点の内容で、将来勝手が変わる可能性はあるので、その点はご了承ください。
+
+# VS Code本体のインストール
+
+インストーラはオフラインでも動作するので通常通り。
+[Visual Studio Code - Code Editing. Redefined](https://code.visualstudio.com/)
+公式サイトから環境に合わせてインストーラをダウンロードし、オフライン環境へインストーラをコピーし、オフライン環境でインストールすればOK
+
+# 単体で動作する拡張のインストール
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256859/05cb3470-3d5e-7e2d-2d6a-37937062ed68.png)
+
+
+## 例: 日本語化/Japanese Language Pack)
+
+普通のやりかたでは、オフライン環境のVS Codeの拡張検索が使えないため、まずオンライン環境のwebブラウザで、VisualStudioのマーケットプレイスで対象の拡張を検索します。
+([VS Code拡張のマーケットプレイス](https://marketplace.visualstudio.com/vscode)から検索しても良いですが、拡張インストール済みのVS Codeが別環境にあれば、VS Codeの拡張詳細画面からリンクするのが楽)
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256859/1ba4c943-eff1-a0b7-8da7-d3bd9b810970.png)
+
+## パッケージ(vsixファイル)の入手
+
+[Japanese Language Pack for Visual Studio Code - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja)
+
+この拡張ページの(2020.02.19時点では)右側の"Download Extension"から、拡張のパッケージファイルであるvsixファイルをダウンロードします。
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256859/73f45821-1e38-bc47-14e5-2bf198b4303e.png)
+
+## パッケージ(vsixファイル)のインストール
+
+ダウンロードできたらオフライン環境へvsixファイルをコピーし、拡張メニューの「…(more action)」を押下します。
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256859/aa9ab92c-cfd0-cd3b-ed71-6d2eb4488dc1.png)
+
+メニューの"Install from VSIX..."を押下します。
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256859/953c4b08-39f8-f629-4a23-ebce8e66c21a.png)
+
+VSIXファイルを選択するダイアログが表示されるので、オンラインからコピーしてきたインストールしたvsixファイルを選択します。
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256859/dbc7fc63-6698-5478-7f20-94c2d9fdeb66.png)
+
+選択ダイアログで"Install"ボタンを押下するとVS Codeで拡張のインストールが始まり、しばらくすると処理が完了します。
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256859/8fb8da55-fb8b-8d34-692e-335811ceee86.png)
+
+画面右下にポップアップしている"Restart Now"を押下すれば、VS Codeにインストールされた拡張がロードされ、日本語化されます。
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256859/6da15448-11b9-bae7-1eae-6926425ca61a.png)
+
+例えばubuntuデスクトップでも同様
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256859/9d993bcf-c67e-03b4-f57d-dbfbe2cd8e4b.png)
+
+とりあえずこれだけでもオフライン環境でVS Codeでコード書いたり作業ログのメモをMarkdownで書いたり便利に使えるはず。
+
+# 拡張がインターネット接続して追加コンポーネントを必要とするもの
+
+拡張自体はVS Codeへオフラインインストールできるけど、拡張が更にインターネット接続を要するものについて。
+
+__これは拡張次第なのでなんとも言えませんが__、例として、冒頭の構成図のようなインターネットに接続できないプライベートネットワーク上にあるLinuxサーバをVS Codeから便利に使うためのSSH Remote Developmentについて。
+
+## 例: Remote Development + SSH
+
+VS CodeのRemote Developmentは、接続先サーバーではユーザー権限でvscode-serverプロセスが動作しています(`ps aux | grep vscode`などで確認できる)。これは、Remote Developmentでssh接続したあと、接続先リモートサーバー上で自動でvscode-serverに必要なパッケージをVisualStudio(Microsoft)のサーバーから取得してインストールしています。
+
+![VSCode Remote-Development構成図.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256859/c5f298ce-275b-6690-5c6e-ef77395f66c6.png)
+
+ですが、オフライン環境ではvisualstudio.comへ接続できずvscode-serverの取得ができないため、この部分の処理を細工してオフライン環境のLinuxサーバーでも実行できるようにする必要があります。
+
+[【VS Code】Internet環境のないサーバでRemote Development機能を使用する方法 |  mathkuro](https://www.mathkuro.com/?p=726)
+
+こちらのサイトに詳しく載っています。
+
+## 拡張のインストール
+
+Remote DevelopmentでSSHを使うには、2つの拡張が必要なので、まずはマーケットプレイスから手動でvsixダウンロード・インストールします。
+
+- [Remote Development - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack)
+- [Remote - SSH - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh)
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256859/ba585c31-c567-614e-87fc-ddea90d8b1a1.png)
+
+## vscode-serverのパッケージを取得
+
+まず、Remote DevelopmentをインストールしたオフラインVS Codeのヘルプメニューから、"バージョン情報"を確認、"コピー(C)"を押下して、"コミット"の40桁の文字列を確認します。
+(この文字列はVS Codeのバージョンに紐づいているので、バージョンが同じであれば異なるPCにインストールしているVS Codeでも同じ値のはず)
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256859/165f5da2-1259-0a81-f999-01b466975aba.png)
+
+確認出来たら、オンライン環境で以下のURLにアクセスします。
+`https://update.code.visualstudio.com/commit:<コミットの文字列>/server-linux-<アーキテクチャ>/stable`
+
+コミットの値が`c47d83b293181d9be64f27ff093689e8e7aed054`で(VS Code 1.42.1)、接続先Linuxサーバーが64ビットの場合であれば、以下のURLになります。
+https://update.code.visualstudio.com/commit:c47d83b293181d9be64f27ff093689e8e7aed054/server-linux-x64/stable
+
+webブラウザでアクセスすると`vscode-server-linux-x64.tar.gz`がダウンロードされます。
+
+## (a)接続先ネットワークでwebサーバーを用意できる場合
+
+接続先ネットワーク上にファイルを自由におけるwebサーバーを用意できる場合、特にRemote Developmentで接続するサーバーが複数ある場合はこちらの構成が使いやすいと思います。
+
+![VSCode Remote-Development構成図-ページ2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256859/9047d9ec-9f1b-9341-f270-a759b9c6419e.png)
+
+### vscode-server-linux-x64.tar.gzの配置
+
+Remote Developmentで接続するサーバーからアクセスできるプライベートネットワーク内の任意の場所に、ファイルを配置します。
+`curl`等でアクセスできればOKです。
+
+httpサーバーのインストールができなくても、`python`を使って簡易webサーバーを使えるのであれば、そちらでもOKです。
+
+[インフラ系エンジニアが唯一覚えるべきPythonの使い方 - Qiita](https://qiita.com/zaki-lknr/items/c4b0a596890dff7ffec6)
+
+### VS Codeのextensionを改造
+
+デフォルトでは`update.code.visualstudio.com`からvscode-serverをダウンロードするようになっているため、この処理を書き換えます。
+
+1. VS Codeの以下のファイルを開く
+
+`%USERPROFILE%\.vscode\extensions\ms-vscode-remote.remote-ssh-<version>\out\extension.js`
+
+`<version>`は、使用中のRemote - SSHのバージョンに合わせてください。
+
+2. `wget`/`curl`でパッケージをダウンロードしている処理のURLを編集する
+
+ファイル内を文字列検索し、`https://update.code.visualstudio.com/commit:$COMMIT_ID/server-linux-$VSCODE_ARCH${u?"-web":""}/${r}`となっている箇所(`wget`と`curl`の2か所あります)を、プライベートネットワーク内に配置した`vscode-server-linux-x64.tar.gz`のURLに書き換えます。
+`${...}`に囲まれた変数名などはバージョンによって異なる場合があります。
+
+URLが`http://172.29.0.22:8080/vscode-server-linux-x64.tar.gz`であれば、以下の2か所
+
+- `$(2>&1 wget ${function(e){return e?"--tries=1":""}(!!d)} --connect-timeout=7 --dns-timeout=7 -nv -O vscode-server-linux-$VSCODE_ARCH.tar.gz http://172.29.0.22:8080/vscode-server-linux-x64.tar.gz)`
+- `$(curl --connect-timeout 7 -L http://172.29.0.22:8080/vscode-server-linux-x64.tar.gz --output vscode-server-linux-$VSCODE_ARCH.tar.gz -w "%{http_code}")`
+
+準備はこれで完了です。
+あとは通常のRemote Developmentの使い方と同じです。
+
+この設定が行われているVS CodeでRemote DevelopmentでSSHを使用すると、通常のvisualstudio.comへのアクセスでなく、172.29.0.22:8080から`vscode-server`をダウンロードするようになり、プライベートネットワーク内でもRemote Developmentが使用できます。
+
+以下のようにRemote Developmentの接続先が増えても、追加設定が発生しないのがこの構成のメリットです。
+
+![VSCode Remote-Development構成図-ページ2 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256859/bc24fd9f-2346-dc76-a020-85a887defc4e.png)
+
+## (b)vscode-serverパッケージをネットワーク内で共有できない場合
+
+Remote Developmentの接続対象1台ずつコピーし、`wget`/`curl`で取得している処理を、URLの書き換えでなくコマンド自体を`cp`に書き換えて、ローカルコピーすれば動作します。
+
+[【VS Code】Internet環境のないサーバでRemote Development機能を使用する方法 |  mathkuro](https://www.mathkuro.com/?p=726#5)
+
+> 置換する文字列
+> `wget ${function(e){return e?"--tries=1":""}(!!h)} --connect-timeout=7 --dns-timeout=7 -nv -O vscode-server-linux-$VSCODE_ARCH.tar.gz https://update.code.visualstudio.com/commit:$COMMIT_ID/server-linux-$VSCODE_ARCH${l?"-web":""}/${n}`
+>
+>
+> 置換後の文字列
+> `cp /"vscode-serverのパス"/vscode-server-linux-x64.tar.gz .`
+
+Remote Developmentで接続するサーバーの数が1台であれば設定量が少ないので楽かもしれません。
+
+# アップデートについて
+
+VS Codeの新しいバージョンがでてアップデートしたい場合は、新しいバージョンのインストーラをオフライン環境にコピーして上書きインストールすればOKです。
+
+ただし、拡張がVS Codeのバージョンに依存しているものもあり、Remote Developmentに使用するvscode-serverなど含め、拡張のアップデートも必要な場合があるので必要に応じてバージョンアップすること。
+
+また、VS Codeのバージョンは据え置きで、インストールから期間がたってから追加の拡張をvsixファイルでオフラインインストールしようとすると、拡張側のバージョンが新しすぎてVS Code本体のバージョンアップが必要というパターンもあるので注意。
+
+---
+
+おまけ (Remote Development使ったことない人向け)
+
+# Remote Development + SSH チュートリアル
+
+オフライン環境のvscode-serverの設定ができていれば、後は通常の使用方法と同じです。
+最近のWindows10はデフォルトで`ssh`がインストールされているので、その前提(入っていない場合は別途インストールが必要)です。
+
+```
+PS C:\Users\zaki> ssh -V
+OpenSSH_for_Windows_7.7p1, LibreSSL 2.6.5
+```
+
+まずリモートアクセスを起動する。
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256859/a4d7472c-5914-0da9-b0cc-e67162510c3b.png)
+
+初接続であれば、`Remote-SSH: Connect to Host`を選択。
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256859/2a9cdd69-3781-0182-4491-54d97410469a.png)
+
+`+ Add New SSH Host...`を選択。
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256859/b8b7dbf9-7f62-dcda-cddc-3a7ed1bbf2df.png)
+
+実行する`ssh`のコマンド・引数をフルで入力。
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256859/c7620c8a-a49f-1ae4-b123-5d325ef8243c.png)
+
+接続設定の保存先を選択する。(私はいつも`C:\Users\<username>\.ssh\config`を選択)
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256859/26ca0693-2819-aef8-7911-a783c737084e.png)
+
+設定が保存されるとポップアップが出るので、そのまま"Connect"押下。
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256859/687cb93a-86ef-8a72-834a-7c66321c74fa.png)
+
+初めての接続先であれば確認が出るので`Continue`する。
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256859/c93adc64-f7a0-a296-055a-115ae4c44c48.png)
+
+公開鍵を設定していなければパスワード認証になるので、パスワードを入力する。
+※セキュリティ上問題がなければ、パスフレーズ無しの公開鍵を設定すると格段に操作が楽になります。
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256859/dc8c1e8d-ffe5-9e10-305f-d1713012e271.png)
+
+接続に成功し、vscode-serverのダウンロードと実行にも成功すれば、サイドにリモートエクスプローラーのアイコンが追加されます。
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256859/0d471054-877e-b8bd-1c4d-124165964627.png)
+
+あとはCtrl-pでターミナルを起動すれば通常のsshアクセスと同じようにbashシェルなどが使えるし、VS Code上でエクスプローラーでリモートのファイルシステムを開けば、VS Code上でファイルの新規作成や編集などローカル作業と同じようにファイル編集できるので(オフラインのために色々な便利なものを封印されている環境でも)とても便利に作業できます。
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256859/153fc2cc-dc31-5125-a699-6fefa3c15f53.png)