![見出し画像](https://assets.st-note.com/production/uploads/images/98577793/rectangle_large_type_2_a63959cf44b5b60ad936ab646cfcc2fd.png?width=1200)
Localでローカル環境にWordPressのテストサイトを作成する
このnoteは「ノンウェブ制作者向け:GitHubとLocalでWordPressサイトを
賢く管理しよう!」の具体的な方法を記した二つ目のnoteです。
▼このnoteの主旨などはこちらをご覧ください
ノンウェブ制作者・初心者の方がWordPressサイトを立ち上げる際、レンタルサーバーを借りWordPressをインストールをして、ブラウザから管理画面にアクセスし、設定や記事を書いたりするかと思います。
そのため、バックアップを取るなどしないまま、記事更新を重ねている方もいるかもしれません。
なぜWordPressサイトはセキュリティが心配なのか
お客様のウェブ制作でも「WordPressは脆弱性が心配なので使わない方向で」と言われることがあります。
脆弱性(ぜいじゃくせい)とは
コンピュータのOSやソフトウェアにおいて、プログラムの不具合や設計上のミスが原因となって発生した情報セキュリティ上の欠陥のことを言います。脆弱性は、セキュリティホールとも呼ばれます。脆弱性が残された状態でコンピュータを利用していると、不正アクセスに利用されたり、ウイルスに感染したりする危険性があります。
本題に入る前に、なぜWordPressサイトが攻撃され、書き換えられ、管理画面が破壊されるなどということが起きるのかを知っておきましょう。
書き換える目的はいくつか考えられます。
何らかのタグをWordPressサイトに記述し、サイトから得られるデータなどを他のサイトやサーバーに送ろうとしている
他のサイトのコンテンツにユーザーを誘導するため、記事を書きこむ。その際、簡単に記事を削除されないよう、管理画面を破壊しておく
愉快犯(書き換えて変なコンテンツを出しておく)
なぜこんなこと(書き換えや破壊)ができてしまうのかというと、管理画面にログインできた/サーバーに侵入できたからなどです。簡単に言えばあなたのWordPressサイトは基本的には誰もがアクセスできるウェブ上にあり、サーバーやWordPressサイトのセキュリティ自体が破られてしまったからです。
![](https://assets.st-note.com/img/1676777207013-I7UI8MF7Nr.png?width=1200)
例えば、マンションに住み、自転車を保有している場合を想像してください。マンションの自転車置き場に鍵をつけて置いていても、誰でも入ってこれる自転車置き場です。鍵を壊して自転車を盗むことも、いたずらで汚したり壊したりも可能でしょう。
そこで、多少狭くなりますが、自宅のリビングにホルダーを設置して保存することにしたらどうでしょうか?
駐輪所よりはぐっとセキュリティレベルは上がりますよね?
因みに、なぜWordPressは・・・と言われるのかというと、単純にシェアが高いからです(日本国内ではCMSの8割以上がWordPress)。
同じ泥棒に入るなら、鍵の位置や開け方を知っている方が手間がかからないですよね。なのでターゲットにされやすいだけなのです。
WordPressサイトをローカル環境(自分のパソコンの中)で動くようにする
パソコン内でWordPressが動くようにする・・・というと難しそうに聞こえます。まず、モチベーションを上げるためにメリットを確認しましょう。
サーバーと同じ状況のWordPressサイトを、サーバー以外に持っておくことができる(バックアップになる)
自分のパソコンの中なので、公開されている場所にあるWordPressサイトより攻撃を受けにくい
カスタマイズや新しいプラグインを導入するとき、テスト的にインストールができ、本番に影響しない
パソコン(ローカル)でWordPressサイトを構築するとは「そのパソコンを触れる人しか見る事のできないWordPressサイトを立ち上げる」ことです。
当然、インターネットに接続されている環境であれば「100%大丈夫」はあり得ません。しかし、公開されているウェブ上に置かれているよりはかなり安全です(パソコンもWindowsやMacが推奨する最低限のセキュリティが成されていることを想定しています)。
「スキルが無いからカスタマイズをしない」、だからメリットの3はあまり関係ない・・・という人は大勢いると思いますが、サイトを使っているうちにやりたい事が沢山出てくるかもしれません。
このnoteでは、無料ソフトである「Local」を使用して、今、レンタルサーバーに置いてあるWordPressサイトを自分のパソコンの中(ローカル環境)でも動くように・・・言い換えれば、テストサイトをパソコン内に構築する方法を出来るだけ簡単に説明します。
1.WordPressサイトのバックアップをとる
WordPressサイトのバックアップには、WordPressのプラグインである「All-in-One WP Migration」を使用します。
詳細な使用方法は過去のnoteをご覧ください。
All-in-One WP Migrationでエクスポートしたファイルは
{site domein}-{YYYYMMDD}-{hhmmss}-cgmw{数字}.wpress
という形式のファイルになります(すみません、最後の数字のルールがわかりませんでした)。
![](https://assets.st-note.com/img/1676780415154-blST5aaHEK.png?width=1200)
2.Githubの準備
GitHubを連携させなくても、「Local」と「All-in-One WP Migration」を使う事である程度の環境は整います。むしろ慣れないとGitHubを面倒に思うかもしれません。
でも、GitHubを後で連携させるのへちょっと面倒なので(GitHubへフォルダを登録させるには、そのフォルダが空である必要があるため)、ちょっとやっておいてください。
説明は一つ前のnoteで説明したユーザー登録まで完了していることを前提に進めますので、まだの人は、まずユーザー登録をしてみてください。
▼Githubのユーザー登録がまだのかたはこちら
GitHubと紐づける
GitHubにログインをして、ユーザーページを開きます。
![](https://assets.st-note.com/img/1676784183691-D9kpF5ZArG.png?width=1200)
![](https://assets.st-note.com/img/1676784311248-uH5jqKjcVo.png?width=1200)
必須はリポジトリ名(Repository name)のみです。ここには、自分のアカウント内では使っていない名前を付けてください。
また、デフォルトでは「Public」(公開)になってしまっている箇所を「Private」(プライベート)に必ずチェックしてください。
「Public」のままだと公開されてしまうので注意が必要です。
ページ下部にある「Create repository」をクリックします。
![](https://assets.st-note.com/img/1676784522365-phQlxletDe.png?width=1200)
左上方にある「Set up in Desktop」をクリックすると、インストールしてある「GitHub Desktop」が起動します。
![](https://assets.st-note.com/img/1676786113930-HBch31DNN6.png?width=1200)
今回は、/_local/ の中に /photo.aruweb/ というフォルダを作って紐づけました。
これでGitHubの設定は一先ず終了です。
3.LocalでWordPressサイトを設定する
PHPのバージョンの確認
あとで影響があるところなので、現在のサーバーで使っているPHPのバージョンを確認しておいてください。
PHPのバージョンは、WordPress 管理画面で確認できます。「ツール」にある「サイトヘルス」をクリックして、「情報」タブの中にある「サーバー」をクリックしてください。
![](https://assets.st-note.com/img/1676780932715-OWnhfrmVOv.png?width=1200)
余談ですが「サイトヘルス」は情報の宝庫なので、「なんとなく意味はわかる」ぐらいになると今後カスタマイズやサーバー設定するのが楽になると思います。
Localのインストールとユーザー登録
WordPressのローカル環境の構築は「Local」というWordPress専用のツールを使います。
最終的にはこの「Local」と「GitHub」というツールを連携させてローカル環境と本番環境の同期やファイルのバージョン管理を行うのですが、WordPressのファイルをすでにローカルで編集し、FTPでUPしている(その方法が問題なくわかる)という方は「Local」をインストールせずXAMPPやMAMPで管理するのも良いと思います。
右上の「DOWNLOAD」をクリックすると、ダウンロード画面が表示されます。「Please choose your platform」をクリックするとプラットフォームが表示されます。
![](https://assets.st-note.com/img/1676786456637-4ekbFEjXVG.png?width=1200)
インストールしたアプリケーションの画面とは別に、ウェブブラウザでページが立ち上がりました。
![](https://assets.st-note.com/img/1676786456473-D9bROtWiPf.png?width=1200)
GitHubと連携させておく
前回、GitHubのアカウントを作って準備だけをしておきました。GitHubのページを開いたままにしておくと、「Local」のインストール時に「Local」の公式サイトがブラウザで開き、GitHubとの連携をするかが尋ねられます。
![](https://assets.st-note.com/img/1676786455773-4nuFpyZ30v.png?width=1200)
「Authorize get flywheel」をクリックすると「Local」のアカウント情報が「GitHub」で登録された情報で登録が完了します。
![](https://assets.st-note.com/img/1676786455761-QwYWhmB3YP.png?width=1200)
Localで新しいWordPressをインストールする
次はLocalにWordPressをインストールします。
LocalにはWordPressをZIPファイルでインストールする機能があるのですが、これはなぜか失敗が多いです(パソコンのセキュリティソフトや、データベースが大きすぎるなどが原因)。ここでは、新しいWordPressを作って、そこにAll-in-One WP MigrationのエクスポートファイルでWordPressサイトを復元する方法で進めます。
Localの左上のメニューボタンから「Add new site」をクリックします。新規作成のメニューが表示されるので、「Create a new site」のまま「Continue」をクリック。
![](https://assets.st-note.com/img/1676780663118-Gu1zbMXlbN.png?width=1200)
既存のサイトに合わせた情報を入力します。
![](https://assets.st-note.com/img/1676787029986-xN33eu8hOo.png?width=1200)
ここの設定は後で変更できますが、複数サイト扱っていると混乱しそうなので、サイトと同じドメインをベース(トップレベルドメインだけを「.local」に変更)にしたドメインを入れています。
https:// www . concurro . co . jp
www:第4レベルドメイン
concurro:第3レベルドメイン
co:第2レベルドメイン
jp:トップレベルドメイン
注意する点は、LocalのURLは実際のサイトと同じURLにはしないことです。
![](https://assets.st-note.com/img/1676787338890-FwMeh6YWmT.png?width=1200)
![](https://assets.st-note.com/img/1676780662745-XtghNoP9XM.png?width=1200)
このまま「Continue」をクリック。
途中Windowsのダイアログが表示されますが、これはパソコン内にサーバーと似通った環境(仮想環境)を作るために必要な変更を与えるための確認なので、「OK」をクリックしてください。
WordPressのユーザー名、パスワード、e-mailを入力します。後で何かバグがあると困るので、ここも既存サイトで使われているものを設定しています。
![](https://assets.st-note.com/img/1676780661333-KS7d7gAQeP.png?width=1200)
![](https://assets.st-note.com/img/1676787481821-ZAjpb5lIuW.png?width=1200)
準備が終わったようです!
![](https://assets.st-note.com/img/1676787772430-QE584pm98w.png?width=1200)
この画面では「SSL」行にある「Trust」をクリックし、「PHP Version」をエクスポートしたサイトに合わせて変えて「Apply」をクリックします。
PHPのバージョンは、ぴったりのものが無いかもしれません。その場合は数値の近いものを選んでください。
PHPを変更する場合は確認画面が出ます。
![](https://assets.st-note.com/img/1676787889249-ITu2hlq4Zp.png?width=1200)
ここまでで空のWordPressがローカル環境にできた事になります。
右上にある「WP Admin」ボタンを押すと、WordPressの管理画面が開きます。先ほど設定したユーザー名とパスワードでログインします。
![](https://assets.st-note.com/img/1676788050290-SxCIHAmLnr.png?width=1200)
4.Local上のWordPressに、既存WordPressサイトを復元する
ログインすると中身が英語サイトなので、必要に合わせて言語を変更してください。
![](https://assets.st-note.com/img/1676780662284-ppA9vqKrlS.png?width=1200)
こちらのサイトにも「All-in-One WP Migration」をインストールします。
インストール、有効化と進んだら、エクスポートの時と同様に左側に「All-in-One WP Migration」メニューが表示されるので、「インポート」を選択します。
![](https://assets.st-note.com/img/1676780662683-firbaSQTsq.png?width=1200)
File(ファイル)をクリックし、先ほどのエクスポートファイルを選択します。
![](https://assets.st-note.com/img/1676798624135-aF0T9VPqxc.png?width=1200)
エクスポートファイルのサイズが大きすぎる場合、エラーが表示されて先に進むことができません。簡単な解消方法は、All-in-One WP Migrationの上位プラグインをインストールすることです。そ例外の解除方法については、以下のnoteで解説していますが、私も途中で諦めた人です(すみません)。
![](https://assets.st-note.com/img/1676799965450-7vgc06Tfdr.png?width=1200)
ここでは特に上書きされて困るファイルは存在しません。「PROCEED」をクリック。
![](https://assets.st-note.com/img/1676800052447-nNRAK2Owk9.png?width=1200)
![](https://assets.st-note.com/img/1676800258806-BDUrj5I88A.png?width=1200)
![](https://assets.st-note.com/img/1676800398910-ymtPqlSy2k.png?width=1200)
実際にサイトを開いてみて(Localの「Open Site」から開くか、設定したURLを打つか)、見え方が実際のサイトと同じならOK!成功です。
![](https://assets.st-note.com/img/1676980395558-r33lWoutc9.png?width=1200)
Local上のWordPressの設定画面で「一般設定」
All-in-One WP Migrationのインポートが上手く行かなかったら
この手のツールによくあることですが、いつまで経っても「完了」にならない、終わらない、ということがあります。
その場合はいくつか理由があるはずなので、確認して再エクスポート・イン
ポートしてください。主な原因は以下の2つです。
PHPのバージョンが違う(7.4.25 であれば、Local側も7.4.30を選んでおく必要がある)
インポートファイルが破損している(エクスポートしなおす。エクスポート前に不要なプラグインなど、不必要なものはすべて削除しておく)
原因の解消方法はネットで「All-in-One WP Migration インポートできない」などで検索すると詳しい記事がいくつもあるので、ここでは割愛します。
まとめ:Localでローカル環境にWordPressのテストサイトを作成する
WordPressをローカル環境(自分のパソコン)で使えるようにするのは、WordPress専用のツールである「Local」を使うと簡単です。
既存のWPのバックアップをAll-in-One WP Migrationでエクスポートする
GitHubと紐づけたフォルダをつくる
Localをインストールして2でつくったフォルダに新しいWPをつくる
All-in-One WP Migrationのエクスポートファイルをインポートする
この4ステップで、仮想環境は一旦できあがりました。
残タスクは
GitHub Actionの設定をしてローカルからレンタルサーバーへのファイルアップを自動化する
正しく機能しているか全体の確認をする
の二つなのですが・・・
ここまでの設定でGitHubが無くてもそれなりの管理ができるので、その話を先にしたいと思います。
![](https://assets.st-note.com/img/1676980003843-L02p6LceJm.png?width=1200)
「なんでGitHub準備させたんじゃ!」と思わなくもないことができちゃいます。
この記事が気に入ったらサポートをしてみませんか?