0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-06-05

英語環境版を作るにはこちら 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をクリック。

Screen Shot 2021-06-05 at 10.41.32.jpg

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

Screen Shot 2021-06-05 at 10.39.29.jpg

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

Screen Shot 2021-06-05 at 10.34.23.jpg

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

Screen Shot 2021-06-05 at 10.36.43.jpg

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

Screen Shot 2021-06-05 at 10.38.16.jpg

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

Screen Shot 2021-06-05 at 10.42.57.jpg

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

Screen Shot 2021-06-05 at 10.43.48.jpg

インストールを始める。

Screen Shot 2021-06-05 at 10.45.07.jpg

圧縮解凍を始める。

Screen Shot 2021-06-05 at 10.46.22.jpg

途中です。

Screen Shot 2021-06-05 at 10.47.56.jpg

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

Screen Shot 2021-06-05 at 10.48.50.jpg

#ApacheとMySQLとProFTPDの起動

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

Screen Shot 2021-06-05 at 10.49.40.jpg

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

Screen Shot 2021-06-05 at 10.50.25.jpg

プロセス3つとも動かす

Screen Shot 2021-06-05 at 10.51.17.jpg

イベントログを確認する

Screen Shot 2021-06-05 at 10.52.17.jpg

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

Screen Shot 2021-06-05 at 10.53.09.jpg

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

Screen Shot 2021-06-05 at 10.54.03.jpg

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

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

#電源再投入時にXAMPPを起動する
Screen Shot 2021-06-05 at 11.07.01.jpg

HOW-TO-Guidesを見る

Screen Shot 2021-06-05 at 11.09.11.jpg

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

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

Screen Shot 2021-06-05 at 11.15.49.jpg

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

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

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

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3134393338372f64313530376165342d616263352d646235312d623432632d3038663464353633356665342e6a706567.jpeg

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

#phpMyAdminを使ってDB設定

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

Screen Shot 2021-06-05 at 11.48.04.jpg

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

Screen Shot 2021-06-05 at 11.49.54.jpg

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

Screen Shot 2021-06-05 at 11.57.20.jpg

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

Screen Shot 2021-06-05 at 12.00.55.jpg

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

Screen Shot 2021-06-05 at 12.04.27.jpg

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

Screen Shot 2021-06-05 at 12.06.56.jpg

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

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

Screen Shot 2021-06-05 at 12.13.06.jpg

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

Screen Shot 2021-06-05 at 12.15.12.jpg

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

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3134393338372f63323737313361352d363032362d313766332d323936632d3235386465616231663339652e6a706567.jpeg

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

Screen Shot 2021-06-05 at 12.19.50.jpg

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

Screen Shot 2021-06-05 at 12.21.01.jpg

Check privilegesを押します。

Screen Shot 2021-06-05 at 12.22.31.jpg

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

#WordPressインストール

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

Screen Shot 2021-06-05 at 12.58.09.jpg

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

Screen Shot 2021-06-05 at 13.01.53.jpg

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

Screen Shot 2021-06-05 at 13.03.09.jpg

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

Screen Shot 2021-06-05 at 13.05.23.jpg

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

Screen Shot 2021-06-05 at 13.07.26.jpg

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

Screen Shot 2021-06-05 at 13.09.00.jpg

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

Screen Shot 2021-06-05 at 13.10.53.jpg

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

Screen Shot 2021-06-05 at 15.10.17.jpg

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

Screen Shot 2021-06-05 at 15.10.30.jpg

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

Screen Shot 2021-06-05 at 15.10.57.jpg

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

Screen Shot 2021-06-05 at 15.11.17.jpg

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

Screen Shot 2021-06-05 at 13.21.36.jpg

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

Screen Shot 2021-06-05 at 15.50.29.jpg

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

Screen Shot 2021-06-05 at 15.51.31.jpg

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

Screen Shot 2021-06-05 at 15.54.09.jpg

wp-config.phpを開きます。

Screen Shot 2021-06-05 at 15.11.17.jpg

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

Screen Shot 2021-06-05 at 15.11.17.jpg

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

Screen Shot 2021-06-05 at 16.11.54.jpg

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

Screen Shot 2021-06-05 at 16.15.18.jpg

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

Screen Shot 2021-06-05 at 16.16.32.jpg

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

Screen Shot 2021-06-05 at 15.13.04.jpg

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

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

#追記

Screen Shot 2021-06-05 at 14.42.11.jpg

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

Screen Shot 2021-06-05 at 14.42.23.jpg

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

#翻訳エラーへの対応

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

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

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

define('FS_METHOD', 'direct');

Screen Shot 2021-06-05 at 17.02.45.jpg

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

Screen Shot 2021-06-05 at 16.54.59.jpg

Screen Shot 2021-06-05 at 16.44.08.jpg

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

Screen Shot 2021-06-05 at 16.48.50.jpg

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

#重大な注意

Screen Shot 2021-06-09 at 16.03.15.jpg

マックの電源断前に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/

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?