VSCode の Remote - SSH機能を使ってConoha VPS上でLaravelの開発環境を用意する

はじめに

この記事ではConoHa VPSへのLaravelの導入から、Visual Studio Code（以下、VSCode）のRemote-SSH機能を使った開発環境構築について説明していきます。

執筆時点での自分の環境を載せておきます。

ConoHa VPS上でLaravelの環境を用意する

※ConoHa VPSに既にログインしている前提で説明します。

サーバー構成を選択する画面でLaravelを選択して追加する

ConoHa VPSにはOSの他にもアプリケーションテンプレートなど、利用したい環境に応じた便利なテンプレートが多数用意されております。
Laravelテンプレートも用意されており、選択して追加をクリックするだけで必要なパッケージのインストールも同時に行ってくれるため、簡単に環境を構築する事ができます。

追加する際にrootパスワードを設定しますが、こちらのパスワードは一度設定すると変更ができないので必ずどこかにメモをしてください。
また、紛失した際は確認する術がないため注意してください。

Q.VPSの管理者パスワードはどこで分かりますか？
A.ConoHaではメールなどでお伝えしておりません。VPS作成時に設定したrootパスワードは紛失しないようお客様ご自身での管理をお願いいたします。

ref:仕様について｜ConoHa VPSサポート

追加が終わるとConoHa VPSの管理画面に遷移します。

ConoHa VPSのコンソールパネルからLaravelがインストールされている場所を確認する

ネームタグをクリックして、サーバー情報のページに遷移します。

「コンソール」と書かれているボタンをクリックしてコンソールパネルを開きます。

loginにはrootを指定してください。
Passwordには先ほど設定したrootパスワードを入力してください。

※rootパスワードに@を含めている方はご注意ください。
キーボードによってはコンソール内で「@」を入力すると「`」が入力されることがあります。
この場合、コンソール内で「`」を入力すると「@」が入力されます。
US配列のキーボードだと上記の問題が起きたため注意書きとして残しておきます。

ログインに成功すると、以下のような画面が出てきます。

MySQLのパスワードは後ほどマイグレーションの所で使うのでメモしておきます。

ここまで出来たら、Laravelがあるディレクトリに移動してインストールされているLaravelのバージョンを確認してみましょう。
以下のコマンドを実行してConoHa VPSに入っているLaravelのバージョンを確認します。

cd /var/www/html/laravel/
php artisan -V

これでConoHa VPS上でLaravelの環境を作成して確認する事ができました。
次はVSCodeのRemote–SSH機能を使って、VPS上のファイルを編集する作業を行いましょう。

VSCodeにRemote-SSHを入れて、ConoHa VPS上のファイルを編集する

リモート接続するための設定ファイルを生成する

まず最初にRemote-SSHで必要となるパブリックキーとシークレットキーを設定していきます。
両者ともにConoHaのWebコンソールから作成します。
パブリックキーは作成後自動で登録されますが、シークレットキーはローカルにダウンロードして利用します。

最初にシークレットキーを置いておくディレクトリと、リモートサーバーへ接続する際に利用される設定ファイルも生成しておきます。
(※既にある場合はここはスキップして大丈夫です)

mkdir ~/.ssh
touch ~/.ssh/config #設定ファイル

.ssh/configがどんな設定ファイルかについてはこの記事では省略しますが、興味があればこちらの記事をご覧ください。

ref:~/.ssh/configについて

ConoHa VPSの管理画面でパブリックキーを登録する

ConoHa VPSの管理画面に戻り「セキュリティ」から「SSH Key」を選択します。

「パブリックキー」をクリックして登録します。
登録されるとシークレットキーをダウンロードするようポップアップが出るので、ダウンロードします。

シークレットキーをダウンロードしたら、~/.ssh/に移動させてください。
後ほどconfigの設定で説明が出てきますが、~/.ssh/でシークレットキーが置いてある場所のパスを指定できれば問題ないです。
ただ、後で設定のパスを指定する際に設定が容易になるため、.sshディレクトリ配下に移しておくのを推奨します。

VSCodeにRemote-SSHをインストールする

VSCodeの拡張機能の検索画面からRemote-SSHを検索してインストールします。

インストールが完了するとVSCodeの左のアイコン一覧にRemote-SSHのアイコンが表示されます。

.ssh/configにConoHa VPSの設定を記述する

Remote-SSHを開くとconfigファイルを編集する画面が表示されると思いますので、以下の内容を追記してください。
編集画面が開かない場合、以下の手順を参考にしてください。

{}で囲っている箇所は自分の環境に合わせて変更してください。

Host {名前}
HostName {IPアドレス}
User root
Port 22
IdentityFile ~/.ssh/{シークレットキーの名前} # 秘密鍵が置いてあるパスを指定する

Hostは自由に設定してください。
HostNameにはConoHa VPSで作成したサーバーのIPアドレスを指定します。

IdentityFileはダウンロードしたシークレットキーのパスを指定します。
.sshディレクトリ配下に置いている場合はシークレットキー（yyyymmddhhiiss.pem）の部分を変更してください。

これで.ssh/configの設定は完了です。

VSCodeからConoHa VPSに接続する

完了後にRemote-SSHのアイコンを更新すると、Hostに指定した名前が表示されているはずです。
右クリック後、新規ウィンドウで開くもしくは既存ウィンドウで開くを選択し、ConoHa VPSへのリモート接続を行います。

なお、Windows環境では以下の警告が出ることがありますので適宜許可してください。

接続の途中でrootパスワードを聞かれるので、先ほど設定したパスワードを入力してください。

認証に成功するとVSCodeのフッターにHostの名前が表示されます。

VSCodeのエクスプローラーからConoHa VPS上のLaravelがインストールされているディレクトリを開きます。
「フォルダーを開く」をクリック後、表示されるコマンドパレットにlaravelがインストールされているパスを指定します。

var/www/html/laravel

OKをクリックすると、エクスプローラーにlaravelのディレクトリ構成が表示されます。
これによって、ConoHa VPSに接続した上で、VSCodeのエディターを使ってファイルを編集する環境が出来ました。

VSCodeのターミナル画面からConoHa VPS上でコマンドライン操作ができるようにする

デフォルトだと設定がされておらず、ConoHa VPS上のファイル操作が行えません。
この手順ではリモート接続しているサーバー上のbashが読み込まれるよう設定を変更します。

まずはVSCode左下、「設定」アイコンから「設定」をクリックし、「Terminal Automation shell Linux」で検索します。

「リモート」を選択してAutomation Shell:Linuxの下にあるsetting.jsonで編集を開き、ConoHa VPS側のbashパスを指定します。
ConoHa VPSでは/usr/bin/配下にbashがあります。

{
  "terminal.integrated.shell.linux": "/usr/bin/bash"
}

この状態で保存してターミナルを開くと、ConoHa VPS上に接続した状態でサーバーのターミナルを操作する事ができます。
試しにphp artisan -Vで確認してみましょう。

ConoHa VPS上で マイグレーションを行う

リモートに接続ができたら、DBと接続してマイグレーションを行います。
最初のConoHa VPSのコンソールでログインしたときの画面を思い出してください。

こちらのMySQL Passowordを.envファイルに追記します。

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD={MySQL Passoword}

Laravel側の設定としてはこれで終わりですが、このままではまだマイグレーションが出来ません。
ConoHa VPSのMySQLにアクセスして、接続するdatabaseを作成します。
.envを見るとlaravelが指定されていますが、実際にMySQLにログインすると

# mysql -uroot -p
Enter password:
Welcome to the MariaDB monitor.  Commands end with ; or \g.
Your MariaDB connection id is 11
Server version: 5.5.64-MariaDB MariaDB Server

Copyright (c) 2000, 2018, Oracle, MariaDB Corporation Ab and others.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

MariaDB [(none)]> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| test               |
+--------------------+
4 rows in set (0.01 sec)

laravelというDBがまだ存在していないため、直接SQLを叩いてDBを作ります。

REATE DATABASE laravel;
Query OK, 1 row affected (0.00 sec)

MariaDB [(none)]> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| laravel            |
| mysql              |
| performance_schema |
| test               |
+--------------------+
5 rows in set (0.00 sec)

これで出来たのでマイグレーションを実行してみます。しかし、このままではまだエラーが出てしまいます。

php artisan migrate

SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was too long; max key length is 767 bytes (SQL: alter table `users` add unique `users_email_unique`(`email`))

このエラーの原因は次のとおりです。
Laravel5.4から標準charasetがutf8mb4に変わりましたが、この形式に対応できるMySQLのバージョンは5.7.7以上となっております。
しかしConoHa VPSで稼働しているMySQLバージョンは5.5のため、ユニーク制約を付けたカラムを設定する際に指定サイズを超えてしまい、エラーとなります。
詳細:Laravel5.4以上、MySQL5.7.7未満 でusersテーブルのマイグレーションを実行すると Syntax error が発生する - Qiita

対応方法としてはいくつかあるのですが、Laravelでテーブルのスキームを定義する際の最大長未指定時のdefault値を指定サイズ以下に抑えるよう設定することでこの問題を回避します。

編集するファイルはapp/Providers/AppServiceProvider.phpです。

use Illuminate\Support\Facades\Schema;

public function boot()
{
    Schema::defaultStringLength(191);
}

この状態であればConoHa VPS上で問題なくマイグレーションが出来る状態になります。

# php artisan migrate
Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table (0.02 seconds)
Migrating: 2019_08_19_000000_create_failed_jobs_table
Migrated:  2019_08_19_000000_create_failed_jobs_table (0 seconds)

実際にテーブルが出来ているかを確認します。

MariaDB [laravel]> show tables;
+-------------------+
| Tables_in_laravel |
+-------------------+
| failed_jobs       |
| migrations        |
| users             |
+-------------------+
3 rows in set (0.00 sec)

以上でマイグレーションの説明は終わりです。

やる事は沢山ありますが、一つ一つ確認していけば、詰まらずに構築できると思います！
お疲れ様でした。

参考資料

• VSCode の Remote – SSH 機能を使って EC2 上で開発する – サーバーワークスエンジニアブログ
• Developing on Remote Machines using SSH and Visual Studio Code