酒好きエンジニアのインプット・アウトプット技術ログを主にアフィリエイトや書籍レビューなどアウトプットしていきます。Flywheel」を使って、Wordpressのローカル環境を構築してみたいと思います。大体の方がWindowsならXampp、MacならMampを使ってローカル環境を構築しているのではないでしょうか?またエンジニアや開発スキルのある方などは、VirtualBox(仮想環境)にVagrant、Dockerなどを使ってローカルPC上に開発環境を構築していると思います。エンジニア(私もそうなのですが)なら各ツールを分かって使用していると思いますし、既に先人の方が用意してくれているイメージなどを利用すれば簡単にローカル環境を構築できますが、そうでない方にはハードルが高すぎます。これはXampp、Mampでも同じです!いくらインフラ周りが準備できても、実際にローカル環境でWordpressを利用したサイトを再現するには、バーチャルホスト、ドキュメントルートの設定などは行わなければなりません。Flywheel」が完全GUI操作(マウス操作)だけでローカル環境が構築できます。Flywheel」を使ってローカル環境にWordpress環境を構築していきたいと思います。ここからの説明はMac上で行ったものになります。Flywheelは、ローカルPC上に仮想環境を作れるVirtualBoxをインストールし、そこにWordpress環境を自動で構築してくれるツールになります。Flywheelの操作が完了した時点で、完全なWordpress環境がローカルPC上に構築されます。Flywheelの公式サイトからダウンロードを行います。DOWNLOAD!」をクリックしMacかWindowsかの選択と必要項目を入力してダウンロードしてください。必須項目はメールアドレスだけですLocal公式サイトダウンロードしたファイルを解凍しアプリケーションフォルダに移動したら終了です。FlywheelでWordpress環境を構築Localを起動してください。Go!」ボタンをクリックし、Localに必要なソフトを用意してもらいましょう。時間がかかるかも知れませんが、準備が整ったらLocal上にWordpressサイトを準備するためのスタート画面が表示されると思います。SITE」をクリックすると、サイト情報とWordpress環境をローカルPC上のどのディレクトリに構築するかなどを設定する画面が表示されますので、自分の環境に合った入力をします。私はこのブログの情報を入力しました。domainに注意ここで入力するサイト名やドメインはWordpressの管理画面などから確認できるサイト名とドメインに設定されるのですが、Localはネットワーク環境も自動で構築してくれるため、この後の設定が終わったタイミングでローカル上にてWordpressサイトがブラウザ経由で確認できるようになります。domain」にこのブログのURL(tsukarooohi.com)を設定しました。アクセスしても、表示されるのはLocal上のWordpressになります。要するに、既にインターネット上に公開している自分のブログにアクセスする事ができなくなる訳です!あくまでLocalを利用している自分のPCからのみアクセスできないだけで、スマホや他のPCからは問題なくアクセスできますし、自分のサイトに何か起きるわけではありません。なる理由は、Localがここで入力したドメインで、Local上のWordpressサイトにアクセスできるように、hosts設定をしているのが理由になります。hosts設定を簡単に説明すると、ブラウザであるURLにアクセスすると、裏側でそのサイトが置いてあるサーバのIPアドレスが一度ブラウザに返されます。ブラウザは再度その返ってきたIPアドレスのサーバにアクセスすることでWebサイトを表示させています。このURLからIPアドレスを返すサービスをDNSというのですが、このDNSの設定をローカルPCだけに反映させられるのがhosts設定になります。hosts設定がされている場合、そのPCは実際のURLとIPアドレスのセットと関係なく、hostsに設定されているURLとIPアドレスのセットを優先します。domain」に実際のURLを設定してしまうと、都度このhosts設定を書き直すか、このPC以外からでないとそのURLページにアクセスできなくなるという訳です。設定するように分けることで上記の状況を回避しています。WordPress環境構築続きそれでは続きに戻り、入力が終わったら「CONTINUE」で次に進んでください。ここはミドルウェアの環境を設定するステップになりますが、特に分からない場合は「Preferrd」のままで問題ありません。私はCustomで自分の環境に合わせたバージョンに変更しています。最後にログイン情報を設定して完了になります。ここで設定する情報はWordpressの管理画面にログインする際の情報になりますので、運用しているユーザー名とパスワードと同じにしても、逆にローカル環境なので適当に簡単なものにしてもセキュリティ的にも問題ありません。Local上にWordpressサイトの構築が完了したら下記のような、サイト、ミドルウェア情報が確認できる画面が表示されると思います。SITE」をクリックするとユーザー画面にアクセスできるのでご確認ください。ローカル環境のWordpressを運用中のサイトと同じにする先程までのステップでLocal上に新規Wordpress環境が構築されたかと思います。新規でサイトを構築する方はこのまま進めていけばいいのですが、既にWordpressサイトを運用している場合は、テーマであったりプラグインであったり、カスタマイズしている場合など、このままではローカル環境が用意できたことにはなりません。そこでここからは運用中のWordpressサイトを完全にローカル上に移行するまでを説明したいと思います。言え、ここからも全てGUI操作だけになりますのでご安心ください!WordPressを移行するLocalの画面でも確認できますが、現在Local上のWordpressのバージョンは4.8.2です。テーマやプラグインといったものも新規の状態なので、まずはこれらから先に移行したいと思います。運用中のWordpressサイトのソースがローカルPC上にある方はそのまま、ない方はサーバからダウンロードしてください。ダウンロード方法は利用中のサービスによって異なるため、ここでの説明は省きます。その運用中のWordpressのソースコードでLocal上のWordpressを上書きます。と3つのディレクトリがあると思います。以下がLocal上のWordpressのソースコードになります。これでプラグインやテーマなど大体のものは移行できました。Migration」を使います。Migration」をインストールしてください。インストールまでは他のプラグインと同じなのでここでは説明は省きます。Migrationから「エクスポート」を選択してください。その際に下記のようなエラーが表示された方はエラー内容に従って対応してください。wp-content/ai1wm-backupsの作成に失敗しました。wp-content/ai1wm-backupsを作成し、パーミッションを777にしてください。次にエクスポートする条件を指定し、エクスポートします。今回は先程Wordpressのソースコードを上書きしているので、プラグインやテーマなどは必要ないのでエクスポート対象から外しています。サイト自体の移行ではなく、あくまでローカル環境への移行になるので、スパムコメントやリビジョンデータも対象外にしています。因みに無料版だと512Mまでしか利用できないため、なるべく対象は少なくするか、何度かに分けてエクスポートする事をオススメします。後はエクスポート先を「ファイル」で指定すれば、対象データがファイルでエクスポートされます。ファイルでのエクスポートが完了したらダウンロードして運用サイト側の作業は完了です。Migration」プラグインをインストールしてください。Migrationから「インポート」を選択してください。インポート画面に先程エクスポートしたファイルをドラッグ&ドロップすれば、後はプラグインが処理してくれます。インポートが完了する前に下記のような確認ダイアログが出ると思うので適宜に対応してください。インポートデータでこれから上書きしますが、次の手順に進む前にデータのバックアップがあることを確認してください。上記が問題なければ「PROCEED」をクリックしてインポート完了になります。完了と一緒に「パーマリンクの設定とプラグインを再度設定してください」的な注意書きがあったので、ちゃんと設定はされているようでしたが、一応再設定しました。最後にユーザー画面を確認これで完全に運用中のWordpressサイトをローカル環境に移行できました。後はLocalのファイルをGitでバージョン管理すれば、プラグインやテーマをカスタマイズしたりしてもすぐに元に戻せたり、Local上にいつでも復元できるんではないでしょうか。DBデータがイマイチどこにあるか見つけれなかったのですが。Flywheel」が恐らく最強に簡単で早いのではないでしょうか。導入までなのでほぼドットインストールと同じです。...記事を読む【さくらクラウド】サーバーを起動してNginxをインストールするさくらインターネットではVPSサービスの他にクラウドサービスも提供されており、違いとしては従量課金制や、他サービスとの連携、プランやスペック...記事を読む【KUSANAGI】WordPressプラグインAmazonJSが正しく動作しない原因これはかな〜〜〜りハマりました。このブログでもレビューを書いた記事には、対象書籍のAmazonリンクを貼っているのですが、普通のAm...記事を読むGitのフック処理を利用した自動デプロイ今回実装する環境や設定内容は過去記事を参照ください。...記事を読むWordPressに最適化されたKUSANAGI環境で個人ブログを立ち上げるまで-3では本当は真っ先にやっておかないと行けなかったセキュリティー的な対策、詳細な設定などを行っていきたいと思います。先日、既に運用中のサイト内画像を、サイズの違う同じ画像で上書きする必要が出てきました。酒好きエンジニアのインプット・アウトプット.。