macOS XAMPPを用いてWordPressのローカル開発環境をつくる（日本語環境版）

18493 ワード
xampp WordPress PHP7.4 MySQL phpMyadmin WordPress テキストリンク

英語環境版を作るにはこちら https://qiita.com/imaicom/items/8f29c4793b6e515a0bd4

目的

  • レンタルサーバでよく使われている PHP7.4 のローカル開発環境をつくる
  • M1マックで爆速でWordPressを使いたい（これだよ！）
  • 遅いレンタルサーバを使ってネット経由でサイトのデバッグしたくない（切実）
  • 環境構築を優先し、セキュリティは緩く設定する（使い勝手を最優先）
  • XAMPPの最新版を使ってみる（インストールが簡単そう）
  • WordPressの最新版を使う（なんでも最新）

概要

  1. XAMPPのインストール
  2. ApacheとMySQLとProFTPDの起動
  3. 電源再投入時にXAMPPを起動する
  4. phpMyAdminを使ってDB設定
  5. WordPressインストール

XAMPPのインストール

https://www.apachefriends.org/download.html にて PHP7.4 の最新版をダウンロードする。7.4の最新版の7.4.19 / PHP 7.4.19 Download (64 bit) 161 Mbをクリック。

Downloadフォルダを開き、ダウンロードしたインストーラ「xampp-osx-7.4.19-0-installer.dmg」を開く。

ウインドウが開いたらXAMPPのアイコンをドラックしてアプリケーションフォルダにコピーする。

アプリケーションフォルダを開き、XAMPPのアイコンをクリックして起動

なぜかXAMPP Core Filesがチェックされていないので、チェックする。

アプリケーションフォルダにXAMPPフォルダを別に作りインストールする。

ウェブに誘導される Learn more abort Bitnami for XAMPPのチェックボックスを外す

インストールを始める。

圧縮解凍を始める。

途中です。

終わったのでFinishボタンを押す。

ApacheとMySQLとProFTPDの起動

ウェルカム画面出る。旧XAMPPと比べシンプルすぎる。。。これは何かある。。。

Apacheだけ動いていることを確認

プロセス３つとも動かす

イベントログを確認する

ブラウザを確認する。アクセス先は「localhost」「127.0.0.1」でも大丈夫。

ブラウザ上部のPHPInfoタブを押してみる。

ブラウザ上部のphpMyAdminタブを押してみる。

この位は。。。できて当然だ。。。ここから先が大問題。。。

電源再投入時にXAMPPを起動する

HOW-TO-Guidesを見る

ページごとグーグル翻訳をかける。一番下の「XAMPPの自動起動」が大事です。

「XAMPPの自動起動　デフォルトでは、システムを再起動するたびに XAMPP またはそのコンポーネントを手動で起動する必要があります。ただし、システムの起動時に XAMPP コンポーネントが自動的に起動するように構成することもできます。」こりゃ面倒なことが書かれている。でも、しょうがない。

ターミナルを起動します。ここからターミナル慣れしてない人は。。。諦めて。。。ください。。。残念。。。

cd /Library/LaunchDaemons
sudo vi org.apachefriends.xampp.plist

iを入力した後。。。以下をペーストします。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
  <dict>
    <key>Label</key>
    <string>org.apachefriends.xampp</string>
    <key>ProgramArguments</key>
    <array>
      <string>/Applications/XAMPP/xamppfiles/xampp</string>
      <string>start</string>
    </array>
    <key>UserName</key>
    <string>root</string>
    <key>RunAtLoad</key>
    <true/>
    <key>OnDemand</key>
    <false/>
  </dict>
</plist>

ESCキー2回、シフトキー＋ZZで保存します。

ls
more org.apachefriends.xampp.plist

にてちゃんとファイルが作成されていることを確認しましょう。パソコンを再起動します。

ブラウザに「localhost」と入力して動作を確認しましょう。ここで一旦コーヒーブレークしましょうね。疲れたと思います。

phpMyAdminを使ってDB設定

だんだんと難しくなってきました。。。でも、がんばるしかないです。

まずは、ブラウザから「localhost」を入力して、見慣れた画面を出します。右上のphpMyAdminタブを押してみましょう。

この画面は、重要な情報が示されています。データベースとして既に５つ作られていること。文字情報は、UTF-8 Unicode (utf8mb4)が選択されていること。そして、一番大事なこと、データベースの所有者が「root@localhost」であることです。ユーザ名がrootであり、データベースのホストマシンがlocalhostであることを示します。いいですか。これは重要なことです。理解してない人は、ここから先にはすすめません。ブラウザを閉じましょう。

いじくっていると重要な情報をみたくなることがあります。その時は、左上のここを押しましょう。また見られます。ふー。

先に進めます。ユーザアカウントタブを押します。データベースを使えるユーザが並んでいます。今回の場合は、rootという全知全能のユーザを見てみましょう。

ここでも先ほど重要だと言った内容が繰り返されています。データベースを使えるユーザ名はrootであり、ホストマシンが127.0.0.1(localhost)であることを示しています。

Change passwordボタンを押します。パスワードを設定したいときには、設定しましょう。つまり。。。データベースの全知全能のユーザのパスワードは空っぽであることを示しています。パソコンの中にあるデータベースなので、パスワード設定は不要でしょう。セキュリティを上げると使いにくくなるんだよ。空でいいんですよ。今回は。

次に備えて、WordPressで使うデータベースを作っておきましょう。

Databasesタブを押します。WPと入力して、Createボタンを押します。

WPというデータベースが作成されました。テーブルを作ろうという雰囲気になってます。後でWordPressのインストーラが勝手に作るため、空っぽのテーブルのままでよいです。

左上のphpMyAdminを押します。Databasesタブを押します。

WPというデータベースが作成されていることがわかります。

Check privilegesを押します。

ここでも重要な情報が表示されています。確認します。サーバは localhost であること。データベース名は WP であること。データベースのユーザ名は root であることです。これらの情報があとのインストールで必要になってきます。

WordPressインストール

XAMPPには、特別に作られたWordPressのインストーラがあるような雰囲気で書かれています。でも、特別なインストーラが見つからないので、ダウンロードしましょう。https://ja.wordpress.org/download/ 現在のバージョンは 5.7.2 でした。
今のmacOSだと、ZIPファイルなので自動的に解凍されています。

wordpressフォルダを確認してます。この後、apacheのデフォルトフォルダに転送します。ProFTPDというFTPサーバが動いています。ただ、FTPを使って転送する苦労はしたくないので、ドラッグアンドドロップで移動します。

アプリケーションフォルダにXAMPPというフォルダがありますので開きます。

apacheのデフォルトフォルダである htdocs フォルダが見えています。htdocsフォルダのアクセス権がキツイので外していきます。xamppfiles フォルダを開きます。

htdocsフォルダを指定したあと、コマンドキーとIを押します。

これだと読めても書き込みすることができないので、書き込む権利を追加します。

鍵マークを押して、パスワード入力します。それから、Writeオプションを入れます。

wordpress フォルダを htdocs フォルダに入れます。

ブラウザから、http://localhost/wordpress/ にアクセスします。「さあ、始めましょう！」ボタンを押します。

さて、あともう少しです。データベース設定で、細かく伝えてきた内容の最終試験ですね。

データベースは既につくりましたので、その名前を入れます。WP です。データベースのユーザ名は root です。パスワードは空っぽ。ホストは localhost 。テーブル作成の頭につく接頭語は wp_ としました。

うまく行ったと思ったでしょ。世の中甘くない。。。またまたエラーです。でも大したことない。読めばわかる。wp-config.php ファイルが作成できないよというエラーです。

htdocsフォルダの中の、WordPressフォルダを開きます。

index.phpを選んで、コマンド＋Ｄキーを押します。

ファイル名を wp-config.php と修正します。

wp-config.phpを開きます。

wp-config.phpの中身を、このように入れ替え保存します。

インストール実行ボタンを押します。

サイトのタイトル、WordPressユーザ名、WordPressパスワード（複雑なパスワードを入れないと先に進めません）、WordPressユーザの電子メールアドレスを入れます。非常に重要な情報なので、画面コピーを取っておきましょう。WordPressをインストール ボタンを押します。

ログイン ボタンを押します。

先ほど入力したWordPressユーザ名、WordPressパスワードを入力します。ログイン状態を保存する チェックボックスを入れておくと便利です。

ようやく使い慣れたWordPressがローカル環境で動き始めました。コーヒーブレークしましょうね。とてもじゃないが。。。大変でしょう。このドキュメントなしで作れますか？　サーバのことが完全に理解できていないと作れません。

今回作ったローカル環境のWordPressへのアクセス先は、次のとおりです。ブラウザ閉じてもご安心ください。
http://localhost/wordpress/wp-admin/

追記

これをダブルクリックすると、

このXAMPPの設定画面が出ます。今でもよくわからないことの１つ。データベースの停止ができません。この状態でデータベースは実は止まってません。原因は今のところ不明です。

翻訳エラーへの対応


これはなんだと思いますか？　かなり難解なエラーメッセージです。どうしようもないからFTPサーバから取ってきたら直るかもっていうメッセージです。このエラーメッセージ対応のFTPサーバなんて無いんです。実にいい加減だ。

これも難物です。かなりややこしいので。。。メモだけにさせてください。WordPress面倒すぎる。改めて大嫌いになった。仕事じゃなければ付き合いたくない。

wordpress フォルダの wp-config.php のどこでもいいので、次の行を入れて保存してください。

define('FS_METHOD', 'direct');

次に WordPress フォルダ内の wp-content フォルダのパーミッションを中身を含め全部書き込み可能に更新する必要があります。

「翻訳を更新」ボタンを押します。

これでエラーを全部無くしました。WordPressエラーありすぎ。

重大な注意

マックの電源断前にmanager-osxを使って、プロセスを停止しておかないとデータベースがぶっ飛ぶようです。MacBookだとスリープ効きますので、あまり関係ない感じです。iMacだと一発でした。

追記

https://www.apachefriends.org/download.html の 7.4の最新版の7.4.20 / PHP 7.4.20 Download (64 bit)を使うと、phpMyAdmin 5.1.1の最新版が含まれているため、手間がかかりません。 https://www.phpmyadmin.net/news/2021/6/4/phpmyadmin-511-released/