脱サラのすすめ

ダムとバイクとSEの記録

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

f:id:shibatty:20210822003224p:plain

2021.8.11 

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

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

 

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

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

datsusara-susume.hatenablog.com
システム開発を行うにはまず実行環境開発環境を整えないといけないので、その中で私が行った内容をメモとして残していこうという趣旨です。

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

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

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

 

 

 

 

目次

 

0.構築環境

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

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

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

 

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

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

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

 

■XAMPP管理ツールとは

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

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

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

 

■VisualStudioCodeとは

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

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

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

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

 

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

 

 

 

 

1.XAMPPのインストール

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

f:id:shibatty:20210810174921p:plain

 

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

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

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

 

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

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

f:id:shibatty:20210810175410p:plain

 

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

 

 

 

2.VisualStudioCodeのインストール

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

f:id:shibatty:20210810175952p:plain

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

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

 

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

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

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

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

f:id:shibatty:20210810180544p:plain

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

 

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

 

 

3.XDebugの設定

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

 

Install → Windows

f:id:shibatty:20210810182015p:plain

 

「download」のリンクを押下

f:id:shibatty:20210810182031p:plain

 

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

f:id:shibatty:20210810182141p:plain

 

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

f:id:shibatty:20210810182224p:plain

 

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

f:id:shibatty:20210810182323p:plain

f:id:shibatty:20210810182339p:plain

※記載内容

 

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

 

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

f:id:shibatty:20210810182514p:plain

 

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

 

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

 

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

f:id:shibatty:20210810182742p:plain

 

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

f:id:shibatty:20210810182908j:plain

 

 

 

 

 

4.最後に

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

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

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

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

 

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

 

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

 

ドメインは、下記バナーのお名前ドットコムで契約するか、さくらVPS利用であればそのままさくらインターネットよりドメインを契約するのが手っ取り早いです。

個人的に、お名前ドットコムが安いのでオススメです。

 

以上。 

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

 

 

 

 

*1:(クロス(X)プラットフォームで動くApache2、MySQL(MariaDB)、PHP、Perl の頭文字を取ったもの)