WordPressのテスト環境から本番環境への移行手順について〔Search Replace DB〕

エックスサーバーでWordpressサイトをテスト環境から本番環境へ移行する際の手順について共有します。

エックスサーバーでWordpressサイトをテスト環境から本番環境へ移行する際の手順について共有します。

使用環境

WordPress  5.3.2
サーバー エックスサーバー
使用プラグイン Search Replace DB
接続方式 SSH – Tera tarm

1.テスト環境の全ファイルをバックアップ

テスト環境から本番環境へは「ファイル」「データベース」の2つを移行する必要があるのでそれぞれバックアップを取得します。

ファイルをFTP接続でそのままダウンロードしようとすると時間がかかるので、まずTera tarmでSSH接続して、テスト環境のファイルを圧縮します。

tar -zcvf wp.tar.gz[圧縮後のファイル名] wp[圧縮対象のフォルダ]

圧縮できたらFTPで落としてきます。

2.テスト環境のDBをphpMyadminからバックアップ

エックスサーバーのサーバー管理画面からphpMyadminに接続し、テスト環境のデータベースをエクスポートしてきます。

3.本番環境のDBを作成し、バックアップデータをリストア

エックスサーバーのサーバー管理画面で設定対象ドメインを本番ドメインに切り替え、「MySQL設定」から、本番環境のDBとDBユーザーを作成して紐付けます。

作成したDBとユーザーの紐付けが出来たら、最初にバックアップしておいたテスト環境のDBをインポートしてきます。

データベースの設定はこれで完了です。

4.本番環境にテスト環境のバックアップファイルをリストア

次にテスト環境のバックアップファイルをリストアします。

先程FTP接続でテスト環境から落としてきた圧縮ファイルを本番環境にアップします。

次にTera tarm でSSH接続し、アップした階層まで移動してから圧縮ファイルを解凍します。

tar -zxvf wp.tar.gz

これで「データベース」「ファイル」両方のリストアが完了しました。

次に設定ファイル「.htaccess(必要に応じて)」「wp-config.php」の修正をします。テスト環境が他のサーバーだったりすると、.htaccessファイルの記述に差異があったりしますが、参考までにエックスサーバーで簡単インストールからWordpressをインストール」した際の.htaccessの内容は下記になります。

# BEGIN WordPress
# `BEGIN WordPress` から `END WordPress` までのディレクティブ (行) は
# 動的に生成され、WordPress フィルターによってのみ修正が可能です。
# これらのマーカー間にあるディレクティブへのいかなる変更も上書きされてしまいます。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /wp/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /wp/index.php [L]
</IfModule>
# END WordPress

wp-config.phpにはデータベースの接続情報の記載があるので、本番環境の接続情報に修正します。

/** WordPress のためのデータベース名 */
define('DB_NAME', 'friends3_hoge');

/** MySQL データベースのユーザー名 */
define('DB_USER', 'friends3_hoge');

/** MySQL データベースのパスワード */
define('DB_PASSWORD', '*******');

/** MySQL のホスト名 */
define('DB_HOST', 'mysql805b.xserver.jp');

設定ファイルの修正はここまでです。

5.Search Replace DBを使用してURLを本番ドメインに書き換える

これまでの作業を終えて、現状本番環境のデータベース内にテスト環境のURLが含まれている状態なので、Wordpressのプラグイン「Search Replace DB」を使用してURLを書き換えてもらいます。

プラグインのダウンロードはこちら
Database Search and Replace Script in PHP

ダウンロードできたら解凍し、分かりやすいフォルダ名に変えて(ここではSRDとします)本番環境のwp-config.phpと同じ階層にフォルダごとアップします。

アップしたらURLからフォルダに直接アクセスします。

https://本番ドメイン/wp/SRD

まずreplaceの欄に「http://テスト環境ドメイン」を入れて、withの欄に「http://本番環境ドメイン」を入力します。

そしてまず「dry run」をクリックして実際にどのテーブルが変更されるのかを確認します。

問題ないようでしたら「live run」で実際に書き換えていきます。

これでテスト環境から本番環境への移行作業が全て完了となります。

6.その他注意点

上記作業後の注意点として、データベースではなくファイルに直接テスト環境のURLを記載していると残ってしまいます。サイト表示後にChromeのコンソールを確認するなどして、以下の点に注意しておきましょう。

  • テーマファイル内で画像を読み込む際に直接テスト環境のURLを書き込んでいないか。
  • CSSファイルの背景画像読み込みで直接テスト環境のURLを書き込んでいないか。

【定番】dl要素スタイリングの小技

dl要素は説明リストとして、dt要素(定義語)とdd要素を(説明文)を組み合わせて用いますが、デフォルトのスタイルだと少し物足りない感じがします。

dl要素は説明リストとして、dt要素(定義語)とdd要素を(説明文)を組み合わせて用いますが、デフォルトのスタイルだと少し物足りない感じがします。

▼ デフォルトのスタイル

ペン
鉛筆。多くはシャープ ペンシルを指す。
パイナップル
パイナップル科の多年生植物。
りんご
バラ科リンゴ属の落葉高木樹。

そこで、説明リストとして見やすくする為に以下のスタイルをよく使います。

#main dl dt {
  position: absolute;
}

#main dl dd {
  padding-left: 2em;
}

#main dl dd:before {
  content: "… ";
}

まずdt要素をposition:absolute;で浮かせて、dd要素が重なってくるのでpadding-leftで左に余白を作ります。最後に「…」をdd要素の先頭に追加しました。

これでデフォルトよりは説明リストっぽくなったかと思います。

さくらのVPSでFTPアップロード出来ないときの注意点

さくらのVPSでWordpressやEC-CUBE等のCSMをインストールした時、ファイルの所有者:所有グループがいずれもapacheになっている為、FTPでファイルをアップロードする事ができません。

さくらのVPSでWordpressやEC-CUBE等のCSMをインストールした時、ファイルの所有者:所有グループがいずれもapacheになっている為、FTPでファイルをアップロードする事ができません

これを許可するには、例えばvpsuserという一般ユーザーからFTP接続する際は、ファイルの所有グループをvpsuserに変更して、書き込み権限を付与する必要があります。

まず先に所有グループを変更して、

# chown apache:vpsuser ファイル名

 

その後グループに対して書き込み権限を付与します。

 chmod g+w ファイル名

 

所有グループと書き込み権限が変更されているのを確認

これでファイルをFTPアップロード出来るようになりました。

 

ディレクトリ以下全てのファイルに対して上記操作を行う場合は「-R」オプションをコマンドに付け足します。

# chown -R apache:vpsuser ディレクトリ名/*

WordPressでトップページのURLを変更する方法

wordpressは「ドメイン/wp」にインストールするのが通例ですが、サイトにアクセスする際にwpをなくす手順について共有しておきます。環境はエックスサーバーのwordpress簡単インストールを使用した状態です。

wordpressは「ドメイン/wp」にインストールするのが通例ですが、サイトにアクセスする際にwpをなくす手順について共有しておきます。環境はエックスサーバーのwordpress簡単インストールを使用した状態です。


1.管理画面からサイトURLを変更

WordPressの 管理画面>設定>一般 の「サイトアドレス(URL)」項目から、末尾の「wp」を削除して保存します。

2.「.htaccess」「index.php」のディレクトリを修正

次にファイル側 /DocumentRoot/wp 直下の「.htaccess」「index.php」をダウンロードして中身を修正します。まず.htaccessから

// .htaccess
修正前
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /wp/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /wp/index.php [L]
</IfModule>

修正後
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

次にindex.phpの17行目を修正

// index.php
修正前
require( dirname( __FILE__ ) . '/wp-blog-header.php' );

修正後
require( dirname( __FILE__ ) . '/wp/wp-blog-header.php' );

2つとも修正出来たら1つ上の階層の /DocumentRoot/直下にアップします。

これで「ドメイン」から直接アクセス出来るようになりました。

海外向け通販サイトでPaypalチェックアウト決済プラグインが動作しない件〔EC-CUBE4.0.3〕

海外向け通販サイトで「ペイパルチェックアウト決済プラグイン(4.0系)」を導入した所、決済時にローディングから進まない状態になりハマってしまいました。

海外向け通販サイトで「ペイパルチェックアウト決済プラグイン(4.0系)」を導入した所、決済時にローディングから進まない状態になりハマってしまいました。

使用環境

サーバー さくらのVPS
CMS EC-CUBE4.0.3

1.エラー内容

カート画面でPaypalボタンを押したあと、ひたすらローディングがぐるぐる回っている状態になり、

コンソールでは下記エラーログが出ていました。

Failed to load resource: the server responded with a status of 500 (Internal Server Error)


色々調べた結果、.envファイルで通貨をUSDに指定していたのが原因の様です。

ECCUBE_CURRENCY=USD

もしかするとPaypalの管理画面から設定を変更できるかのなと思い、Paypalサポートに問い合わせた所、USDに対応するにはプラグイン側での改修が必要になるとの事でテクニカルサポートへの問い合わせ先をメールで教えてくれました。

2.対応したこと

早速テクニカルサポートに問い合わせた所、以下の回答を頂きました。

パラメータのCurrencycodeを変更することにより外貨対応ができるようになります

という訳で、プラグインの設定ファイルから外貨を「USD」と地域を「en_US」に変更します。

/DocumentRoot/app/Plugin/PayPalCheckout/Resource/config/services.yaml

paypal.currency: USD
paypal.locale: en_US

 

次に下記ファイル内の「JPY」となっている箇所を全て「USD」に変更します。

/DocumentRoot/app/Plugin/PayPalCheckout/Service/PayPalService.php

'currency_code' => 'USD',
"currency" => "USD",

上記対応を行った上で、再度.envファイルで通貨をUSDに指定してあげると無事Paypalボタンが動作する様になりました。

会員登録フォームでフィールドの必須項目を外す方法〔EC-CUBE 4.0.3〕

EC-CUBE4系の会員登録フォームで、フリガナの必須項目を任意に変更したいと思い以下を修正しました。

EC-CUBE4系の会員登録フォームで、フリガナの必須項目を任意に変更したいと思い以下を修正しました。

// 修正ファイル
/var/www/html/eccube403/src/Eccube/Form/Type/Front/EntryType.php

// 変更前 63行目
->add('kana', KanaType::class, [])

// 変更後
->add('kana', KanaType::class, [
    'required' => false,
])

CSSを追加してスタイル調整する方法〔EC-CUBE 4.0.3〕

EC-CUBE4系でスタイル調整するやり方の一つとして、下記ディレクトリに修正用CSSを配置します。

EC-CUBE4系でスタイル調整するやり方の一つとして、下記ディレクトリに修正用CSSを配置します。

// modify.cssを追加
DocumentRoot/html/template/default/assets/css/modify.css

CSSを配置したら、テンプレート側にリンクを追加する。

// テンプレートディレクトリ
DocumentRoot/src/Eccube/Resource/template/default/default_frame.twig
// スタイルシートへのリンク追記
<link rel="stylesheet" href="{{ asset('assets/css/modify.css') }}">

VirtualBox + CentOS7 + PHP7 + MySQL5.6でローカル開発環境を構築する[MacOS]

VirtualBox + Vagrant + CentOS7 + PHP7 + MySQL5.6のローカル開発環境構築の手順について共有します。
最後にEC-CUBE4のインストールする所までやります。

VirtualBox + Vagrant + CentOS7 + PHP7 + MySQL5.6のローカル開発環境構築の手順について共有します。

最後にEC-CUBE4のインストールする所までやります。

使用環境

PC Mac
仮想マシン VirtualBox
OS CentOS7.6
サーバー Apache, PHP7, MySQL5.6

1.Vagrantfileの初期化

仮想マシンVirtualBoxをインストールします、Webサーバを入れる箱のイメージです。
下記サイトからダウンロード出来ます。

VirtualBox
https://www.virtualbox.org/wiki/Downloads

次にVagrantをインストールします、仮想マシン構築・管理の手順を簡易なものにしてくれるツールです。
下記サイトからダウンロード出来ます。

Vagrant
https://www.vagrantup.com/

ローカルに仮想環境用のプロジェクトフォルダSatoshiDemizuを用意しました。

demi314$ cd
demi314$ cd MyVagrant 
demi314$ mkdir SatoshiDemizu
demi314$ cd SatoshiDemizu

他にも仮想環境を用意する時は、MyVagrant内に別のプロジェクトフォルダを作成しています。

プロジェクトフォルダに移動したらVagrantの設定ファイルVagrantfileを初期化します、その際に導入するCentOSも指定してあげます。

今回はVagrantCoudで検索しました。
https://app.vagrantup.com/boxes/search/

手順としては、まず検索窓から「centos」で検索します。

すると検索結果一覧にcentos7の提供元が表示されるので「centos/7」をクリック。

コードが書かれたタブ「vagrantfile」「New」の2つが表示されるので、「New」に切り替えて1行目「vagrant  init  centos/7」をコピーします。

それをコマンドラインに貼り付けて実行すれば初期化されます。

初期化が成功したらプロジェクトフォルダにVagrantfileが作成されるので、調整します。

# -*- mode: ruby -*-
# vi: set ft=ruby :

# All Vagrant configuration is done below. The "2" in Vagrant.configure
# configures the configuration version (we support older styles for
# backwards compatibility). Please don't change it unless you know what
# you're doing.
Vagrant.configure("2") do |config|
  # The most common configuration options are documented and commented below.
  # For a complete reference, please see the online documentation at
  # https://docs.vagrantup.com.

  # Every Vagrant development environment requires a box. You can search for
  # boxes at https://vagrantcloud.com/search.
  config.vm.box = "centos/7"

  // 35行目辺り、コメントを外す
  # config.vm.network "private_network", ip: "192.168.33.10"
    config.vm.network "private_network", ip: "192.168.33.10"

  // 47行目辺り、共有フォルダに関する設定、下記を追記  
  # config.vm.synced_folder "../data", "/vagrant_data"
    config.vm.synced_folder "./", "/vagrant", type: 'virtualbox', :mount_options => ["dmode=777", "fmode=666"]

 // 68行目辺り、provisionに関する設定、下記を追記
  # config.vm.provision "shell", inline: <<-SHELL
  config.vm.provision :shell, :path => "provision.sh"

config.vm.provisionの箇所で、vagrantの初回立ち上げついでにprovision.shというファイルを処理してくれる様になります。

このファイルにWebサーバ、php、MySQLなどのインストール文を記載しておけば、もし「vagrant  destroy」で仮想環境を破棄する事があってその後再構築する時でも「vagrant  up」だけで諸々の環境を再構築できるという仕組みになっています。

ここでは、他のブログでprovision.shファイルの設定を共有してくれてる方がいたので、それを使わせてもらいます。新規で「provision.sh」ファイルを作成し、下記リンクの内容でプロジェクトフォルダ内に保存してください。

VirtualBox Vagrant CentOS7 PHP mySQL5.6 CakePHPのセットアップ方法

provision.shファイルの設定が終わったら、vagrantを起動します。

demi314$ vagrant up

これで仮想マシン起動ついでにwebサーバーのインストール等も実施してくれます。

2.provision.hs読み込みのタイミングについて

provision.shが読み込まれるのは以下のタイミングです。

  • 最初に「vagrant up」 で起動されるタイミング
    以前に起動されており、休止や停止状態から再度 「vagrant up」を起動しても実行されない。但し、「vagrant up –provision」とすれば実行される。
  • 「vagrant provision」を実行した時
  • 「vagrant reload –provision」を実行した時

3.リモート接続と共有フォルダの確認

仮想マシンが起動したら、sshで接続します。

demi314$ vagrant ssh 

まず共有フォルダが正しく設定されているか確認します。vagrantではデフォルトで「/vagrant」がローカルのプロジェクトフォルダと共有される様になっていて、Vagrantfileでも設定変更できます。

config.vm.synced_folder "./", "/vagrant", type: 'virtualbox', :mount_options => ["dmode=777", "fmode=666"] 

以下のようにリモートで作成したindex.htmlがローカルのプロジェクトフォルダに出てきたら成功です。

最初はここでうまく共有できずにハマりました、結果として「type: 'virtualbox'」を記述したら上手く共有できる様です。

参考
https://stackoverflow.com/questions/46230783/vagrant-synced-folder-without-reload

また、provision.shで「/vagrant 」を「 /var/www/html」に紐づけていたので「/var/www/html」に移動してもindex.htmlが確認できるはずです。

# Vagrantの共有フォルダにパスを設定
sudo rm -rf /var/www/html
sudo ln -fs /vagrant /var/www/html

ではWebサーバを立ち上げてみます。

ブラウザで「http://192.168.33.10:8000」にアクセスして、index.htmlの内容が表示されれば成功です。

4.データベースの準備

次にMySQLのrootパスワードを設定します。

vagrant@localhost ~$ mysql_secure_installation

最初の質問は何も押さずにEnterして進みます。

Enter current password for root (enter for none): //Enter
Change the root password? [Y/n] Y
Remove anonymous users? [Y/n] Y
Disallow root login remotely? [Y/n] Y
Reload privilege tables now? [Y/n] Y

設定が完了したらrootでログインします。

vagrant@localhost ~$ mysql -u root -p

新規でデータベースを作成し、ユーザーと紐付けていきます。ユーザー名とパスワードは任意の値に書き換えてください。

mysql> create database test_db;
mysql> grant all on test_db.* to dbuser@localhost identified by 'testtest';
// grant all on test_db.* to [ユーザー名]@localhost identified by 'パスワード'

データベースが出来ているか確認

mysql> show databases

ユーザーが作成されているか確認

mysql> SELECT Host, User FROM mysql.user;

データベースユーザーの紐付けについて確認

mysql> SELECT user, host, db FROM mysql.db;


諸々確認出来たらexitでデータベスを抜けます。

5.EC-CUBE4のダウンロード

公式サイトからEC-CUBE4をダウンロードしてプロジェクトフォルダに持ってきます。
https://www.ec-cube.net/download/

本当はここで展開したいのですが、vagrantの共有フォルダで展開するとその後がどうも上手くインストールできません。

仕方ないので/home/vagrantフォルダ内で展開しました。

vagrant@localhost ~$ cd /vagrant
vagrant@localhost ~$ cp eccube-4.0.3.zip /home/vagrant/eccube-4.0.3.zip
vagrant@localhost ~$ cd /home/vagrant/
vagrant@localhost ~$ unzip eccube-4.0.3.zip

展開が終わったらwebサーバを起動してeccubeにアクセス

vagrant@localhost ~$ php -S 192.168.33.10:8000
ブラウザURL - http://192.168.33.10:8000/eccube-4.0.3/index.php

インストール画面が出てくるのであとは画面の案内に従ってフォームに記入していけばOKです。

EC-CUBE4のインストール方法と具体的な手順

共有フォルダでの展開がどうしても上手く行かないので、原因分かる方いたら教えて欲しいです。

再入会時の制限時間について [EC-CUBE 2.13.5]

EC-CUBE2系では一度会員を退会すると、同じメールアドレスでは1時間経たないと再入会出来ない仕様になっています。

この制限時間は管理画面から変更可能です。

EC-CUBE2系では一度会員を退会すると、同じメールアドレスでは1時間経たないと再入会出来ない仕様になっています。

この制限時間は管理画面から変更可能です。

使用環境

CMS EC-CUBE 2.13.5

会員退会後に再登録しようとするとエラーになる。

クラスファイル SC_Helper_Customer のsfCheckRegisterUserFromEmail関数で退会済みかどうかチェックしています。

// eccube-2.13.5\data\class\helper\SC_Helper_Customer.php

if (count($arrRet) > 0) {
    // 会員である場合
    if ($arrRet[0]['del_flg'] != '1') {
        // 登録済み
        return 1;
    } else {
        // 退会した会員である場合
        $leave_time = SC_Utils_Ex::sfDBDatetoTime($arrRet[0]['update_date']);
        $now_time   = time();
        $pass_time  = $now_time - $leave_time;
        // 退会から何時間-経過しているか判定する。
        $limit_time = ENTRY_LIMIT_HOUR * 3600; // パラメータ設定の値 x 3600を経過しているか
        if ($pass_time < $limit_time) {
            // 再登録制限期間内削除ユーザー
            return 2;
        }
    }
}

ENTRY_LIMIT_HOURの値は 管理画面>システム設定>パラメータ設定に項目があります。

ここの値が時間単位で反映されます。

お気に入りボタンを非表示にする [EC-CUBE 2.13.5]

お気に入りボタンは管理画面から表示・非表示の切り替えできます。

お気に入りボタンは管理画面から表示・非表示の切り替えできます。

使用環境

CMS EC-CUBE 2.13.5

1.表示切り替え対象の箇所を確認

①商品詳細ページ

ソースコード

// eccube-2.13.5\data\Smarty\templates\default\products\detail.tpl

<!--★お気に入り登録★-->
<!--{if $smarty.const.OPTION_FAVORITE_PRODUCT == 1 && $tpl_login === true}-->
<div class="favorite_btn">
   ・・・
</div>
<!--{/if}-->

 

②マイページナビゲーション

ソースコード

// eccube-2.13.5\data\Smarty\templates\default\mypage\navi.tpl

<!--{if $smarty.const.OPTION_FAVORITE_PRODUCT == 1}-->
    <li><a href="favorite.php" class="<!--{if $tpl_mypageno == 'favorite'}--> selected<!--{/if}-->">
	お気に入り一覧
    </a></li>
<!--{/if}-->

2.管理画面から表示・非表示の切り替え

管理画面>システム設定>パラメータ設定>OPTION_FAVORITE_PRODUCT

OPTION_FAVORITE_PRODUCTの値を0にすれば非表示になります。