VisualStudioCode+XDebugでWebシステム開発【XAMPP環境】

コンピュータ関連
この記事は約5分で読めます。

2021.8.11 

とうとう来たなこの時が・・・

再び開けるプログラマーの扉

第4弾(最終弾)の話で、前記事からの続きとなります。

前記事は下記からご参照ください。 

現在も色々試行錯誤しながら進めてますので、興味があれば今後もぜひ参考にしてってください。

今回は、開発環境整備の話で、Windows10環境にXAMPP管理ツールVSCodeをインストールしていきます。

(全行程の所要時間:30分程度)

 

0.構築環境

Windows10メモリ:8GB、CPU:2コア、SSD:256GB)

 ※ハードがどのような環境でも構築手順は大きく変わりませんが、使い慣れてるWindowsがいいということで。

 ※ドットネットと違い、このような構成でも軽いです。

IISのアンインストール(入ってなければスルー)

 ※Apache2のポートと被ってしまうため。

  正確にはWebポート(80/443)を奪い合ってしまうため。

 

■XAMPP管理ツールとは

Webサーバを稼働する上で必要なX(クロスプラットフォーム)AMPP1構成がオールインワンパッケージとなっているツールです。

Windows10WAMP構成を構築するのが割とはまりやすくハードルが高いため、このようなオールインワンパッケージを利用すると楽にベース環境が構築できます。

ローカル環境での開発ですので、多人数での開発等でなるべく統一性を持たす意味でも勝手がいいです。

 

■VisualStudioCodeとは

Microsoftが開発提供しているIDE(開発ツール)であるVisualStudioの、クロスプラットフォームで動く版のツールです。

一応ライセンスフリーですが、開発対象言語のコード整理ツールデバッグツール等を全てプラグイン形式で挿し込むタイプのIDEです。

非常に汎用性のあるプラグインなどが有料版として配布していたりしますが、大抵はフリーで手に入ります。

XDebugはその中の1つで、Webシステムのクロスデバッグで重宝します。

この2つのツールは、ハードがMacであれLinuxであれどんな環境でも動くので、このセットを採用しました。

 

1.XAMPPのインストール

このXAMPPのページに移動し、対象のインストールパッケージをダウンロードします。

あとはDLした.exeファイルを起動し、インストールするのみです。

特に選択することはないですが、言語の選択は「English」を選択してください。

※英語かドイツ語しかない。

一応、起動確認をしておきます。

ApacheMySQLの「Start」ボタンを押下すると、うまくいくとになりサービスが起動します。

次は開発ツールのインストール方法となります。

 

2.VisualStudioCodeのインストール

このMicroSoftのページに移動し、対象のインストールパッケージをダウンロードします。

あとはDLした.exeファイルを起動し、インストールするのみです。

特に選択することはないです。

ただ、これだけだと何も動かないので、左のブロックからプラグインを入れていきます。

自分は次の図の緑枠に示しているプラグインをインストールしました。

特にフレームワークを使うことを想定していないので、PHPHTML5CSS3MySQLの構成が記述できるプラグイン、クロスデバッグができるXDebugというプラグイン、後は言語を日本語化するプラグインを入れています。

検索にそのままプラグイン名を入れて検索すると全部出てくると思います。(現時点では

プラグインインストール後はVisualStudioCodeの再起動が求められるので、再起動しておきます。

開発環境はこれで整いましたが、XDebugを使うにはもう1段階設定を行わないと使えないため、設定を入れていきます。

 

3.XDebugの設定

このXDebugのページに移動し、対象の.dllを入手します。

Install → Windows

 

「download」のリンクを押下

 

以下2点をダウンロード(とりあえずどっちも・・・)

 

DLしたDLLファイルを下記フォルダに配置

 

XAMPP管理画面より「Config」ボタンを押下し、設定ファイルに下記内容を追記する

※記載内容

※ポートを9001にしているのは、どこかが9000を使っており被ってしまうので・・・

 

VisualStudioCodeのXDebug設定を編集(ポートを9001に変更)

 

上書き保存で、VisualStudioCode、及びXAMPP管理ツールよりApacheとMySQLの再起動を行う

これで準備は整いました。

実際は以下のように、対象ソースの行にブレイクポイントを置き、XDebugを起動した状態でデバックしたいWebシステムを起動すると・・・

このようにブレイクポイントに引っかかるようになり、クロスデバッグが可能になります。

 

4.最後に

これで実行環境、開発環境がすべて完成しました。

後はガンガン開発しちゃってください!

開発環境で開発したソースを、前に述べたWebminのファイルマネージャでアップロードすることで本番環境やテスト環境に配置できます。

欲を言えば、多人数で開発する場合は、バージョン管理ツールを利用すると尚いいです。

ちなみにこの環境で約1カ月ほど開発していますが、めっちゃ使い勝手いいです。

次回以降はPHPでWebシステムを組んでて役立った情報や、個人的な忘備録をまとめていきます。

以上。 

(不明点あればコメント頂ければ、可能な限りお答えします。)

プロフィール
当ブログ管理者
shibatty

SIer→CE兼プログラマー。
趣味:ダム巡り、車、バイク、おキャンプ。
愛車:YAMAHA セロー250、Kawasaki Ninja250R。
実績:BikeJIN2018ラリー完走。 2017,18,19,21年SSTR完走。 日本一周ダムカード収集ラリー完走(2018.5.26~11/20)。

shibattyをフォローする
コンピュータ関連
シェアする
shibattyをフォローする
脱サラ日記

コメント

タイトルとURLをコピーしました