search
LoginSignup
3

posted at

updated at

Wordpressのローカル環境を作る(updraftplus使用)

(内部向けなので説明が冗長な部分があります。こういう手順書的なものあまり書いたことがないのでわかりにくい箇所あったらコメント等いただけるとありがたいです。内部の人は内部で質問してくれると嬉しいです。)

WordPressにおいてテーマをカスタマイズする際、本番環境を直接いじると予期せぬエラーなどが起こった際に、表示不備などがあるサイトに訪問されてしまうことになります。その問題の回避手段の一つとして自分のPC上に本番環境と同様のWordPress環境(ローカル環境)を作ることが考えられます。今回はLocalというソフトウェアを用いてWordPressのローカル環境を作る方法を解説します。
(ローカル環境の作り方はほかにもいくつかあります。)

ローカル環境を構築するメリット

  • ローカル環境はWeb上に公開されない
  • 外部サーバーを使わなくてよい(詳細は省きますががデメリットでもあるはずです)
  • FTPソフトなどを使わなくてよいので作業が楽(たぶんこれが一番大きいです)

ローカル環境を作る

Localのインストールと初期設定

ローカル環境を作るためのソフトウェアとして「Local(旧 local by flywheel)」を使用します。

  1. Localのインストール
    LocalのインストールページにアクセスをしてDownloadボタンからDownloadをします。(その際自分のPCのOSに対応するものの選択と情報の入力を行います。個人情報を入力する箇所はメールアドレスのみの入力で十分です。)
    スクリーンショット 2022-11-14 180008.png
    実行ファイル(拡張子が.exeのもの)のダウンロードが終わったら、その実行ファイルをクリックして起動します。

  2. セットアップ
    実行ファイルを起動するとセットアップ画面が表示されるので、まず「現在のユーザーのみにインストールする」を選択します。
    スクリーンショット 2022-11-14 180402.jpg
    インストール先はデフォルトのままで大丈夫です。
    スクリーンショット 2022-11-14 180500.png
    インストールが始まるのでしばらく待ちます。インストール中に「変更を加えることを許可しますか?」といったことを聞かれるかもしれませんが全てOKを押してください。
    スクリーンショット 2022-11-14 181110.png
    2,3分でインストールが終わるので完了を押します。その後自動的にLocalが起動します。

  3. Localアカウント作成
    Localの初回起動後、利用規約的なものにチェックを入れたのち、error reportとusage reportを送信してもよいか聞かれるのでお好みのものを選択してください。その後Localアカウントを作るように求められるのでCreate a free accountをクリックしたのち、github or google or emailのいずれかお好みのものでアカウント作成をします。
    スクリーンショット 2022-11-14 181719.png
    認証メールが届くと思うのでそのメール内でverifyボタンを押してください。

  4. Localの新規サイト作成
    本番環境と同様のサイトをつくっていきます。Localアプリの方に戻り左上の人のマークをクリックしOpen to Localから先ほど認証したアカウントにログインします。ログインが終わったらCreate a new siteをクリックします。
    このような画面が出るのでCreate a new siteを選択してContinueを押します。
    スクリーンショット 2022-11-14 182804.png
    その後サイト名を入力するよう求められるので適当な名前を付けます。(テスト環境だとわかるような名前がよいです。たとえばtest-for-xxxなど)
    次にサイトを動かすためのPHPのバージョン、サーバー、データベースを選択するように求められます。一応本番環境に近いものを選択した方がよいと思われます。(内部の人には別途お伝えします。)
    スクリーンショット 2022-11-14 183117.png
    次にWordPressにログインするためのusernameとpassword、そしてwordpressのメールアドレスを設定します。メールアドレスはデフォルトで入っているもので大丈夫だと思います。またこの3つはログイン時に必要になるため必ずどこかにメモしておいてください。
    スクリーンショット 2022-11-14 183608.jpg
    設定後、Localの管理画面からwordpressの管理画面に行くためにWP adminボタンを押します。
    スクリーンショット 2022-11-14 192636.png
    無事管理画面に入れました。
    スクリーンショット 2022-11-14 192930.png

  5. Updraftplusのインストール
    本番環境のデータを取り込むためにはupdraftplusプラグインが必要です。サイドバーの「プラグイン」から「新規追加」を選択しupdraftplusと検索してインストールを行います。
    スクリーンショット 2022-11-14 194024.png
    インストールが終わったら「有効化」させるようにしてください。有効化させると同じ画面にupdraftplusの「設定」ボタンが出てくると思うのでそこからupdraftplusの管理画面に遷移します。
    スクリーンショット 2022-11-14 194351.png
    updraftplusの管理画面にうつったら早速本番環境のバックアップデータをアップロードします。
    本番環境のバックアップデータは1つのgzファイルと数十個のzipファイルからなります。本番環境から取得するやり方はこちらの記事を参考にしてください。内部の人は私からすでに取得したバックアップファイル群を個別に渡すので上の記事は参照しなくてもよいです。バックアップを取得する場合の注意点としては、記事内にもある通りデータベースのbackupファイルのドメインをローカル環境のものに置換するようにしてください。
    取得したバックアップファイル群(gzファイルと複数のzipファイル)を「バックアップファイルをアップロード」からアップロードします。
    スクリーンショット 2022-11-14 195551.png
    アップロード中の様子。アップロードには1,2時間かかると思います。
    スクリーンショット 2022-11-14 202600.png
    アップロードが終わると、updraftplusの管理画面に「復元」ボタンが現れると思うので、それを押して復元を行ってください。ボタンを押すと下のような画面になると思うので、すべてにチェックを入れて復元してください。
    スクリーンショット 2022-11-14 230444.png
    復元の途中でusernameとpasswordの入力が求められるかもしれません。先ほど設定したものを入力してもダメだった場合は、本番環境のログインに使用しているusernameとpasswordを入力してみてください。
    (これはバックアップファイルをアップロードして復元作業を行ったことで、wordpressに登録されているusernameとpasswordも本番環境のものに上書きされるからだと思います。なので以後のログインには本番環境と同じusernameとpasswordを入力してください。)
    もしうまくいかなかったら、Localの管理画面にOne-click adminをonにして横にあるプルダウンから自分の名前を選択してください。(この際に本番環境で普段ログインを行っている人たちの名前も選択できますが、それは上記の上書きによるものです。)
    スクリーンショット 2022-11-15 081522.png
    復元が終了しました。なんだかうまくいっていないものもありますが、ローカル環境として使う分には大丈夫だと思われるので、とりあえずよしとします。
    スクリーンショット 2022-11-14 231205.png
    管理画面に戻ります。
    このままだと本番環境の管理画面の見た目と変わらないので、適当に色を変えます。管理画面のサイドバーの「ユーザー」から「プロフィール」を選んで色を変えます。(青にしました)
    スクリーンショット 2022-11-14 193512.png
    左上の家マークのところからサイトに訪問できます。訪問すると実際のサイトと同じようなサイトが再現されているはずです。(よく観察すると微妙に異なります。広告がなかったり、画像がすくなかったり。)

urlも本番環境のものとはことなりhttp:\サイト名.local\みたいになっているはずです。本番環境のurlはどのデバイスからでも到達可能なものなのでアクセスが可能ですが、このurlは自分のPCからしか到達できません。試しに自分のスマホなどでurlを入力してアクセスしてみようとするとアクセスできないはずです。(要はローカルの環境だってことです。)

ちなみにローカル環境で表示させているデータは手元のPCに存在します。たとえばWindowsの場合
C:\Users\ユーザー名\Local Sites\testforedupedia\app\public
を下の画像にある様にエクスプローラーのバーのところに打ち込むと画像のようなファイルが表示されます(ユーザー名のところは各自のユーザー名を入力してください。たとえばユーザー名がhogeならC:\Users\hoge\Local Sites...と入力することになります。ユーザー名の調べ方はググってくれるとありがたいです。Macの場合はLocalの管理画面のところにGo to site folderというリンクがあると思うのでそこをクリックしてフォルダを表示させ、周辺を探すとそれっぽいファイルたちがあると思うので探してみてください。)
スクリーンショット 2022-11-15 081931.png

また、ここからwp-content >> uploads >> 2022 >> 11などを見ていくと見覚えのある画像が表示されるはずです。簡単にいうと自分のPC上に適切な形で置いてあるデータをLocalがいい感じに処理してくれることで本番環境と同じサイトを再現してくれているのです。

最後に

今回はLocalを用いてWordPressのローカル環境の作り方を解説しました。
内部の人はわかんないところがあったら気軽に聞いてください。
上にも書きましたがローカル環境の作り方は他にもいくつかあるっぽいです。

おわり。

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
What you can do with signing up
3