WEBプログラミング入門

XAMPPでゼロから開発環境を構築する

新しいハードディスクを用意する

開発時は最小限から始めると環境によるエラーに悩まされることが少なくなる。また調子がおかしくなったら、再インストールするだけなのでいろいろと試すことができる。
ハードディスクはいろいろ種類があるが、動作が遅いとすべてにおいて効率が落ちるため、マザーが対応していれば、NVMe接続M.2のSSDがおすすめ。

Windows10をクリーンインストール

16GB以上のフォーマットしたUSBを用意して、Microsoft公式サイトより最新のWindows10インストールメディアを作成する。上で用意したSSDに作成したインストールメディアからWindows10をインストールする。Windows10はハードが変わってもライセンスをマイクロソフトに紐づけておけば簡単にライセンス移行ができる。

開発に必要なソフト

browser

Chrome(通常開発用)、firefox(OWASP ZAPで脆弱性診断)

Chrome拡張機能

Live Server Web Extension:VScodeのLiveServerでPHPをライブリロードするための拡張機能。

Git for Windows

Git for Windows公式サイト

インストール時設定

  • Adjusting your PATH environment:Use Git from Git Bash only
  • Choosing HTTPS transport backend:Use the OpenSSL library
  • Configuring the line ending conversion:Checkout as-is, commit as-is
  • Terminal emulator to use with Git Bash:Use MinTTY(the default terminal of MSYS2)

Visual Studio Code

visual-studio-code公式サイト

設定ファイルの場所(環境移行は下記フォルダをコピー)

explorer
//setting.json・ユーザースニペット・キーボードショートカット
C:\Users\ユーザー名\AppData\Roaming\Code\User
//拡張機能
C:\Users\ユーザー名\.vscode

パスワード管理

KeePass Password Safe

FTP

WinSCP

SSH

Tera Term

ファイル比較

WinMerge

XAMPP

XAMPP公式サイト

Select ComponentsでApache、MySQL、PHP、phpMyAdminのみ選択

Windowsファイアウォールの設定

XAMPPインストール時に、Windowsファイアウォール設定についての通信許可設定画面がでるが、セキュリティのためキャンセルする。(キャンセルするとLAN内からもアクセスできなくなるのでより安全)
開発中のWEBページを、スマホ実機から確認したい場合はLAN内からページアクセスする必要があるため、ファイアウォール設定を変更する。(下記画像参照)

環境変数の設定

PHPとMySQLのパスを通す。

環境変数名の編集
C:/xampp/php
C:/xampp/mysql/bin

XAMPP設定

環境によってはxamppのコントロールパネルをquitで終了するときにエラーになり正しく終了できないので、c/xampp/xampp-contol.iniのアクセス権限を変更する。

php.ini設定

terminal
//設定ファイル
cd c:/xampp/php/
//バックアップ
cp php.ini php.ini.default
//VSCodeで編集
code php.ini
editor
mbstring.language = Japanese
mbstring.language = Japanese
mbstring.internal_encoding = UTF-8
date.timezone=Asia/Tokyo
//↓コメントアウトされていたら解除
extension=php_openssl.dll

VirtulHost設定

Linuxのマルチユーザー環境では/home/ユーザー名/ドメイン名/public_html/がDocumentRootとなる。ServerName(ドメイン名)はhostsと関連付けるので、開発環境のドメインを実際のドメイン名と同じにすると、本番環境を開発環境のPCから確認できなくなるので、テストサイト用のドメイン名にする。テスト環境でコードと本番環境でコードを同一にするため、サイト内リンクは絶対パスではなくルート相対パスで書く。

例)開発環境でtest1.comとtest2.comというドメイン名でプロジェクトを作る場合

  • ドメイン名 test1.com
  • ドキュメントルート C:/xampp/htdocs/test1.com/public_html/
  • ドメイン名 test2.com
  • ドキュメントルート C:/xampp/htdocs/test2.com/public_html/

HTTP設定

terminal
//設定ファイル
cd c:/xampp/apache/conf/extra/
//バックアップ
cp httpd-vhosts.conf httpd-vhosts.conf.default
code httpd-vhosts.conf
editor
//#コメントアウト
NameVirtualHost *:80
//末尾に追加
<VirtualHost *:80>
  ServerName test1.com
  DocumentRoot "C:/xampp/htdocs/test1.com/public_html"
</VirtualHost>
<VirtualHost *:80>
  ServerName test2.com
  DocumentRoot "C:/xampp/htdocs/test2.com/public_html"
</VirtualHost>

HTTPS設定

terminal
//設定ファイル
cd c:/xampp/apache/conf/extra/
//バックアップ
cp httpd-ssl.conf httpd-ssl.conf.default
//VScodeで編集
code httpd-ssl.conf
editor
//末尾に追加
<VirtualHost *:443>
  ServerName test1.com
  DocumentRoot "C:/xampp/htdocs/test1.com/public_html"
  SSLEngine on
  //my-server.crt、my-server.keyのファイル名は任意
  SSLCertificateFile "conf/ssl.crt/my-server.crt"
  SSLCertificateKeyFile "conf/ssl.key/my-server.key"
</VirtualHost>
<VirtualHost *:443>
  ServerName test2.com
  DocumentRoot "C:/xampp/htdocs/test2.com/public_html"
  SSLEngine on
  SSLCertificateFile "conf/ssl.crt/my-server.crt"
  SSLCertificateKeyFile "conf/ssl.key/my-server.key"
</VirtualHost>

hostsファイル編集

terminal
//hostを開く
code C:/Windows/System32/drivers/etc/hosts
editor
//hostsの末尾に追加
127.0.0.1 test1.com
127.0.0.1 test2.com

変更を保存しようとすると、下記メッセージがでるので管理者権限で再試行する。

MySQLのrootパスワード変更

rootパスワードを設定

terminal
//rootでログイン
mysql -u root
//パスワード変更(例newpass)
set password=password('newpass');
//ログアウト
exit
//確認
mysql -u root -p
Enter password: newpass

phpmyadminのログイン方法変更

terminal
//phpmyadminの設定ファイル
code c:/xampp/phpMyAdmin/config.inc.php
editor
/* Authentication type and info */
//↓'config'⇒'cookie'にしてパスワードログインに変更
$cfg['Servers'][$i]['auth_type'] = 'cookie';
$cfg['Servers'][$i]['user'] = '';
$cfg['Servers'][$i]['password'] = '';
$cfg['Servers'][$i]['extension'] = 'mysqli';
$cfg['Servers'][$i]['AllowNoPassword'] = true;
$cfg['Lang'] = '';

パスワードログインにするとphpMyAdminログイン時に下記メッセージが表示される。

再度設定ファイルconfig.inc.phpを開きxamppの部分を長さ32文字以上のパスフレーズに変更する。これは暗号化 (blowfish_secret) 用の非公開パスフレーズの設定で、ログイン時に入力の必要はない。

editor
$cfg['blowfish_secret'] = 'xampp';
//変更例
$cfg['blowfish_secret'] = 'jf643asld2ifj6asdif3sdlfas4dlk63flkf';

作業用ユーザーの作成

rootは大きな権限があるため、操作ミスやセキュリティを考慮するとDBごとに作業用ユーザーを作成するのが一般的である。

terminal
//rootでログイン
mysql -u root
//例user_nameというユーザーでログインパスワードがpasswordにする場合
create user user_name@localhost identified by 'password';

ローカル用の証明書を作成

Chrome58~対応のため、Subject Alternative Namesを設定する。SANはX509拡張で複数のドメインを一つのSSL証明書で対応できる。VirutlHostのSSLに入力した場所に証明書ファイルを作成する。
設定ファイルからの相対パスで書く。絶対パス→C:/xampp/apache/conf/ssl.crt
Chromeの古いlocalhostの証明書があれば削除する。Chromeの設定-プライバシーとセキュリティ-セキュリティ-証明書の管理-信頼されたルート証明機関-localhostを削除する。証明書の詳細-サブジェクト代替名でドメイン名を確認できる。

terminal
//設定ファイルがあるディレクトリに移動
cd c:/xampp/apache/conf/
//設定ファイルのコピー作成(ファイル名は任意)
cp openssl.cnf openssl_my.cnf
//作成した設定ファイルを開く
code openssl_my.cnf

HTTPS適用するホストを入力

editor
//v3_reqディレクティブ末尾に追記
[ v3_req ]
subjectAltName = @alt_names
//alt_nameディレクティブを末尾に作成
[ alt_names ]
DNS.1 = localhost
DNS.2 = test1.com
DNS.3 = test2.com

※バーチャルホストで接続する場合でも、スマホ実機などから確認する場合localhostもhttps接続するため、DNS.1 = localhost も追加している。

ワンライナーで自己証明書を作成する

上のVirtulHostで設定した場所に、SSL証明書と秘密鍵を作成する。
SSLCertificateFile "conf/ssl.crt/my-server.crt"
SSLCertificateKeyFile "conf/ssl.key/my-server.key"

terminal
//設定ファイル(openssl_my.cnf)があるディレクトリに移動
cd c:/xampp/apache/conf/
//crtとkeyを作成
openssl req -newkey rsa:4096 -keyout ssl.key/my-server.key -nodes -x509 -out ssl.crt/my-server.crt -subj "//CN=localhost" -reqexts v3_req -extensions v3_req -config openssl_my.cnf -days 3650

自己証明書インストール

  1. エクスプローラーでC:/xampp/apache/conf/ssl.crt/my-server.crtを開く
  2. 証明書のインポートウィザードの開始で「保存場所」「現在のユーザー」で次へ
  3. 証明書をすべて次のストアに配置する-「参照」から「信頼されたルート証明機関」を選択
  4. 完了をクリック

正しく設定されたか確認する

下記ディレクトリにindex.hmtlを作成
c:/xampp/htdocs/test1.com/pubulic_html/
c:/xampp/htdocs/test2.com/pubulic_html/
Chromeから「https://test1.com」「https://test2.com」にアクセスしてChromeのアドレスバーに鍵マークがでればOK

自己証明書が有効になっているときのスクリーンショット

LAN内の別のデバイスからWEBページを確認

Chromeのデベロッパーツールでもモバイルデバイスの表示確認はできるが、モバイルデバイス実機で確認すると表示がおかしいときがある。本番サーバーにアップロードする前にローカルのiphone実機などで表示を確認する。

Windowsのネットワーク設定

Apacheをファイアウォールで許可していても、ネットワーク設定がパブリックだとLAN内のデバイスからアクセスできないため、Windowsのネットワーク設定を開きプライベートを選択する。
※LAN内に自分が把握していないデバイスがある場合はプライベートにしない。

アクセスするためのアドレスを確認する

LAN内のローカルサーバーのIPアドレスを確認する。この例ではサブネットが255.255.255.0なので192.168.24.**のアドレスの端末からアクセスできる。

スマホのIPを確認する(iphoneの場合)

iphoneのWifi設定を開き接続しているルーターの(i)をタップして詳細を開く。ホームボタンのあるiPhoneの場合、右の電源ボタンとホームボタンを同時押しでスクショが撮れる。

ルーターのデフォルトゲートウェイ(この例では192.168.24.1)がローカルサーバーと同一であることを確認する。

Virtulhostを設定している場合

開発PCからはhostsファイルによりtest1.comで、"C:/xampp/htdocs/test1.com/public_html"がルートディレクトリとして表示されるが、スマホにはhostsファイルの設定がないのでtest1.comとしても繋がらない。
上の例でいえば、192.168.24.87をLAN内をデバイスのブラウザからアクセスすると繋がる。
"192.168.24.87/test1.com/public_html"とすればページにはアクセスできるが、ページ内リンクにルート相対パスを使っている場合、パスが変わって正しく表示できない。
よって192.168.24.87に接続したときに、"C:/xampp/htdocs/test1.com/public_html"がルートパスとして表示されるように設定する。

httpd-vhosts.conf
//VirtulHost設定の一番上に入力
<VirtualHost *:80>
  DocumentRoot "C:\xampp\htdocs\test1.com\public_html"
  ServerName localhost
</VirtualHost>

この設定でLAN内のPCから"http://192.168.24.87"でアクセスした際に"C:/xampp/htdocs/test1.com/public_html"をドキュメントルートとしてページを開く。"test2.com"を開きたい場合は"test1.com"の部分を"test2.com"にするだけでよい。

https接続の場合

httpd-ssl.conf
<VirtualHost _default_:443>
    :
DocumentRoot "C:/xampp/htdocs/test1.com/public_html"
    :

この設定でLAN内のPCから"https://192.168.24.87"でアクセスした際に"C:/xampp/htdocs/test1.com/public_html"をドキュメントルートとしてページを開く。
"test2.com"を開きたい場合は"test1.com"の部分を"test2.com"にするだけでよい。

上の自己証明書作成時に
[ alt_names ]
DNS.1 = localhost
としていない場合、https接続はできるが警告がでる。

関連リンク