《保存版!》WordPressの効率的な開発環境をまじめに考えた結果

WordPressの効率的な開発環境をまじめに考えた結果WEB

自身の開発環境がかなり適当だったので、まじめに効率的な環境を考て実施してみました。テーマは「とにかく楽をしながらしっかり管理したい」で、それなりに実現ができたかなと思います。その際のメモを残しておきます。

やりたいこと

  • 環境構築後に使用するのはVisual Stuio Code、Koala(SCSSコンパイラ)、ブラウザのみ
  • Gitのバックアップ(アーカイブ)は完全自動化
  • データの管理を物理的に分けることで安全性を高める
  • 本記事は、パーミッションの変更や、samba設定など、Linuxの基本的な設定をご自身ででき、問題解決できる方が対象です。
  • なるべく丁寧に説明するよう心がけていますが、省略している個所もあります。また、間違いがあるかもしれませんので、あくまで参考程度にご覧ください。
  • パブリックサーバーにローカルサーバーと同じWordPressデータがアップロードしてあることが前提です
  • これ以降記載しているIPアドレスやユーザー名などは、ご自身の環境や設定に読み替えてご覧ください
  • 本記事に関してお問い合わせいただいてもお答えできませんので、自己責任でお願いします

構成図を書いてみました。

処理の流れはこんな感じです。

具体的な設定手順を以下にまとめていきます。

NASの設定

ローカルサーバーからNASにアクセスするためのユーザーと共有ディレクトリを準備します。

仮に上記のファイル共有設定がされているものとして説明します。ご自身の環境に読み替えてご覧ください。

※ 左側のフォルダアイコンがある /server はサーバー内の物理パスです

※ NASの設定は機器によって異なりますので、マニュアル等を参照のうえ設定を行ってください。

ローカルサーバーの設定

ローカルサーバー(ubuntu18.04) の設定をします。

仮に上記のIPアドレスに固定されているものとして説明します。ご自身の環境に読み替えてご覧ください。

※ Linuxサーバーでのエディタはleafpadコマンドを使用していますが、viでもnanoでもお使いのエディタに読み替えてください。

WordPressセットアップ

以下の場合を想定した説明をします。

WordPress設定メモ

インストール先:/var/www/html/test/

WordPressテーマ : Cocoon子テーマ

WordPress 編集テーマパス: /var/www/html/test/wp-content/themes/cocoon-child-master/

※ ご自身の環境に合わせて設定を読み替えてください

具体的な操作方法は以下の記事を参考にしてください

sambaセットアップ

apacheのドキュメントルート ”/var/www/html” にsambaでアクセスできるよう以下の設定がされているものとして説明をします。

samba設定メモ

アクセスパス: \\192.168.11.3\html\(サーバー内物理パス: /var/www/html )

ユーザー名:server

パスワード:pwd

※ ご自身の環境に合わせて設定を読み替えてください

/etc/samba/smb.confの設定例は以下です。ユーザーの作成も必要です。

[html]
   path = /var/www/html
   writable = yes
   create mode = 0777
   directory mode = 0777

WordPressの編集対象ディレクトリ以下をsambaユーザーも編集できるようパーミッションの変更が必要です。

※ BASIC認証にしている場合は、PCからsamba経由でローカルサーバーにアクセスする場合パスワード入力が必要になります(本記事の場合、ユーザー名:pc、パスワード:pwd)

fstab によるNAS自動マウント

NASをマウントし、再起動後もNASを自動的にマウントをするように設定します。

まず、マウント用のディレクトリを作成します。

$ sudo mkdir /mnt/nas/

fstabファイル最後に設定を1行追加します。以下の内容と相違がある場所は書き換えてください。

fstab設定内容

NASの共有ディレクトリパス ・・・ //192.168.11.2/server

マウント用ディレクトリ ・・・ /mnt/nas

NASのユーザー名 ・・・ server

NASのユーザーパスワード ・・・ pwd

※ 上記に相違がある場合は必要に応じて設定を変更してください

$ sudo leafpad /etc/fstab
:
//192.168.11.2/server /mnt/nas cifs vers=1.0,username=server,password=pwd,iocharset=utf8,defaults 0 0

※ 上記コマンドでうまくいかない場合は、versの数値を変更するとうまくいくかもしれません

最後にマウントを実行すれば完了です。

$ sudo mount -a

これで、ローカルサーバーの /mnt/nas に NASの//192.168.11.2/server がマウントされました。また、再起動後も自動的にマウントが実施されます。

Gitセットアップ

本記事での設定は以下です。

Git設定メモ

リポジトリパス : /var/lib/git/

リポジトリ名 : git-repository

SSH接続ユーザー:git-user

※ ご自身の環境に合わせて設定を読み替えてください

Gitをインストールし、初期設定を実施。user_name、xxx@xxx.comは任意のものでOK。

$ sudo apt-get update
$ sudo apt-get upgrade
$ sudo apt-get install git
$ git config --global user.name "user_name"
$ git config --global user.email "xxx@xxx.com"

リモートリポジトリを作成します。以下、”git-repository.git”というリポジトリ名なので、任意の名前に変更して作成してください。

$ cd /var/lib/git/
/var/lib/git$ sudo mkdir git-repository.git
/var/lib/git$ sudo chown git-user git-repository.git
/var/lib/git$ cd git-repository.git
/var/lib/git/git-repository.git$ sudo git init --bare --share

cron によるGitリポジトリ自動アーカイブ

アーカイブ先と、シェルスクリプトの配置ディレクトリを作成します。

$ sudo mkdir /mnt/nas/archive/
$ sudo mkdir /mnt/nas/cron/

シェルスクリプトを作成します。かなり久しぶりにシェルスクリプトを書いたのでバグがあったらすみません。以下の仕様で作ったつもりです。

  • 1日1回の実行を想定。7日分を保存。それより古いものは削除。
  • Gitのリポジトリディレクトリは全て/var/lib/git/直下に配置してあることを想定。
  • アーカイブ先は/mnt/nas/archive/git/。その下に、リポジトリ名のディレクトリを自動的に作成し、その下に指定日数分のアーカイブを保存します。
  • アーカイブファイル名は、[リポジトリ名]_archive_[年月日].zip です。
  • /var/lib/git/ にリポジトリが増えても、自動的に対象を追加するので、スクリプトの変更は不要。

1行目のコマンドを実施後、2行目以降をコピペしてください。

$ sudo leafpad /mnt/nas/cron/git-archive.sh
#! /bin/bash

# アーカイブ先
archive_destination_dir="/mnt/nas/archive/git/"
# リポジトリパス
repository_dir="/var/lib/git/"
# アーカイブを残しておきたい数
number_of_archives=7

for repository_path in ${repository_dir}*; do
  if [ -d $repository_path ] ; then
     # アーカイブ先ディレクトリが無ければ作成
    mkdir -p ${archive_destination_dir}${repository_path##*/}
     # アーカイブ数を超えた分を削除
    find ${archive_destination_dir}${repository_path##*/} -mtime +$((${number_of_archives}-1)) -exec rm -f {} \;
     # リポジトリのディレクトリに移動
    cd ${repository_path}
     # アーカイブ実行
    git archive HEAD -o ${archive_destination_dir}${repository_path##*/}/${repository_path##*/}_archive_$(date "+%Y%m%d").zip
  fi
done

crontabを編集します。

  • 毎日AM4:00に実行
  • シェルスクリプトの場所:/mnt/nas/crontab/git-archive.sh

上記仕様で問題なければ3行目をファイルに追加します。相違がある場合は修正してください。

$ sudo leafpad /etc/crontab
:
0 4    * * *    root    /mnt/nas/crontab/git-archive.sh

※ AM4:00を過ぎてもアーカイブファイルが作成されない場合は、スクリプト配置場所やアーカイブ先のパーミッションの確認をしてください。また、cronが動作していることをご確認ください。

※ シェルスクリプトの改行コードがLFになっていないとエラーになると思いますのでご注意ください

PCの設定

Koalaセットアップ

SCSSを使う場合は設定してください。使わない場合はこの項目は飛ばしてOKです。

Gitセットアップ

Visual Studio Codeを使ってGitの操作ができるようにします。

下記に /var/lib/git/git-repositoryをクローンするので、下記ディレクトリの全データを別の場所に移動して空にしておきます。

\\192.168.11.3\html\test\wp-content\themes\cocoon-child-master\

※ 上記はPCからsamba経由でローカルサーバーにアクセスする場合のパスです

※ 移動できない場合はローカルサーバー側からパーミッションを変更してみてください

※ PCから \\192.168.11.3\html\test\wp-content\themes\cocoon-child-master\ にアクセス時にユーザー名パスワードが要求されたら入力します。(本記事の場合はユーザー名:pc、パスワード:pwd)

Git設定メモ

リポジトリ置き場 : /var/lib/git/

リポジトリ名 : git-repository

SSH接続ユーザー名:git-user

クローン先: \\192.168.11.3\html\test\wp-content\themes\cocoon-child-master\

※ ご自身の環境に合わせて設定を読み替えてください

上記設定を参考に、以下リンク先の手順で設定をしてください。

クローン先を、ローカルサーバーのWordPressテーマにするところがポイントです。

Visual Studio Codeワークスペース作成/ ”SFTP”をインストール

Visual Studio Code でローカルサーバー上のデータを編集し、アドオン “SFTP” を使用してパブリックサーバーにFTPで接続する設定をします。

上記のようなパブリックサーバーのFTPアカウント情報をご準備のうえ、 以下を参考に設定を行ってください。

Visual Studio Code ワークスペース設定メモ

追加フォルダ : \\192.168.11.3\html\test\wp-content\themes\cocoon-child-master\

※リンク先の手順で上記パスにパブリックサーバー側のデータをダウンロードします。

※samba経由でアクセスすることで、ローカルサーバー上のWordPress子テーマを直接編集します

※ ご自身の環境に合わせて設定を読み替えてください

動作確認

ローカルサーバー、パブリックサーバー共に、WordPressが正しく動作していることを確認してください。

また、翌日4時以降にNASにGitのアーカイブが作成されていれば、 作業は終了です。

まとめ

環境を作るのには少し時間がかかりますが、一度作ってしまえばかなり快適な環境になると思います。

バックアップは完全自動化ですし、ローカルサーバーが壊れても、nasにバックアップがあるので安心です。

また、koalaをスタートアップに登録して自動起動にしてしまえば、Visual Studio Codeとブラウザだけで開発ができてしまいます。

興味のある方はお試しください。

THIS POST
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
MEMO WEB
COLOR CODE