【VSCode】Remote-SSH で SSH 接続【VirtualBox】

web

こんにちは、なかだ(@newNakata)です。

LAM(P)P環境もでき、テキストエディタも用意できました。
せっかくなら作成するファイル(プログラムなど)も全て仮想環境の中に置いて(作って)しまいましょう。
本稿では VSCode を使って PC から仮想サーバへ接続し、そこで簡単な PHP プログラムを書いてみたいと思います。

仮想サーバ(VirtualBox)を起動

最初に VirtualBox を立ち上げて仮想サーバを起動しましょう。
本稿では過去に投稿した 【VirtualBox】開発環境を作る – OS編 【CentOS】 を使用します。
2年も前の CentOS 環境ですが気にしない!
この度の仮想サーバの情報は以下の通りです。

IP アドレス 192.168.56.102
ログインID root
パスワード rootroot

以上を元に本稿は記載していきますので、ご自身の環境に適宜置き換えて頂ければと思います。

Remote-SSHインストール

早速 VSCode に拡張機能である Remote-SSH をインストールしていきましょう。
VSCodeを立ち上げて左メニューにある拡張機能アイコンをクリックします。

そうすると前回の投稿(【コードエディタ】VSCode導入【オススメ拡張機能】- インストール)でインストールした日本語化の拡張機能がインストール済みとして表示されているかと思います。
その上部、検索入力欄に remote と入力すると候補が表示されます。

Remote – SSH 項目のインストールボタンをクリックするとインストールが開始されます。

Remote – SSH と一緒に Remote – SSH: Editing Configuration Files、Remote Explorer の2つが一緒にインストールされます。
この2つについて詳しくは割愛しますが、Remote – SSH の関連拡張機能くらいの認識で大丈夫です。
インストールが完了すると左メニューにコンソールアイコンが表示され、画面左下に青く >< が表示されます。
これでインストールは完了です。

接続設定

次は仮想サーバとの接続設定をしていきます。

赤枠の PC アイコンをクリックするとメニューが表示されます。
次に緑枠にマウスを持って行く(またはクリック)と右にアイコンが表示されます。
設定は青枠のカギマークから行うため、クリックします。

コマンドパレットに作成するSSH構成ファイル候補が出ます。
今回は users 以下に作成する事にしますが、ファイル作成場所は任意です。
このファイルは基本的にお使いのPCに作成します。

指定の場所に config ファイルが作成されます。
初めて作成する場合は画像のように初期値が表示されるので以下の様に編集します。

Host nakadalog
    HostName 192.168.56.102
    User root

編集が終わったらファイルを保存してください。

エクスプローラーのリモート項目にマウスカーソルを持って行くかまたはクリックすると更新ボタンが表示されるのでクリックします。
するとSSH接続リストに config に入力した Host 名が表示されます。
表示されない場合は SSH 項目が折りたたまれて無いか確認してください。
折りたたまれている場合は SSH の左側にあるアイコンが になっています。

また SSH項目の右に出る アイコンをクリックすると本設定と同じ事ができます。
その場合は アイコンをクリックして表示されるコマンドパレットに root@192.168.56.102(ログインユーザー@接続先サーバIPアドレス) と記述します。
エンターを押下すると config ファイルに情報が追記されます。

接続設定(詳細)

本稿で用意している仮想サーバは前項目の接続設定の操作で接続できます。
ここでは押さえておけば困らない設定を記載しますので、不要な方は読み飛ばしてください。

Host nakadalog
    HostName 192.168.56.102
    User root
    PasswordAuthentication yes
    # IdentityFile C:\Users\xxx\.ssh\id_rsa
    IdentitiesOnly no
    Port 22

上記は色々書いていますが結果は接続設定で行ったものと同じになります。
5行目の # はコメントアウトです。
認証鍵は使わないのでコメントアウトしています。
では詳細を見てみましょう。

項目内容初期値備考
Host任意で一意の名前VSCode の SSH リストにはこの名前で表示されます。
HostName接続先サーバのドメイン名またはIPアドレス本稿ではIPアドレス。
Userサーバへ接続する際の
ユーザー名
本稿では root ユーザー。
PasswordAuthentication接続にパスワード認証を行うかどうかyes鍵を使って認証(=鍵認証のみ)場合は no にする。
IdentityFile接続に利用する秘密鍵ファイルのパスid_rsa または id_dsa鍵認証をする場合の秘密鍵の指定。
上記設定は config ファイルと同じpath。
IdentitiesOnlyIdentityFileで指定した秘密鍵のみで認証を行うかどうかnoyes の場合は IdentityFile で指定されているファイルのみを使用する。
PortSSH 接続に使用するポート番号22SSH 接続ポートを 22 以外に指定している場合は記載。

Remote – SSH で仮想サーバに接続

早速仮想サーバに Remote – SSH を使って VSCode から接続します。

SSH 項目のホストリストに表示されているホスト名にマウスオーバーさせる(または押下)と右側にアイコンが表示されます。
が同じウィンドで接続
+ が新しいウィンドで接続
なので好きな方をクリックしてください。

接続先の仮想サーバは CentOS なので Linux を選択します。

フィンガープリントのハッシュ値が表示されるのでそのまま続行を選択します。
フィンガープリントについて詳しくは割愛しますが、サーバー(接続先)の公開鍵から計算されたハッシュ値の事でSSH接続を行う際にホスト認証で使用されます。

最後にログインユーザーに対するパスワードを入力します。
本稿では rootroot なのでそれを入力しエンターを押下すると仮想サーバに接続されます。
これで接続は完了です。
画面左下が画像の様に表示されます。

次回からはパスワードを入力するだけでログインできる様になります。

僕の前記事通りの環境の場合、初回ログインした際に画面右下にメッセージが表示されます。

英語の部分は「リモートプラットフォームとして Linux を選択した事を設定に保存したよ。必要に応じていつでも変更できるよ。」と言っています。
ほっとけば勝手に消えてくれます。
Git の部分は・・・今は気にしない!
どちらも Don’t Show Again を押下でそっ閉じしてください。

仮想サーバにログインしているため、TeraTarmと同じ事もできます。
Ctrl + @(または画面上部メニュー > 表示 > ターミナル)でターミナルを開きます。

ターミナルタブを選択すると TeraTarm と同じログイン直後の状態になっています。
画像は ls -la コマンドでディレクトリ内のファイルを表示しています。
Remote – SSH で接続したため .vscode-server ディレクトリが作成されているのがわかります。

フォルダーを開く

最初に過去記事である【VirtualBox】開発環境を作る – Apache設定編 【CentOS】にある環境を元に記載します。
上記記事では /var/www/nakadalog が Document root に設定されているので VSCodeで開きます。

左メニューアイコンのエクスプローラーを押下し、エクスプローラーからフォルダーを開くを押下します。

開きたいパスを入力(または候補から選択)し OK ボタンを押下します。
新しいディレクトリを VSCode で開く場合、パスワードを求められますので都度入力してください。

画面中央に確認ウィンドウが表示されます。
チェックを入れ、はい、作成者を信頼しますボタンを押下してください。

目的のフォルダ(ディレクトリ)を VSCode で開く事ができました。

複数のフォルダを開く(ワークスペースを使う)

VSCode では通常複数のフォルダを開く事ができません。
先に記載したフォルダを開く操作だけの場合、開いたフォルダ内にフォルダを作成して行く事はできますが、開いたフォルダ以外を開く事はできません。
そこでワークスペースを作成し、そこへフォルダを追加する事で同時に開く事ができます。
更にワークスペースを作成しておけば、ワークスペースを開くだけで簡単に登録されているフォルダを開いた状態で作業が行えます。

VSCode 画面上部メニューのファイルからフォルダーをワークスペースに追加を押下します。

今回は nakadalog フォルダと同じ階層にある html フォルダを開きます。
パスを入力(または一覧から選択)し OK ボタンを押下します。

エクスプローラーに html フォルダとそのファイルが表示されました。
また一覧の先頭に未設定(ワークスペース)が表示され、その配下に nakadalog フォルダとこの度追加した html フォルダが紐づいていることがわかります。

作成したワークスペースを保存します。
この度はフォルダが少ないですが、ワークスペースにフォルダが増える場合を考えて保存しておきます。
VSCode 画面上部メニューのファイルから名前を付けてワークスペースを保存を押下します。

ワークスペースファイルの拡張子は .code-workspace です。
この度は nakadalog.code-workspace と言う名前でnakadalog フォルダの中に保存します。
保存する場所はどこでも構いません。

未設定(ワークスペース)と表示されていた名前が先ほど保存したファイル名(拡張子より前)に変わりました。
これでワークスペース作成は完了です。

簡単なプログラム(PHP)を書いてみる

その前に

もし僕の過去の記事のままの環境、または getenforce コマンドを叩いた時結果が Enforcing になっている方は SELinux を停止してください。

SELinux の詳しい解説は割愛しますが、強すぎるrootの権限を弱くするためのセキュリティ対策で、ユーザーやプロセスごとに権限を振り分ける事で不正ユーザーがroot権限を奪取しても被害を限定的に抑える目的があるものです。

vi /etc/selinux/config
↓
SELINUX=enforcing
を
SELINUX=disabled
に変更

ターミナルから vi コマンドで config を開き SELINUX を disabled に変更し保存します。
保存が終わったら1度サーバを再起動してください。
再度 getenforce コマンドを叩き Disabled になっていれば設定完了です。

本題

ここではDB(MySQL と PostgreSQL)からデータを取得し表示するプログラムを書いてみます。
DBの詳細は過去記事の以下に記載してありますので良かったら読んでみてください。
【VirtualBox】開発環境を作る – MySQL編 【CentOS】
【VirtualBox】開発環境を作る – PostgreSQL編【CentOS】
プログラムは nakadalog フォルダの直下に index.php ファイルを作成して(されている想定)そこに記載していきます。

<?php

ini_set('display_errors', 1);

$sql = 'SELECT * FROM sample';

// mysql
$myCon = 'mysql:dbname=test;host=localhost';
$mysql = new PDO($myCon, 'mysql', 'mysql');
$myRes = $mysql->query($sql);

echo '<pre>';
var_dump($myRes->fetchAll(PDO::FETCH_ASSOC));
echo '</pre>';

// postgres
$pgCon = 'pgsql:dbname=userdb;host=192.168.56.102';
$pgsql = new PDO($pgCon, 'postgres', 'postgres');
$pgRes = $pgsql->query($sql);

echo '<pre>';
var_dump($pgRes->fetchAll(PDO::FETCH_ASSOC));
echo '</pre>';

プログラムを書いたらブラウザで確認します。
本稿のフォルダーを開くでも触れた僕の過去記事で virtualhost の設定も紹介していますので、今回からドメイン名を使っていきます。
本稿では以下の通りですが、ドメインなどは各環境で適宜置き換えてください。

http://nakadalog.local/index.php

プログラムに書いた通り、MySQL と PostgreSQL に接続して select 文を実行しデータを取得した上で var_dumpで出力されています。

まとめ

本稿はここまでになります。

VSCode の Remote – SSH を使えばサーバに簡単にアクセスできるようになりました。
ただ使えるツールとして TeraTarm ももちろん便利なものですので、ケースバイケースでの使い分けができるのが一番です。

さて、最後のプログラム例ですが何気に説明(コメント)をほとんど書いていません。
解説を踏まえてファイルの差分をどう管理するか、を次回の Git についてで書いて行こうと思います。

投稿は自分のペースで。