Windows10 + PowerShell + OpenSSH + Vagrant + Virtualbox + Visual Studio Code + Git で作るWebアプリケーション環境構築 #VisualStudioCode

はじめに

これはVisual Studio Code Advent Calendar 2016の21日目の記事です。

この構成を作ると、ブラウザ上で動くIDEのCloud9やNitrous.ioのようなUIで開発出来きます。必要なアプリケーションがVisual Studio Code(以下VSC)とブラウザ(Edge, Chromeなど)だけになるのでプログラミング初心者の方にもおすすめです。

これまでのWindowsのWeb開発ではコマンドプロンプト + Teratermなんかを使って開発してきました。しかし以下のサイトにあるようにWindows10ではデフォルトのコマンドシェルをPowerShellに移行するニュースが出ました。

参考: Windows 10 Insider Previewのコマンドシェル、PowerShellが標準に

またVSC内で使える総合ターミナル(Integrated Terminal)、Gitツールを使うことで効率よく開発できそうというのがわかったのでPowershell + VSC を使って環境構築したいと思います。

著者は普段Macしか使わないのでWindowsを敬遠してましたが、今回複数名のプログラミング初心者の方にRuby on Railsを教える機会を頂き、Windows環境に調べてたところ今回の方法に行き着きました。Windowsに詳しい方は間違いがあれば指摘していただければ幸いです。

PowerShellかBash on Ubuntu on Windowsか

Windwos10からBashが使えるようになりました。今回こちらにすることも悩みましたがまだ不安定なのとPowerShellはbashっぽいコマンドが使えるけど裏側はexe形式なので、GUIでインストールしたパッケージがそのまま使えます。逆にbashの場合はWindowsとは別にapt-getでパッケージをインストールしていく必要があります。この辺が初心者の方たちにとってわかりやすい方を優先するためにPowerShellを選択しました。

PowerShellのハマりどころとしてBashとはコマンドの挙動が違ったりコマンドがなかったりするところがあげられますが、基本的な作業をしているぶんには問題ないかなと思います。(ls -aが ls -force なのはハマりました。)

では環境構築をしていきましょう。

PowerShellをデフォルトにする

PowerShellとは、

Linux, Mac(のTerminal)で動いてるbash(ログインシェルといわれるプログラム)のようなものをWindowsで動かすもの。
コマンドプロンプト、Teratermの2つのアプリケーションで行っていた作業をPowershellのみで作業を行うことができます。(OpenSSH)
またMacとほとんど同じ操作で動くためMac/Win間の操作の違いを減らせます。

PowerShellの設定

左下のWindowsボタン → 左の歯車アイコン「設定」→Windowsの設定の「個人用設定」→「タスクバー」に遷移。
「[スタート]ボタンを右クリックするかWindowsキー + Xキーを押したときに表示されるメニューで、コマンドプロンプトをWindows PowerShellに置き換える」をオンにする
左下のWindowsボタンを右クリック → Windows PowerShell(I)をクリックで実行

次回からPowerShellを開いてくださいというときは「左下のWindowsボタンを右クリック → Windows PowerShell(I)をクリックで実行」で開いてください。

OpenSSHの設定

Teratermが行っていたもの(SSH)をPowerShellで行うためのツールをインストールします。

https://github.com/PowerShell/Win32-OpenSSH/releases にアクセスします。
OpenSSH-Win32.zipをダウンロードする
- DownloadsからOpenSSH-Win32.zip をクリック
ダウンロードしたOpenSSH-Win32フォルダを C:\Program Files に配置する。
- C:\Program Files\OpenSSH-Win32 のようになっていることを確認する.
C:\Program Files\OpenSSH-Win32にPathを通す。
1. 左下のWindowsボタンを右クリック →システム→システムの詳細設定→詳細設定タブの環境変数をクリック
2. 下半分のシステム環境変数の中のPathをダブルクリック。
3. 新規をクリックし C:\Program Files\OpenSSH-Win32 を追加する。
4. システムの詳細設定を終了する。
5. PowerShellを開き ssh を実行する。 sshのusageが出たら完了。

VisualStudioCode(Win/Mac)

Microsoftが作るエディタ。Atom, SublimeTextと同様の操作感。デフォルトでGitサポート、ターミナルサポートをしている。

VSC(Visual Studio Code)のインストール

https://code.visualstudio.com/ からダウンロードします。

ターミナル(端末)を開く

Ctrl + @ で表示/非表示することができます。

VSCのターミナルをコマンドプロンプトからpowershellに置き換える

ターミナルではデフォルトでコマンドプロンプトが実行されるのでPowerShellが実行されるように変更する。

ファイル → 基本設定 → ユーザーの設定 → 右側に表示されるsettings.jsonに以下を貼り付けてください。

// 既定の設定を上書きするには、このファイル内に設定を挿入します
{
+  "terminal.integrated.shell.windows": "C:\\Windows\\Sysnative\\WindowsPowerShell\\v1.0\\powershell.exe" 
}

ターミナルを表示している場合は、ゴミ箱ボタンをクリックしてターミナルを削除して、再度開いてください。ターミナルウィンドウの右上に powershell.exe と表示されていれば成功です。

Gitのインストール

https://git-scm.com/downloads からインストールします。

Vagrant, Virtualboxのインストール

Virtualbox, Vagrantとは

Virtualbox, Vagrantは、Windwos上に仮想マシン(Linuxなど)を作ることができます。

Vagrant 1.8.7 のインストール

https://www.vagrantup.com/downloads.html からインストール

Virtualbox 5.0

最新バージョンは5.1ですがVagrant1.8.7がまだVirtuabox5.1対応していなかったので5.0にしました。

https://www.virtualbox.org/wiki/Download_Old_Builds_5_0 からインストール

Vagrantfileの設置

任意のディレクトリにVagrantfileを設置します。

Railsを開発する環境を作るVagrantfileを今回は用意して使用しました。
https://gist.github.com/saboyutaka/d46a57bd12d2bc824b438ed95b6cd5a9

@masuidrive のRailsプロジェクトの始め方を参考にしました。

Vagrant up

VSCのターミナル、またはPowerShellを立ち上げ、Vagrantfileがあるディレクトリで

vagrant up

を実行し、Linux(Ubuntu)を立ち上げます。
Linuxが無事立ち上がれば、

vagrant ssh

で立ち上げたLinuxにSSHでログインします。
以上です、お疲れ様でした。

まとめ

はじめに、で書いたように筆者はこれまでWindowsをしばらく使ってなくてWindows環境でプログラミングするのを敬遠していて人に教える際も苦手な印象が強くありました。しかし今回の構成を作れることがわかって、Windows環境の方にも簡単にプログラミングを始める環境を提供出来ることがわかりました。最近のAppleの低調感を感じていたところで、Microsoftの変化を改めて実感してMicrosoftすごい！！と感じました。これからのMicrosoftは目が離せませんねー。Appleも復活してほしい。(切実)