メルカリ、食べログ、クックパッド、ヤフーなどのWEB上でサービスを展開するアプリを開発したい!
WEBアプリケーションを開発を学ぶために必要な、WEBサーバーやデータベース、言語など、さまざまなアプリケーションをインストールする必要があります。
せっかくの学習意欲も必要なアプリケーションを揃えるのに時間を取られてしまっては元もこうもありません。
昨今では、WEBアプリケーションの開発・学習環境として人気のXAMPP(ザンプ)はApache Friends提供しているソフトウェアパッケージでインストールするとApache(WEBサーバー)、MariaDB (データベース),PHP(言語)、Perl(言語)を一括でインストールできます。
Windows、Linux、macOS、Solaris複数のOSで利用可能でWEBアプリケーションの開発や学習を手軽にセッティングできます。
今回、XAMPPをインストールしてApache(WEBサーバー)を起動するところまで紹介いたします。
目次
XAMPPのダウンロードとインストール
XAMPP公式サイト
XAMPP Installers and Downloads for Apache Friends
XAPP公式サイトへ移動します。
記事執筆時最新のWindows版のXAMPP8.1.12をダウンロードします。
LinuxやMac OSを利用している方はそれぞれのボタンをクリックしてください。
![xampp ダウンロードサイト](https://yuworks.blog/wp-content/uploads/2022/12/スライド1-3.jpg)
ファイルのダウンロードが自動で開始され数十秒ほどかかります。
ダウンロードが終わりましたらファイルをクリックします。
![ファイルをクリックして起動する](https://yuworks.blog/wp-content/uploads/2022/12/スライド2-3.png)
ユーザーアカウント制御が表示されます。
「このアプリがデバイスに変更を加えることを許可しますか?」を「はい」をクリックします。
![はいをクリックする](https://yuworks.blog/wp-content/uploads/2022/12/スライド3-3.png)
「Setup XAMPP」のダイアログが表示されます。
「Next>」をクリックして進めます。
![NEXTをクリックする](https://yuworks.blog/wp-content/uploads/2022/12/スライド4-3.png)
「Select Componets」のダイアログが表示されます。
これはインストールするソフトウェア画面です。必要なソフトすべてにチェックが入っているので、そのまま「Next>」をクリックして進めます。
![NEXTをクリックする](https://yuworks.blog/wp-content/uploads/2022/12/スライド5-3.png)
「Installation folder」のダイアログが表示されます。
これはインストール先のフォルダを選択する画面です。
「Next>」をクリックして先に進めます。
(フォルダアイコンをクリックしてインストール先を変更することも可能です。)
![NEXTをクリックする](https://yuworks.blog/wp-content/uploads/2022/12/スライド6-3.png)
「Language」のダイアログが表示されます。
「English」のまま「Next>」をクリックして進めます。
(言語は英語の他にドイツ語を選べます。)
![NEXTをクリックする](https://yuworks.blog/wp-content/uploads/2022/12/スライド7-2.png)
「Ready to Install」のダイアログが表示されます。
インストールの準備が整ったので「Next>」をクリックしてインストールを行います。
![NEXTをクリックする](https://yuworks.blog/wp-content/uploads/2022/12/スライド8-1.png)
インストール中「Welcome to XAMPP!」のダイアログが表示されて少し待つとインストールが完了します。
![インストール待機中](https://yuworks.blog/wp-content/uploads/2022/12/スライド9-3.png)
XAMPP Control Panel 起動
XAMPPでインストールした各アプリケーションを管理する「XAMPP Control Panel」を起動します。
XAMPP をインストールする時に指定した「C:\xampp」を開き「xampp-control.exe」をクリックして起動します。
![ザンプコントローラーパネル場所](https://yuworks.blog/wp-content/uploads/2022/12/スライド10-3.png)
XAMPP Control パネルが起動すると「Apache」、「MySQL」とソフトウェアの名前が並んでいます。「Actions」の項目にある「Start」ボタンをクリックすることによってソフトを起動することができます。
![コントローラーパネル](https://yuworks.blog/wp-content/uploads/2022/12/スライド11-2.png)
起動中のソフトは、名前の部分が緑色に網掛けされています。「Actions」の項目「Stop」をクリックすることによってソフトを停止することができます。
![ストップ方法](https://yuworks.blog/wp-content/uploads/2022/12/スライド11-5.png)
Webサーバーの起動 Apache起動
WEBサーバーの「Apache」を起動してみます。
Apache の「Start」ボタンをクリックします。
![apacheの起動](https://yuworks.blog/wp-content/uploads/2022/12/スライド12-3.png)
WEBサーバーが起動していることを確認するためにchromeなどのブラウザを起動してURLに「http://localhost/dashboard/」と入力してWEBサーバーの起動を確認します。
この時の「localhost」は自身のパソコン上のdashboardのページを表示しています。
![ブラウザーで確認](https://yuworks.blog/wp-content/uploads/2022/12/スライド13-3.png)
さいごに
以上でXAMPPのインストールからWEBサーバー(Apache)起動の確認まででした。起動したサービスを使用しない時は、必ず起動を停止してください。セキュリティ上、起動したままにしていると不正アクセスの温床になる可能性があります。
さいごに、今回の記事が皆さんの新しいWEBアプリケーションの開発の一歩になれれば幸いです。