VSCodeのリモート接続機能を活用したLinux Ansibleコード開発

## はじめに
WindowsやMacであれば、JavaやPython等のプログラムを書いたり、IaC(Infrastructure as Code)のコードを作成する場合、VSCode等の統合開発環境を使うことが多いかと思います。
一方で、Linuxの場合は、SSH(Secure Shell)接続をしたターミナルで作業をすることが多く、Linuxのデスクトップ環境を使用することは少ないかなと思います。その場合、コード作成をする際に使用が見込まれるエディタは限られており、統合開発環境を使用するよりも生産性が下がるのではと考えます。
今回、筆者の環境において、Windows PCで使用しているVSCode上で、VSCodeのリモート接続機能を使用して自身のLinux環境と接続して作業することができるようになりましたので、ご紹介いたします。

## Linuxで使用する代表的なエディタ
SSH接続をしたターミナルで作業する場合、使用する代表的なエディタは下記の2つかなと思います。

### viエディタ
全ての作業がキータッチのみでできてしまう昔からある有名なエディタです。ただ、これを使用するには慣れが必要で、短いコードならともかく、長いコードを書くには不便かと思います。また、Linux初心者の方が一番拒否反応を起こしやすいエディタではないかと個人的に思います。下記がサンプルになります。
![p20.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1567099/6722544f-cd9d-42d5-532b-354825fcce76.jpeg)
そういう私もそこまで使いこなしてるわけでは全然ないです。。

### nanoエディタ
こちらはviエディタよりは個人的に使いやすく活用しています。UNIXを使用されていた方は、よくご存じのmuleやemacsといったエディタに近いものです。下記がサンプルになります。画面真下にある選択項目は全てCtrlキーを押しながら選択します。
![p21.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1567099/b07a9f1a-31f6-9ae3-0fc6-df7a161d579c.jpeg)
ただ、見ての通り、文字の色が単一であることから、どれが変数で設定値なのかが、パッと見わかりずらく、これもコード開発には向かないかと思います。

## VSCodeにおけるリモート接続機能の活用
### 活用に至った経緯
私自身IaCが好きで、terraformやAnsible等のコードをよく書いてます。
* terraform
  * HashiCorp社が提供しているIaCツールです。Windows、Linux、mac OSで実行可能。 
    https://www.terraform.io/

* Ansible
  * RedHat社が提供しているIaCツールです。terraformと異なり、Windowsでは実行できません。
  * Linuc Level2の認定試験でも問われるツールであり、覚えておいて損はないです。
  https://www.ansible.com/

今回、VSCodeにおけるリモート接続機能を使ってみたいと思ったのは、下記の理由からです。
* Windows PC上のVS CodeでAnsibleコード作成をしたい。
* 作成したAnsibleコードを直接Linux上で実行したい。(SCPでファイルのやり取りなどはしたくない。)

### VSCodeリモート接続機能
#### 前提
当機能を使用するための前提は下記の2点です。
* 接続先LinuxとのSSH接続ができること
* 使用するVSCodeに「Remote - SSH」拡張機能がインストールされていること

参考にしたサイトは下記になります。

https://code.visualstudio.com/docs/remote/ssh


#### 接続先の追加
上記「Remote - SSH」拡張機能がインストールされると、下記画面の右側赤枠箇所のようなアイコンが表示されるようになります。
![p6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1567099/5c3d7b6c-8b86-75fc-a33a-bfeb8ebdde54.jpeg)
この赤枠アイコンをクリックすると、リモート(トンネル/SSH)画面が表示されます。その画面の中にあるSSHと記載の行にある右側の「＋」をクリックし、新規の接続先を追加します。
![p7.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1567099/0ff0bd27-8150-0cb8-0568-33e5409a9798.jpeg)
画面真ん中にLinuxとSSH接続するためのSSHコマンドを入力し、Enterキーを押下します。すると、「更新するSSH構成ファイルを選択する」ように言われますので、ここでは一番上のファイルを選択します。
![p8.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1567099/fc44d8fd-c747-12d6-5001-14862a37e31a.jpeg)
これにより接続先の情報が登録されるので、画面右下の赤枠箇所の「構成を開く」ボタンを押下します。
![p9.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1567099/8d3a45e1-ae4f-c599-518d-e714d38f8bf2.jpeg)
追加された情報は下記画面における赤枠箇所になります。
![p10.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1567099/89bd8f26-e68c-9bca-cdcf-e444a3e40f5e.jpeg)
無事接続先の登録が完了し、「リモート(トンネル/SSH)」画面上にも赤枠箇所が追加されていることがわかります。
![p11.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1567099/47454f1d-262f-a41c-1138-471d66b8a3f0.jpeg)

#### 接続開始
上記画面の赤枠箇所の右側に表示されている「→」ボタンを押すと現在のVSCode Windowを使用してLinuxとの接続が可能です。ここではこちらを選択します。

![p12.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1567099/34054720-adc7-53e2-b01c-800de7c64ca6.jpeg)
接続先のパスワードを聞かれるので、パスワードを入力し、Enterキーを押下します。この後、接続先のLinuxではVSCodeサーバーと呼ばれる機能のセットアップが行われ、自身のホーム・ディレクトリ直下に「.vscode-server」と言う名前のフォルダが作成されます。
```
testuser@Ubuntu-Server:~/.vscode-server$ ls -l
合計 20192
drwxrwxr-x 3 testuser testuser     4096  3月 28 18:47 bin
drwxrwxr-x 3 testuser testuser     4096  3月 28 18:40 cli
-rwxrwxr-x 1 testuser testuser 20656824  3月  8 23:30 code-863d2581ecda6849923a2118d93a088b0745d9d6
drwx------ 8 testuser testuser     4096  3月 28 18:47 data
drwx------ 3 testuser testuser     4096  3月 28 18:40 extensions
```

接続が成功すると、下記のような画面が表示されます。
![p13.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1567099/285df939-74e8-f92c-f48a-9d0c10f77b55.jpeg)
リモート(トンネル/SSH)画面において、「接続済み」となっていることを確認します。以降は、「ファイルを開く」や「フォルダを開く」といった項目をクリック(「ファイル」メニューからも同様の作業が可能です。)すれば、接続先Linux環境のフォルダやファイルを参照、新規作成することが可能になります。また、Linuxのターミナル(コマンドライン)も使用できるようになります。

### VSCode利用イメージ
以下は、VSCodeのリモート接続機能を使用して、Ansibleのコードを書いた場合のサンプルです。
![p4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1567099/81e1a8e5-b31b-5488-711b-eeb69ee6978e.jpeg)
LinuxにVSCodeをインストールする必要も無く、普段のWindows PCのVSCodeと同じ機能を使用してコードを作成、実行できるので非常に便利になりました。

## さいごに
今回は、Windows PC上で使用しているVSCode上で、VSCodeのリモート接続機能を使用して自身のLinux環境と接続してコード作成を行うためのセットアップなどをご紹介しました。xxx.conf等の構成ファイルを参照・編集する程度であれば、viエディタやnanoエディタで十分だと思いますが、プログラムやIaCのコード等を作成する場合には、やはりVSCode等の統合開発環境を使用した方が効率的ですし生産性も上がるかと思います。
今後は、Ansibleのコードを作成する際には、このVSCodeリモート接続機能をおおいに活用していきたいと思います。