Windows10にXAMPP+Git+SVN+Node.jsの開発環境を構築する

今年に入ってから、私のメインPCであるデスクトップPC(DELL XPS8300)のHDDから異音がするようになった。さらにここ数週間前からは、PC起動直後のチェックディスクでもエラーが出るようにもなったので、いよいよ寿命が来たな…ということで、さっそく換装用のHDDを購入した。
お急ぎ便指定でもないのに(今月13日に注文した)HDDは翌日には到着、おぉ、Amazonスゲー!とか思っていたら、同時購入したSATAケーブルだけが届かない(ステータスは発送中で今月末までにお届け予定のまま…この記事書いてる22日の時点でも届いてない)…という罠。
ケーブルないとデータ移行できないしなぁ…と、だましだまし現行HDDを使っていたのだが、ついに不良ヘッダをシークするとOSが落ちるという症状が発生し出したため、近所のPCショップからSATAケーブルだけ買ってきて急きょデータ移行に踏み切った…(おのれ、Amazon…!)。

──という状況が先週。今時(?)のメーカーPCは、再インストール用のWindowsOSのメディアがバンドルされていない(プレインストールされたOEM版OSをリカバリーして再利用する形式)ので、MBR(マスターブートレコード)のHDDが壊れた場合、事前にリカバリー用のメディア(USBメモリ等)にリカバリー用起動メディアを作成しておかないとその時点で修理に出すしかなくなるっぽい。
私の場合、だましながら起動した瀕死のHDDからリカバリーメディアを作成できたので、何とか事なきを得た…。しかし、本来やりたかったHDDのデータクローンは出来なかった(壊れてるデータ領域をシークするとディスクI/OエラーでOS強制終了してしまうので、途中でクローンが必ず失敗するのだ)。そこで、リカバリーメディアからPCを起動して、新規購入したHDDに工場出荷時設定でWindows7を再インストールした。いやはや、ぎりぎりのところで何とかシステム稼働環境だけは確保できたわけだ。
あとは手動で旧HDDからデータを吸い出してコピー(5時間ぐらいかかった…)し、とりあえず旧HDDにはさようなら~である。

その後、週末の三連休中は家族旅行で作業はできず(旅先からノートPCで開発はしてたが…)、週明けから改めて新開発環境の構築を再開した次第だ。

そんなこんなで、新しくWindows環境作ることにしたので、ただ今絶賛無料アップグレード中のWindows10にアップグレードしてしまえ~ってノリで、やってしまいました(DELLはXPS8300のWindows10対応を謳っていないので、アップグレード後のトラブルは自己責任になってしまうのだが…まぁ、ネットで調べたら動作しないという報告はあまりなかったので大丈夫かな…と)。
システム稼働環境が素の状態のWindows7だけ入っている環境に近かったこともあってか、Windows10のアップグレードは(2時間ぐらいで)あっさりと終了し、懸念していたハードウェアのドライバ関連にも何も支障が出なかったのは何よりである。

さて、ここからが本番、一番面倒な開発環境の再構築である…(その前にアンチウィルスソフトだけはインストールしておいた)。

Windows10へのXAMPPインストールとApache起動手順

Windowsのバージョンに関わらず、XAMPPのインストールは特に問題なくインストーラーに従っていればインストールできるのだが、Windows10ではデフォルトインストール状態で80番ポートをシステムプロセスが占有しているので、そのままではApacheが起動しない。

XAMPP Control Panel Apache

Windows10で80番ポートを占有しているサービスは「World Wide Web Publishing Service」というヤツだ。なので、これをOFFにしてあげればApacheが起動するようになる。
やり方は簡単で、XAMPPのコントロールパネルの右メニュー「Services」を押してサービス設定ウィンドウを開き、サービス(ローカル)から「実行中」の「World Wide Web Publishing Service」をダブルクリックする。

XAMPP Control Panel Services

「World Wide Web Publishing Service の プロパティ」ウィンドウが開くので「全般」タブの「スタートアップの種類」を「無効」に、サービスの状態を「停止」にして「適用」→「OK」で良い。

WWWPS プロパティ

これで、再びXAMPPのコントロールパネルからApacheを「Start」すれば起動するようになる。

Windows版Gitのインストール

今や何の開発をするにしても必須ツールとなったGit。WindowsでGitを利用するにはまずGitクライアントをインストールする必要がある。

Git for Windows

Git for Windows」はWindows用のGitクライアントで、まずこれがないことにはWindowsでGitを利用することはできない。導入してしまえば、これ単独でGit運用が可能になる。ツールとしてはWindowsの右クリックメニュー等からGUIとBashにてGit運用ができるようになる。GUIについては後述する「TortoiseGit」や「SourceTree」と較べるとかなり貧弱なので、Git BashコマンドラインからのGit運用をメインにするやや玄人向けのアプリと言えるかもしれない。

Git Gui

インストール方法は基本、Gitダウンロードからインストーラーをダウンロードして、実行するだけでOKなのだが、インストール設定にはちょっとひと手間かかる。
インストール時には「Adjusting your PATH environment」の環境変数へのパス設定で「Use Git and optional Unix tools from the Windows Command Prompt」を選んでおくのをオススメする(もしCygwin等のUnix互換環境を構築するのであれば不要)。

Adjusting your PATH environment

これを選んでおくとコマンドプロンプトでGitコマンドの他にUnix系のコマンドが使えるようになり、他のアプリケーションの導入や保守が格段にやり易くなるのだ。

次に「Configuring the line ending conversions」の改行コードの設定では「Checkout as-is, commit as-is」を選ぶこと。改行コードがチェックアウト時とコミット時にWindows用のCRLFとUnix用のLFとに自動変換されると何かとトラブルが起きやすいからだ。

Configuring the line ending conversions

Configuring the terminal emulator to use with Git Bash」のターミナル設定はどちらでも良い。以前のWindows7環境では「Use MinTTY」を選んでいたが、Windows10ではコンソールが強化されて使いやすくなったということなの今回は「Use Windows’ default console window」を選んでみた。

Configuring the terminal emulator to use with Git Bash

Configuring extra options」の設定は、デフォルトのままで問題ない。PCのリソースに余裕があれば「Enable file system caching」をONにしても良いが、この設定はGitインストール後もGitコマンドから変更できるので、インストール後にパフォーマンスが欲しい時にONにすれば良い。逆に、「Enable Git Credential Manager」はONにしておかないとGitでの認証が面倒になるのでOFFはオススメしない。

Configuring extra options

これでインストールが開始するので待っているだけだ。

Gitインストール後の初期設定などは個人差があるので、下記のサイトなどを参照してみてほしい。

私家版 Git For Windowsのインストール手順

TortoiseGit

ここからは主にGUIベースでのGit運用をする人向けのアプリとして「TortoiseGit」と「SourceTree」を紹介しておく。どちらも前述の「Git for Windows」がインストール済みなことが前提のアプリなので、注意が必要だ(「SourceTree」はGitがなくてもインストールできるオプションがある)。

まずは「TortoiseGit」だが、こちらは次項で説明するSubversionクライアント「TortoiseSVN」のGit版である。Windows上のGUI(シェル拡張)でのGit運用に特化しているアプリで、エクスプローラに統合されているため、Windows上でかなり直感的にGit運用ができるようになる。
もし「TortoiseSVN」を利用したことがあり、SVNの運用に慣れているなら「SourceTree」よりこちらを導入した方が扱いやすい。

インストール方法は、公式サイトのダウンロードページから言語パック共々ダウンロードできるので、ダウンロードしたインストーラーを起動するだけだ。
インストール時の設定に特に注意しないといけないものはないので、デフォルトの設定のままインストールすればOKである。
日本語化したい場合は、本体インストール後に日本語パッケージをインストールし、デスクトップ等を右クリックして「TortoiseGit」→「Settings」から「Language」に「日本語」を選び、「適用」→「OK」とする。

TortoiseGit Settings

その後の個別の初期設定は下記のページなどを参考にしてほしい。

TortoiseGitのインストールと設定 Windowsのターミナルが嫌いな人に

SourceTree

SourceTree」はBitBucketなどで有名なアトラシアン(Atlassian)社が提供しているGitとMercurial(マーキュリアル)兼用のクライアント。完全にスタンドアローンで利用でき、もし「Git for Windows」がインストールされていなくてもバンドルされた内臓Gitクライアントでインストールが完了できる。

インストール方法は最も簡単で、ダウンロードページからインストーラーをダウンロードして、インストールを実行するだけだ。
インストール後は、アカウントの登録が必要になるので、無料でアカウントを作るか、Googleのアカウントでサインインする。初期設定が対話式に進むので、Git運用開始までが簡単なのが特徴だ。

また、全般的にGitHubっぽいGUIで見やすいため、慣れるとGit運用はし易いツールである。例えばMacと兼用でGit運用する時などはGUIや操作系をマシン間で統一できるので、違和感のない作業ができるようになる。

Gitの運用において「SourceTree」と「TortoiseGit」では機能差はほとんどないので、どちらを選ぶかは完全に好みの問題になるだろう。

ちなみに、Windows10に「SourceTree」をインストールしてもデスクトップにショートカットアイコンが作成されない。デスクトップから「SourceTree」を起動したい場合は、デスクトップ左下のスタート(Windowsアイコン)から表示されるスタートメニュー内の「すべてのアプリ」から「SourceTree」のアイコンをデスクトップにドラッグ&ドロップすることでショートカットが作成される(Windows10でのデスクトップショートカットの作り方として覚えておくと重宝する)。

Windows版SVN(Subversion)のインストール

Windows環境でSVN(Subversion)を利用する方法はいくつかあるが、お手軽で高機能なのが「TortoiseSVN」だ。XAMPP環境下でSVN運用するなら、ほぼこれ一択ではないかと思う。しかもWindows10になっても導入手順に変化がないので、安心して導入できる点も良いところだ。
では早速インストールだが、下記ダウンロードURLからダウンロードできるインストーラ(2016年3月22日時点での最新バージョンは1.9.3)を起動するだけだ。

TortoiseSVN 1.9.3 本体(64bit版)
TortoiseSVN 1.9.3 日本語パック(64bit版)
TortoiseSVN 1.9.3 本体(32bit版)
TortoiseSVN 1.9.3 日本語パック(32bit版)

※ 日本語パックは日本語化する場合に必要。探しづらいところにダウンロードリンクがあるので、直リンクを掲載しておいた。

インストール時に注意する点としてはSVNコマンドをコマンドラインからも使いたい場合、「Custom Setup」で「command line client tools」を有効(Will be installed on local hard drive)にすることぐらいだ。特にWordPressの開発をする場合は、コマンドラインからsvnコマンドを発行できないと色々と苦労するので、有効にしておくことをオススメする。

TortoiseSVN Custom Setup

本体のインストールが完了して、もし日本語化したい場合は、続けて日本語パッケージをインストールする。インストール後、実際に日本語化するには、Windowsのデスクトップあたりで右クリックしてメニューから「TortoiseSVN」→「Setting」から「Language」を「日本語」に変更して「適用」→「OK」後、再度メニューから「TortoiseSVN」を起動すれば良い。

TortoiseSVN Settings

その他の設定などは、以前書いた「Windows PCユーザー向け WordPressコア修正環境の構築手順」の記事を参照してほしい。

デプロイ用のNode.js(npm)のインストール

開発時にNode.jsを利用したり、gulpやbowerといったnpmモジュールを利用したデプロイを行いたい場合にはWindowsにNode.jsをインストールする必要がある。

インストール方法は、Node.jsの公式サイトからインストーラーをダウンロードすることになる。私のようにデプロイをメインに使うような場合はNode.jsの推奨安定版(「Recommended For Most Users」の方)をダウンロードしておけば事足りる。

インストーラーの設定はすべてデフォルトのままで構わない。
インストールが完了したら、コマンドプロンプトを開く。Windows10でのコマンドプロンプトの開き方はデスクトップ左下のWindowsアイコン(スタートボタン)を右クリックして「コマンドプロンプト(管理者)」を選べば良い。
コマンドプロンプトで、

──と実行してそれぞれバージョン番号が表示されればNode.jsのインストールは無事完了しているので、そのままgulpbowerのグローバルインストールを行っておこう。

上記のようにそれぞれのバージョンが確認できればOKだ。
なお、Windows10のコマンドプロンプトには簡易編集モードが実装されていて、一般的なターミナルやPowerShellのようにマウスの範囲選択後に右クリックでコピー、未選択時に右クリックでペーストという操作ができるようになった。この簡易編集モードはデフォルトがOFFになっているので、コマンドプロンプトのタイトルバーを右クリックして「プロパティ」から「オプション」タブの「簡易編集モード」にチェックして「OK」することで有効になる。

gulpとbowerのローカルインストール以降については、以前書いた「Windows8.1にgulp、bowerをインストールする時の注意点」を参照してほしい。

ターミナルソフト「Rlogin」のインストール

Windows用のターミナルソフトには「Tera Term」や「Putty」などいくつかあるが、私は以前から「Rlogin」を使っているので、今回Windoes10の環境でもターミナルは「Rlogin」を採用した。
WEBサーバにtelnetやSSHしてサーバの制御を行わない人には無縁なアプリだが、私は運用中のサーバにSSHする機会が多いので、必須なのである。

基本的に「Rlogin」のサイトからアーカイブをダウンロードして、展開したRLogin.exeを任意の場所に置いて、exeファイルを実行すればRLoginは利用できる。
私の場合は、C:\Program Files\RLogin(64bit版をダウンロードした場合。32bit版の場合はC:\Program Files (x86)\RLogin)にディレクトリを作成して中にexeファイルを置き、同じディレクトリ内にRLoing.iniを作成した(設定情報をレジストリに保存する場合は不要だが、ホスト設定等をiniファイルで管理しておくと、他のPCにホスト設定を移管する時なんかが非常に楽になる)。

次に、エクスプローラの「PC」を右クリックして「プロパティ」を選び、「システムの詳細設定」からシステムのプロパティを開く。その中の「詳細設定」タブの「環境変数」をクリックして、システム環境変数の「Path」を編集する(変数名から「Path」を選択して「編集」を押す)。

環境変数名の編集

環境変数名の編集ダイアログが開くので、そこから「新規」を選んでC:\Program Files\RLoginを追加する(いやぁ、Windows10の環境変数の編集ダイアログは劇的に見やすくなっててイイネ♪)。
こうしてパス通しておくと、コマンドプロンプト等からRLoginコマンドでRLoginが起動出来るようになる。
あと、TortoiseSVNの使用するSSHクライアントにRLoginを指定しておくのも忘れないように。

FTPクライアントのインストール

XAMPPインストール時にFileZillaをインストールしていれば、不要なんだが、個人的にはドラッグ&ドロップでファイルのアップロード/ダウンロードができる「WinSCP」を長く愛用しているので、今回も「WinSCP」をインストールする。Windows用のFTPクライアントは結構な数があるので、自分の気に入ったものをインストールするのが良いと思う。下記のサイトを参考にしてみてはいかがか。

初心者でも使える!フリーのFTPクライアントソフト10選

さて、WinSCPのインストールだが、まずインストーラーをダウンロードする。ダウンロード先は窓の杜だ。ダウンロードできたらインストーラーを起動しよう。

WinSCPについては、特にデフォルト設定のままインストールしてしまって構わない。

Windows10での開発所感

そんなこんなで、ようやく瀕死だったWindows7環境からWindows10の新環境に開発環境を移管できた。HDDのデータクローンができなかった時はヒヤヒヤしたもんだが、基本開発中のソース等はGitやBacklog、GoogleDriveといったクラウド上に最新版が保管してあるので、最終的にローカルデータがすべて失われたとしても何とかなるというのが心強いところだ。
いやぁ、イイ時代になったもんだ(笑)

まぁ、HDDさえ瀕死にならなきゃWindows7の稼働アプリ環境をそのままWindows10に持ってこれたんだろうなぁ…と思うと、何気にもっと頻繁にシステムのリカバリーしてれば良かったなぁと後悔は残る。

で、肝心のWindows10なのだが、結構パフォーマンスが良い。OSの起動もそうだが、npmモジュールのインストールにしてもWindows7の頃よりだいぶ早くなった感じだ(それだけ旧HDDが瀕死だったという可能性もあるが…)。

あと地味に気に入っているのが、PrintScreenキー(PrtScn)でスナップしたスクリーンショットがOne Driveに自動保存される機能だ(Windows8でもあるのかもしれないが…)。
あとは、Windows8.1から採用されているらしいが、左下のスタートボタンを右クリックするとコントロールパネルやらコマンドプロンプトを開けるメニューが開くところかな(ここからシャットダウン系の操作もできる)。

さぁて、最低限の開発環境ができたものの、まだ旧HDDからサルベージしたデータの最適化という作業が残っている。
Windows10では7や8からアップグレードした場合、旧OSのデータはc:\windows.old\に時限テンポラリ化される。アップグレードから28日後にはこのディレクトリは自動で削除されてしまうとのこと(アップグレード時に警告された)なので、ここに入れているデータは失われる前に新OSの最適な場所に移し替える必要があるのだ。
一応、勝手に消されないようにディレクトリ名を変更してはいるが…不安だ(自動削除の予約プロセスを停止してしまう方法もあるみたいだが…)。

Leave a Reply

Your email address will not be published.