1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. Docker
  6. »
  7. Docker Composeで自分のWordPressサイトをローカル開発環境に反映!

Docker Composeで自分のWordPressサイトをローカル開発環境に反映!

ローカルにWordPress開発環境を整えてテーマを作成することがあるのですが、単にローカルに環境を作っただけでは記事がなく、テーマのイメージが分かりません。@It_is_Rです。
かといって、testtestを繰り返して記事をつくるのも大変ですし、やっぱり自分のサイトをそのままローカルの開発環境にも反映させたいのでございます。

そんなわけで、今回はDocker Composeを使ったローカル開発環境に、自分のWordPressサイトを反映させる方法を紹介します。

目次
  1. Docker ComposeでローカルにWordPressの環境を整える
  2. 自分のサイトをローカルのWordPress環境に反映させる
  3. リンク先を変更する
  4. まとめ

Docker ComposeでローカルにWordPressの環境を整える

ではまず、Docker Composeを使ってローカルにWordPressの環境を整えてみましょう。

まず、好きな場所にフォルダを作り、その中へ移動します。今回は「mysite」というフォルダを作成しました。

$ mkdir mysite
$ cd mysite

そこにdocker-compose.ymlというファイルを作成します。

$ vim docker-compose.yml

docker-compose.ymlの中は以下のようにします。

version: '3'
services:
    wp:
        image: wordpress:latest
        ports:
            - "80:80"
        depends_on:
            - mysql
        volumes:
            - ./wordpress:/var/www/html/
        environment:
            WORDPRESS_DB_PASSWORD: p4ssw0rd
            WORDPRESS_DB_NAME: wp
        restart: always
    mysql:
        image: mysql:5.7
        environment:
            MYSQL_ROOT_PASSWORD: p4ssw0rd
            MYSQL_DATABASE: wp
        volumes:
            - ./db-data:/docker-entrypoint-initdb.d
        restart: always

さらに、次のコマンドを実行します。

$ docker-compose up

しばらくしてからhttp://localhost/を確認すると、WordPressの初期設定の画面が表示されます。

確認できたら、いったんctrl + cでストップします。

自分のサイトをローカルのWordPress環境に反映させる

続いて、自分のサイトをローカルに反映させたいと思います。

必要なデータは自分のサイトの「wp-content」フォルダ、データベース、そしてSearch Replace DB masterです。これらはあらかじめ準備しておいてください。

この「Search Replace DB master」は、後ほどurlを書き換える時に使用します。
こちらからダウンロードしておきましょう。

さて、この状態で現在のディレクトリを確認してみると、「db-data」と「wordpress」というフォルダが増えているのが分かります。

このdb-dataフォルダの中に、自分のWordPressサイトのデータベースファイル(xxxxx.sql)を入れます。
また、wordpressフォルダの中の、wp-contentを自分のサイトのwp-contentに置き換えます。
さらにwordpressフォルダの中に、先ほどダウンロードしたSearch-Replace-DB-masterを入れてください。

このままでは先ほどのコンテナが残っていますのでdownしておきましょう。

$ docker-compose down   
Stopping mysite_wp_1    ... done
Stopping mysite_mysql_1 ... done
Removing mysite_wp_1    ... done
Removing mysite_mysql_1 ... done
Removing network mysite_default

もう一度立ち上げてみましょう。今度はオプションをつけてバックグラウンドで起動してみます。

$ docker-compose up -d
Creating mysite_mysql_1 ... done
Creating mysite_wp_1    ... done

しばらく待ってみて、もう一度http://localhost/を開いてみます。

すると、自分のサイトがそっくりそのまま見れるようになります。

リンク先を変更する

しかしこのままだと、例えば記事へのリンクをクリックすると、本当のサイトへリンクされてしまいます。
そこで、リンク先をローカルのものに変更しましょう。

http://localhost/Search-Replace-DB-master/を見てみます。
すると次のような画面が表示されます。

Search Replace DB master

search for… : 元のurl
replace width … : 新しいurl

つまり今回は「search for…」の部分に自分のサイトのURL(xxxxx.comなど)を、「replace width…」の部分にlocalhostと入力します。
もしsslを使っている場合は、「search for…」の部分に「https://xxxxx.com」、「replace width…」の部分に「http://localhost」と入力すればいけるみたいです。

そしてまず「dry run」をクリックして、問題がなければ「live run」を押します。

これでURLが変更され、ローカルのページへのリンクに書き換わります。

まとめ

ローカルにWordPress開発環境を整えてテーマを作成するとき、やはり本来のサイトとローカルのサイトは同じものにしたいです。
今回はリモートのWordPressサイトを、Docker Composeを使ったローカルの環境にそのまま反映させる方法を紹介しました。

スポンサードリンク

関連コンテンツ

オススメ記事

【Android Studio】TextView を使ってテキストを変更、追加する方法。

TextViewの文字列を変更するより、これまでの人生を変更したい@It_is_Rです。 Android Studioを使ったアプリ開発講座6回目です。 今回はアプリに表示されたテキストを変更

【Bootstrap 4】badgeを使ってテキスト横に小さな文字を入れる方法

前にBootStrap4の記事を書いていましたが、日にちが空いてしまいましたね。@It_is_Rです。 前回は全体的な機能とアラートの使い方を紹介しました。 今回はバッジの使い方を紹介していき

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。文字の大きさを設定する。

こんにちわ。美しいものほど濁って見える@It_is_Rです。 今回もFC2ブログの最強カスタマイズを始めていこうと思います。 今回は文字の大きさや色など、ブログ内の文字の設定をしていきます。初

【初心者向け】webpack 4入門。一番簡単で詳しい使い方

風邪をひいてぼんやりしている@It_is_Rです。どちらにしろいつもぼんやりしてますが。 さて、今回はWebpack4について紹介していきたいと思います。 この記事では、jsファイルをビルドす

Pug

PugでPHPが使える! gulpfile.jsをちょっと工夫するだけだよ

HTMLを書くときPugを使うととても便利なのですが、PHPを書きたいと思ったときは少し工夫が必要になります。 PugでPHPを書くためのプラグインを使う方法もありますが、使うプラグインが増えれば増

【Git】ブランチを使って履歴を分岐させる方法

こんにちは、@It_is_Rです。 前回「Gitの使い方。バージョン管理する流れを、実際にやってみよう」では、 実際にGitを使ってバージョン管理する流れを学びました。 さて、4回目の今

【enchant.js入門】ガンシューティングゲームの作り方を完全解説!

enchant.jsを使ってガンシューティングゲームの開発を行なっていきます。 enchant.jsはゲームを作るのに特化したJavaScriptフレームワークです。 これを使うことで、Jav

プログラミングのクラスってなぁに?

【JavaScript】クラスの概念をしっかりと理解しよう! 小学生からのプログラミング入門

小学生からのプログラミング講座《こうざ》、第12弾です。 前回はマップ上をキャラクターが自由に動くことができるようにしました。 今回はES6から使われるようになった「クラス」という機能を

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。背景を変更する。

三度の飯よりも好きなものが多すぎて比較にならない@It_is_Rです。 FC2ブログ"最強"カスタマイズ入門講座の続きですね。最強にカスタマイズしていきましょう。 今回は背景色の変更をメインに

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。ヘッダーをカスタマイズ。

寒くなってきましたね。皆さま前かがみになって、まるで亀の様です。@It_is_Rです。 皆様がブログを見て、一番最初に目に入ってくるのはどこでしょうか? 殆どの場合、ヘッダー部分ですよね。つま

コメントをどうぞ!(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です