Dev Houseの内部:LITEおよびPRO WordPressテーマの自動テーマ展開の処理方法

ご想像のとおり、テーマの開発は、私たちの会社で多くのことを行っています。常に4-5の新しいテーマプロジェクトが進行中で、80のテーマが 私たちのディレクトリ 全体的に(つまり、アクティブなメンテナンスとそれらのさらなる開発を意味します)、私たちの手はかなり充実しています.


このような設定では、可能な限り、最適化と自動化さえも重要です.

今日は、私たちの開発ハウスのドアからあなたを招待したいと思います テーマアイル, いわば、テーマ開発パズルの2つの特定の部分をお見せします.

この種の投稿が実験であることを隠しません。楽しんでいただければ、今後もこういうものをもっとたくさん出していきます.

具体的には、今日の話題は、, "WordPressテーマ開発のための自動デプロイメントと視覚回帰アーキテクチャ."

待って、自動テーマ展開とは?

開発者を話さない場合、英語で意味するところは、WordPress用のテーマを開発してサーバーにデプロイし、その違いを手動で何もせずに事前定義されたベースラインと視覚的に比較できるということです。.

それはすべて自動的に、またはむしろ, "自動的に."

これはどのように作動しますか?

この自動テーマ展開を処理する2つのサービスを開発しました。 "海賊ブートストラップ" そして "海賊レイス."

最初の1つ、Pirate Bootstrapは、 Webhook GitHubから.

プルリクエストでは、セットリポジトリからの特定のテーマと、ThemeIsleのテーマのデフォルトデモから取得したすべてのパッケージとデータベース設定を使用して、新しいWordPressインスタンスをデプロイします.

後者の海賊レイスは、視覚回帰テスト(別名2つのソースからの画像の比較)を行います。テストでは、テーマの新しい展開をThemeIsleのデモに対して(視覚的に)チェックし、レポートを生成します。そのレポートに基づいて、最近の変更がテーマの外観に影響を与えたかどうかをすばやく確認できます.

つまり、テーマで作業していて、最新のコード変更がテーマのデザインを台無しにしていないことを確認したい場合は、Pirate Wraithを使用して自動操縦でタスクを処理できます。.

各サービスについて詳しく説明します。

海賊ブートストラップ–設定されたテーマを使用してWordPressの新しいインスタンスをデプロイします

Pirate Bootstrapはforks.themeisle.comでホストされています

海賊ブートストラップは上に構築されています WP-CLI そして 完全なWordPressデプロイメントを生成するメソッドがあります ThemeIsleテーマパッケージと依存関係に基づく.

要素:

GitHub Webhook

Webフックは、JSONペイロードをhttp://forks.themeisle.comに送信して、プルリクエスト(オープンまたは同期)でPirate BootstrapのAPIを呼び出すために使用されます

これにより、forks.themeisle.comで展開ワークフローが開始されます。そのようです:

LITEおよびPRO WordPressテーマの自動テーマ展開

GitHubプルリクエストペイロードの例:

{
"アクション": "開いた",
"数":1,
"pull_request":{

"頭":{
"ラベル": "preda-bogdan:production",
"ref": "製造",
"シャ": "****",

"レポ":{
"id":82166596,
"名前": "ゼリフライト",
"フルネーム": "preda-bogdan / zerif-lite",
"オーナー":{
"ログインする": "プレダボグダン",

},
"民間":false,

"git_url": "git://github.com/preda-bogdan/zerif-lite.git",
"ssh_url": "[email protected]:preda-bogdan / zerif-lite.git",
"clone_url": "https://github.com/preda-bogdan/zerif-lite.git",
"svn_url": "https://github.com/preda-bogdan/zerif-lite",

}
},

}
}

  • 私たちは "シャ" それが有効なリクエストであるかどうか、およびペイロードの処理が許可されているかどうかを確認するためのキー.
  • を使用しております "ログインする", "名前" そして "ref" テナントが存在しない場合は生成する.

ファイル構造

サーバー上のファイル構造は、各テナントを独自のパブリックフォルダーに格納し、WordPressのコアインストールを使用して、各テナントのシンボリックリンクを参照するように設定されています。.

テナントファイルの構造は次のとおりです。

テナント/
| _ wp / / ** WordPressのsymlinkコアインストール
| _ contents / / ** WordPressのテナントコンテンツフォルダー
| | _ themes / / ** WordPressのテナントテーマフォルダー
| | _ plugins / / ** WordPressのテナントプラグインフォルダー
| _ .htaccess / **テナント用に自動生成された.htaccess
| _ vhost.conf / ** Apacheのエイリアス設定ファイル
| _ wp-config.php / **テナント用に自動生成された設定ファイル

wp /フォルダーは、すべてのテナントで共有されるWordPressのコアインストールを参照します。このようにして、WordPressの単一のインストールとWordPressサイトの複数の独立したインスタンスを作成でき、それぞれにカプセル化された設定、ファイル、リソースが含まれます。.

wp-config.phpコアとテナントファイル

コアWordPress wp-config.phpの例:

/ ** WordPressディレクトリへの絶対パス。 * /
require_once($ _SERVER [‘CONTEXT_DOCUMENT_ROOT’]。 ‘wp-config.php’);

/ ** WordPressの変数と含まれるファイルを設定します。 * /
require_once(ABSPATH。 ‘wp-settings.php’);

テナントwp-config.phpの例:

(二重中括弧内に含まれる値は、テナントの作成時に自動的に置き換えられます。)

/ ** BOOTSTRAP APIによって追加されました* /
{{MYSQL_CONNECTION_TENANT_DATA}}

define( ‘AUTH_KEY’、 ‘{{AUTH_KEY}}’);
define( ‘SECURE_AUTH_KEY’、 ‘{{SECURE_AUTH_KEY}}’);
define( ‘LOGGED_IN_KEY’、 ‘{{LOGGED_IN_KEY}}’);
define( ‘NONCE_KEY’、 ‘{{NONCE_KEY}}’);
define( ‘AUTH_SALT’、 ‘{{AUTH_SALT}}’);
define( ‘SECURE_AUTH_SALT’、 ‘{{SECURE_AUTH_SALT}}’);
define( ‘LOGGED_IN_SALT’、 ‘{{LOGGED_IN_SALT}}’);
define( ‘NONCE_SALT’、 ‘{{NONCE_SALT}}’);

define( ‘WP_DEBUG’、false);

define( ‘WP_CONTENT_DIR’、 ‘{{tenant_folder}} / content’);
define( ‘WP_CONTENT_URL’、 ‘{{tenant_folder}} / content’);
define( ‘WP_PLUGIN_DIR’、 ‘{{tenant_folder}} / content / plugins’);
define( ‘WP_PLUGIN_URL’、 ‘{{tenant_url}} / content / plugins’);

if(!defined( ‘ABSPATH’))
define( ‘ABSPATH’、dirname(__ FILE__)。 ‘/ wp’);

テナントの作成後、エンドポイントにクエリを実行して、テーマの展開に必要なパッケージ(プラグイン、子テーマ、データベース)を取得します。パッケージはサーバーのstashフォルダーにキャッシュ/保存され、6時間ごとに更新されます.

次のステップは、デプロイするテーマが単一のデプロイメントであるか、またはベースのテーマから追加のテーマを生成する必要があるかどうかを確認することです.

  • 単一のデプロイの場合は、git pullを使用して "ssh_url" テナント/コンテンツ/テーマ/.
  • 単一のデプロイメントでない場合は、tmp /にgit pullを実行し、grunt generateを実行して、結果のフォルダーをtenant / content / themes /にコピーします.

グラント生成タスクは、複数のバージョン(通常は "ライト" そして "プロ")同じコードベース(リポジトリ)を使用しているとき。たとえば、hestia-proリポジトリに対してgrunt generateを実行すると、ライトバージョンも自動的に取得されます.

上記を処理した後、WP-CLIを使用して必要なすべてのパッケージ(プラグインや子テーマ)をインストールし、demo.themeisle.comからデータベースダンプをインポートします.

最後の手順は、.htaccess書き換えルールをフラッシュし、更新することです "サイトのURL" そして "家" テナントURLとWordPress CoreのURLを使用して、メニュー項目と投稿のリンクを更新し、最後にApacheを再読み込みします.

次に、プルリクエストのフォークされたURLと展開中に生成されたログをメールでユーザーに送信します。 (生成された各テナントは、次の一般的なURLモデルに従います:http://forks.themeisle.com/github-login/theme-slug/branch/)

海賊ブートストラップ–ヒント & トリック、およびその他の有用な情報

forks.themeisle.comにアクセスすると、端末のようなインターフェースにアクセスできます。 "〜" (チルダキー)そして、そこからたくさんの便利なコマンドを実行します。最も関連するものは次のとおりです。

テナント展開のリセット

コマンドはpirate reset tenant [tenant](* theme-slug)です。

例:

海賊リセットテナントpreda-bogdan / zerif-lite / development |  

または:

海賊リセットテナントプレダボグダン/ヘスティア/開発ヘスティアプロ|

リセットコマンドは、テナントを元のデプロイ状態に戻します(データベースのリセット、プラグインや子テーマの再インストール)。.

ログを表示する

コマンドはshow logsです。このコマンドは、展開後にログファイルを確認する必要があり、まだメールを受け取っていない場合、またはデバッグする必要がある場合に役立ちます。.

注:ファイルサイズが9000バイトを超えると、ログファイルがローテーションされるため、探しているものが見つからない場合は、サーバーでログアーカイブを直接確認する必要があります.

海賊レイス–テーマの2つのバージョンを視覚的に比較します

Pirate Wraithはwraith.themeisle.comでホストされています

海賊レイスは上に構築されています レイス また、レイス機能を活用して視覚回帰テストおよびレポートを生成するために、Slack、Travis、およびAJAXリクエストと相互作用するエンドポイントがあります。.

トラヴィス

Pirate Wraithは、Travisビルドからのリクエストをリッスンするwraith.themeisle.comのエンドポイントを公開します。 "失敗する" または "パス" Visual Regression Testの結果によるビルド.

.travis.ymlファイル内に、既存のビルドの上に新しいビルドを定義する新しいマトリックスを追加しました。これにより、プロジェクト内でbashスクリプトを実行するための権限が設定され、実行されます.

Travis YMLファイル:

マトリックス:
含める:
– php: "7.0"
before_install:chmod + x wraith.sh
インストール:
before_script:
env:TEST_SUITE = Wraith_Visual_Regression_Testing WRAITH_FAIL = 5
スクリプト:./wraith.sh

あなたはそれを見ることができます "インストール" そして "before_script" 空白のままにします。これは意図的なものであるため、ビルドは以前に定義されたビルドからアクションを継承しません。このビルドでbashスクリプト(スクリプト:./wraith.sh)を実行することにのみ興味があります。.

また、注意してください。 WRAITH_FAILという環境変数を設定しています。この値は、テストに合格するための最大許容パーセンタイル差が何であるかをパイレーツレイスに伝えるために使用されます.

Bashスクリプト:

#!/ bin / bash
WRAITH_SLUG = $(node -pe "require( ‘./ package.json’)。wraithSlug")
WRAITH_FAIL = $ {WRAITH_FAIL:-5}
本文="{
‘リクエスト’: {
‘travis_event_type’: ‘$ TRAVIS_EVENT_TYPE’,
‘travis_pull_request’: ‘$ TRAVIS_PULL_REQUEST’,
‘travis_repo_slug’: ‘$ TRAVIS_PULL_REQUEST_SLUG’,
‘travis_branch’: ‘$ TRAVIS_PULL_REQUEST_BRANCH’,
‘wraithSlug’:$ WRAITH_SLUG,
「wraithFail」:$ WRAITH_FAIL,
}
}"
エコー "$ TRAVIS_PULL_REQUEST_SLUGブランチのビルドのトリガー
Travisで$ TRAVIS_PULL_REQUEST_BRANCH ‘."
output = $(curl -sw "%{http_code}" -Xポスト\
-H "Content-Type:application / json" \
-H "承諾:application / json" \
-H "Travis-API-Version:3" \
-d "$ {body // \ ‘/ \"}" \
‘http://wraith.themeisle.com’)
http_code ="$ {output:$ {#output} -3}"
if [$ {#output} -eq 3];その後
本文=""
そうしないと
本文="$ {output:0:$ {#output} -3}"
fi

if [$ http_code!= 200];その後
エコー "$ output";
1番出口
そうしないと
エコー "$ output";
出口0
fi

つまり、このスクリプトは、デフォルトのTravis環境変数とユーザー設定の変数を含むJSONペイロードを作成します。また、packages.jsonを読み取り、テーマslugを取得します.

スクリプトの2番目の部分は、POSTリクエストを実行します "カール" Pirate Wraithに送信し、応答のHTTP / 1.1ステータスコードを取得するために応答を解析します.

ステータスコードを使用して "不合格" または "パス" ビルド。 Pirate Wraith APIは、処理するリクエストごとに有効なHTTP / 1.1コードを返します.

  • 完全なテストに合格すると、コード200が返されます.
  • それ以外の場合は、ビルドは1(終了1)の終了コードで失敗します。

レイスの比較が何であるか疑問に思われるかもしれません。答えは簡単です。 Pirate Bootstrapからの現在のプルリクエストのテナント展開とターゲットテーマのデモを比較します.

GitHub – Travis – Pirate Bootstrap – Pirate Wraithライフサイクルの理解を深めるために、これらのサービスのワークフローを示す図を次に示します。

海賊ブートストラップ/海賊レイスのワークフロー

ご覧のように, GitHub 両方に通知します 海賊ブートストラップ そして トラヴィス 新しいプルリクエストについて。ブートストラップがテナントの展開を開始するとTravisが尋ねる 海賊レイス テストを開始する.

海賊レイス のデモのテナントバージョンと テーマアイル デモを行い、結果を トラヴィス, それができるように パス または 不合格 ビルド.

スラック

Travisのサポートに加えて、Pirate WraithにはSlackと統合するためのエンドポイントがあります。.

Travisからのビルドが完了(成功または失敗)した後、生成されたギャラリーへのリンクと見つかった違いの要約を含むレポートが#eyepatchチャネル内に生成されます.

また、任意のチャネルで使用できるいくつかの便利なSlackコマンドも組み込まれています(注:Pirate Wraith APIはそのチャネルでパブリックレスポンスで応答するため、セルフチャットでコマンドを使用することをお勧めします)。 Slackのコマンドは次のとおりです。

テーマの履歴ベースラインショットをリセットする

/ wraith-history [テーマスラッグ]

例:

/ wraith-history zerif-lite |

テーマの履歴ショットと比較する

/ wraith-latest [theme-slug] [url]

例:

/ wraith-latest zerif-lite http://forks.url/pb/zerif-lite |

このコマンドは、提供されたスラッグを使用して、指定されたURLをそのスラッグの履歴と比較します.

2つのURLの比較

/ wraith-compare [url]と[url]

例:

/ wraith-compare http://url.oneとhttp://url.two 

海賊レイス–ヒント & トリック、およびその他の有用な情報

テーマの履歴ベースラインショットをリセットする

レイスのリセット履歴[theme-slug]

このコマンドは、指定されたスラッグの履歴をリセットします.

テーマの履歴ショットと比較する

レイスチェック最新[theme-slug] [url]

このコマンドは、提供されたスラッグを使用して、指定されたURLをそのスラッグの履歴と比較します.

2つのURLの比較

wraith比較URL [url-one] [url-two]

ログを表示する

コマンドはshow logsです。このコマンドは、ログファイルを確認する必要がある場合に役立ちます。 Pirate Bootstrapと同じように機能します.

あなたの見方?

これは、2つの新しいサービスと、それらを使用してWordPressテーマの展開を自動化する方法をほぼまとめたものです。.

独自のニーズを満たすためにPirate BootstrapとPirate Wraithの両方を作成しましたが、これらのコンセプトは、同様の開発プロジェクトで作業している誰にとっても同様に役立つと信じています。特に、派生製品(この場合はプロとライトのWordPressテーマなど)を構築していて、特定のコード変更が外観にどのような影響を与えているかを確認したい場合.

WordPressテーマの問題は、ほとんどの最新のテーマのコードベースが急速に成長する傾向にあり、これらのコードベースの特定の要素がテーマの他の要素の外観に予測できない影響を与える可能性があることです。人間の目で物事を見るだけで、それらすべてを手動で捉えようとすることは非常に困難な場合があるため、何らかの形のアルゴリズム/自動化をミックスに導入することは常に大きな助けになります。.

しかし、どう思いますか?他のプロジェクトでもこのようなツールの価値を理解していますか?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map