【実践】VSCodeでサーバ上のWEBアプリをリモートデバッグする(第1回：JavaScript編)

第1回はVSCode(Visual Studio Code)からサーバ上のWEBアプリを直接編集できる環境構築とJavaScriptのデバッグを行う。


#やりたいことイメージ

| ![構成図-crop.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1894429/91da70d6-6d91-9972-81d5-030a91eadc43.png)|
|:-:|

![WS000028.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1894429/e37f5b16-7373-8c46-ff22-c09a1d248885.jpeg)

#使用するもの
<font color="blue">ローカルホストPCにはWindows10、WEBサーバには試験機として最適なオンプレミス型の<br>[WeBBoX](https://www.offset.co.jp/webbox/index.html)を使用する。</font>

#### ローカルホストPC
    ● VSCode + 拡張機能
        ・ Remote Development
        ・ Debugger for Chrome
    ● ブラウザ(Chrome)
    ● FTPクライアントアプリ(ffftpなど)

####WEBサーバ
    ● HTTPサーバ
    ● FTPサーバ
    ● FILEサーバ
    ● SSHサーバ

####サンプルソース
```html:index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello WeBBoX</title>
    <link rel="stylesheet" href="sample.css">
  </head>
  <body>
    <p class="title">Hello WeBBoX !</p>
    <div id="area1">
      <button type="button" id="btn1">今日は何日ですか？</button>
      <br>
      <input type="text" id="tBox" class="font-main" />
    </div>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="sample.js"></script>
  </body>
</html>
```
```css:sample.css
.font-main {
  padding: 2px;
}

#btn1 {
  margin-bottom: 4px;
}
```
```js:sample.js
$("#btn1").on("click", function()  {
  let date = new Date();
  let year = date.getFullYear();
  let month = date.getMonth() + 1;
  let day = date.getDate();
  let message = `今日は${year}年${month}月${day}日です`
  $("#tBox").val(message);
});
```

:::note info
上記ソースファイル3本をコピー&ペーストして作成する。
:::

#準備
###ローカルホストPC側の準備
####1.VSCodeのインストール
MicrosoftのVisual Studio Codeサイトからダウンロードしてインストールする。

:::note info
インストールはデフォルト設定のままで構わない。
:::

インストールが完了すると日本語表示を行うための言語パックのインストール問い合わせが表示されるので「インストールして再起動」をクリックする。
![WS000003.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1894429/52e8260c-86bd-caa6-6fee-39e9fad2cf90.jpeg)

####2.VSCodeに拡張機能『Remote Development』インストール
左端のアクティビティバーにある「拡張機能」アイコンをクリックし、検索枠に"remote"と入力
![WS000005.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1894429/b4b6eb2b-77d5-2c87-73c2-3fa28f6ff469.jpeg)
検索結果が表示されるので、「Remote Development」を選択してインストールする。
![WS000006.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1894429/c6bd1e7b-f2e1-795a-9d8a-6ddda7e94415.jpeg)
Remote Developmentに関連する拡張機能も自動でインストールされる。
![WS000007.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1894429/e7eb1528-d26e-eb19-dd58-bf7a2e1cf837.jpeg)

####3.VSCodeに拡張機能『Debugger for Chrome』インストール
続けて、検索枠に"debugger for"と入力
![WS000008.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1894429/d5447467-fb9d-d71c-2a68-6463efa43fa5.jpeg)
検索結果が表示されるので、「Debugger for Chrome」を選択してインストールする。
![WS000009.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1894429/2a5a4d18-3e99-512e-4245-f0763cdbc44d.jpeg)

※ブラウザアプリChrome、FTPクライアントアプリのインストールに関する説明は割愛します。

以上でローカルホストPC側の準備は完了です。

###WEBサーバ側の準備
####1.IPアドレスを固定値に設定
WEBサーバのIPアドレスは固定値にする必要があります。
本記事では「192.168.0.203」と設定しました。

:::note info
IPアドレスはネットワーク環境に合わせて変更してください。
:::

####2.サンプルソースをWEBコンテンツフォルダーへコピー
サンプルソース3本をWEBサーバのWEBコンテンツフォルダーにFTPクライアントアプリを使ってコピーする。
本記事では「/var/www/html/sample2/」としました。


```サンプルソースのコピー先
/var/www/html/sample2/index.html
/var/www/html/sample2/sample.css
/var/www/html/sample2/sample.js
```
以上でWEBサーバ側の準備は完了です。

#サーバ上のWEBアプリを直接編集できるようにVSCodeを設定する
ローカルホストPC、WEBサーバの準備が完了したので、ここからはVSCodeからサーバ上のWEBアプリ(サンプルソースファイル)を直接編集できる環境を設定する。
作業はすべてVSCodeにて行う。

####1.VSCodeとWEBサーバを接続する

①左端のアクティビティバーにある「リモートエクスプローラー」アイコンをクリック
②「SSH Targets」を選択
③「Add New」アイコンをクリック
![WS000040.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1894429/b2aa4c22-8e96-73c8-ddcb-b527569fbe07.jpeg)

「Enter SSH Connection Command」に SSHログインユーザ名<span>@</span>WEBサーバIPアドレスを入力

```
ssh user@192.168.0.203
```
![WS000041.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1894429/20a216f6-596f-6f1b-58ea-379d0cab7808.jpeg)

「Select SSH Configuration file to update」に "C:\Users\xxx\\.ssh\config"を選択

```
C:\Users\xxx\.ssh\config
```
![WS000042.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1894429/7dff7476-e792-7893-a540-b57cc0677eb8.jpeg)

サイドバーに表示されたWEBサーバIPアドレスを選択し、「Connect to Host in New Window」アイコンをクリック
![WS000044.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1894429/dd3a74e6-52ea-b99e-e7fe-0fca1584476b.jpeg)

「Are you sure you want to continue?」に"Continue"を選択
![WS000046.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1894429/da751b86-e30b-d9e8-a09c-3548723be936.jpeg)

SSHログインパスワードを入力
![WS000047.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1894429/c247ee9e-a65f-436e-1137-2b7bbd342b17.jpeg)

####2.WEBサーバ上のコンテンツフォルダーを開く

ステータスバーが接続状態に変化したら、アクティビティバーにある「エクスプローラー」アイコンをクリックし、「フォルダーを開く」をクリック
![WS000049.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1894429/ef9f82a5-f908-31cb-abec-1dee9b064ba8.jpeg)

サンプルソースをコピーしたWEBコンテンツフォルダーを指定し、「OK」をクリック

```
/var/www/html/sample2/
```
![WS000018.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1894429/225952d8-a251-5c68-0623-90294d431892.jpeg)

SSHログインパスワードを入力
![WS000019.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1894429/bcb07c26-69bd-9bea-6217-45ecd9b61da8.jpeg)

「このフォルダー内の・・・」ダイアログが表示されたら「信頼します」を選択
![WS000020.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1894429/12c689ab-53ff-e014-f67c-cf2da8051d1f.jpeg)

サイドバーにコンテンツフォルダーのファイルツリーが表示され、エディター領域にはソースコードが表示される。
![WS000022.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1894429/099dd49a-8921-091b-ad26-cc919f2580de.jpeg)

ここまでの作業でローカルホストPC内に以下のファイルが作成される。

```/user/xxx/.ssh/config
Host 192.168.0.203
  HostName 192.168.0.203
  User user
```

```/user/xxx/.ssh/known_hosts
192.168.0.203 ecdsa-sha2-nistp256 AAAAE2VjZHNhLXNoYTItbmlzdHAyNTYAAAAIbmlzdHAyNTYAAABBBPxNmcu0BZDmnl8wei1cHguZSWnycRDIY1kPoGjyxobtKBY8UxOxMfx/osveg+in/reEMnNTtazqd2GrxtR3uxo=
```

以上で、VSCodeからサーバ上のWEBアプリ(サンプルソースファイル)を直接編集できる設定作業は完了です。

次はいよいよJavaScriptのリモートデバッグを行います。

#JavaScriptのリモートデバッグ

JavaScriptのサンプルソースsample.jsをリモートデバッグする。

####1.デバッグの設定ファイルlaunch.jsonの内容確認
①左端のアクティビティバーにある「実行とデバッグ」アイコンをクリック
②「Launch Chrome against website」を選択し、「launch.jsonを開く」アイコンをクリック
③表示されたlaunch.jsonの内容を確認する
![WS000025.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1894429/c536c960-115c-78d5-fe8c-3552e1282dab.jpeg)

```/var/www/html/sample2/.vscode/launch.json
{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against website",
            "url": "http://192.168.0.203/sample2/index.html",
            "webRoot": "${workspaceFolder}/",
            "sourceMaps": true
        }
    ]
}
```
:::note info
launch.jsonの内容にミスがあると正常にデバッグができません。
よく確認してください。
:::

確認ができたら「F5」キーでデバッグを開始する。

####2.ブラウザChromeが起動されindex.htmlが表示される
![WS000027.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1894429/15e25f1d-d49b-830c-dbef-4d5f07788e2c.jpeg)

####3.sample.jsにブレークポイントを設定
![WS000026.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1894429/d60437dd-eed0-390d-17a2-e143a482ea30.jpeg)

####4.ブラウザに表示されている「今日は何日ですか？」クリック
![WS000027.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1894429/37ccbe2a-cc13-85cf-36f6-527324d7809c.jpeg)

####5.ブレークポイントで停止
![WS000028.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1894429/7f000e88-b421-a095-0b31-a8f7524ef8aa.jpeg)

####6.ステップ実行、変数確認
![WS000029.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1894429/d62f5f32-90a8-767d-72e1-7c1cddb166ac.jpeg)
![WS000030.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1894429/24c04980-5a02-7440-16f4-6f857e250677.jpeg)


####デバッグ完了です。お疲れさまでした。

#あとがき
JavaScriptはローカルホストPCのブラウザ上で動作するので『リモートデバッグ』とは言えないかもしれませんね。。。
次回はサーバサイドで動作する言語のリモートデバッグにします。


#参考サイト
コンパクトなのに高機能　超小型のWEBサーバ『WeBBoX』
https://www.offset.co.jp/webbox/index.html

#次回予告
PHPのリモートデバッグを行うための環境構築とサンプルソースを使ったデバッグを予定しています。