とあるエンジニアの作業ブログ

CI JavaScript Web製作 運用

GulpでWordPressのCI 〜設計編〜

投稿日:2019年1月17日 更新日:

WordPressのテーマファイルをローカルで開発してgithubにpush、そのままサーバーまでデプロイするCIを実現しようと考えています。自分の環境とか踏まえてまずはどうやって実現するか設計しました。

やりたいこと

以下のような流れを実現したい。

  1. ローカルでテーマファイル(~/wordpress/wp-content/themes/[テーマ名称]/配下の.phpや.cssなど)を修正
  2. featureブランチまでpush
  3. masterにmergeする際に開発と本番で設定値が異なる箇所を置換(AdSenseやGTA設定など)
  4. masterにpush
  5. ビルドワークスペースにmasterをcloneしてbuild。その際にコメント削除、ファイル圧縮
  6. 本番環境の資源バックアップ(git管理しているものの念のため)
  7. 本番デプロイ

動作環境・前提

サーバーは各人状況が違うとは思いますが、私の動作環境をベースに考えます。
全体のタスクランナーはgulpを使う予定です。

【共通】
  • repositoryはgithub
  • 本番資源はmaster、開発資源はfeatureブランチで管理
【ローカル環境】
  • Mac OS X High Sierra
  • git version 2.20.1
  • bash
  • node v8.14.0
  • npm v6.4.1
  • gulp CLI version 2.0.1
  • gulp Local version 4.0.0
【サーバー環境(本番)】
  • レンタルサーバー
  • SFTP / SSH利用可能
  • npmが使えるかどうかは不明(動かなかったら嫌なので今回は使わない。npmが使えるならサーバー側でgulp動かしても良い気がする)

全体設計

Develop(ローカルでの開発)、Commit(masterへのpushまで)、Build(workspaceでのビルド)、Deploy(バックアップと本番へのデプロイ)の4段階で考えます。
それぞれの段階を1ジョブ(タスク)的に考え、Developは開発作業なので手作業ですが、Commitから先を自動化しようと考えてます。

wordpressでci 全体設計
 
作り始めたら色々見直し必要だと思いますが、とりあえずこれで進めてみます。
 
 
実装編を公開しました。

-CI, JavaScript, Web製作, 運用
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。

関連記事

【WordPress】画像URLをショートコード化する

imgタグなどでsrc属性を指定する際の、画像uriをショートコード化して環境差異を無くします。 目次 作業の目的 メディア設定の変更 functions.phpにuploadsディレクトリを返すショ …

STINGER8で初めての投稿の準備をする

WordPressのテーマ、STINGER8を利用した場合の、初めての投稿の準備をします。 目次 前提 アウトプットイメージの確認 投稿の基本形を考える ソースコードをブログ上に表示させるための準備 …

ドローンが飛ぶGIFアニメーションを作ってみた

  上のようなドローンが飛ぶGIFアニメーションを作ったときの要点メモ。Photoshopのどのような機能を使ったかや注意すべきポイントに絞って記載。 (ドローン画像の作り方や飛んでいるよう …

【Stinger8】固定ページを自由にデザインしてみた

HTML/CSSがかける人は、テーマ標準の固定ページだとデザイン変更しづらいのではないでしょうか?? Wordpressにループって概念があるのはうっすらとは知ってますけど、、、何もあんなにまんまブロ …

Stinger8のサイドバーにプロフィールを表示する

Stinger8のサイドバーにプロフィールを表示します。 目次 前提 作業手順 ウィジェットにHTMLを記述 CSSで見た目を整える 前提 WordPressがインストールされている Stinger8 …