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

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

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

関連記事

【備忘】gitのglobal userとlocal user使い分け

Macで初めてgit commitした時に、「お前は誰だ?」的な感じで怒られた。

でユーザー名とメールアドレスを指定する必要があるらし …

CSSで背景(background-color)を斜めにする

本サイトの紹介ページのように、CSSだけで背景を斜めにします。 目次 やりたいこと HTMLとCSS ポイント やりたいこと 以下のように右斜め上を支点として回転させ、二つのイメージが同色で重なること …

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

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

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

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

MAMPを移行したらphpMyAdminが起動しなくなった

古いMacからMAMPを個別に移行したら、phpMyAdminが起動しなくなった。 どうやらMySQLのユーザー/パスワードが不一致になってしまったようだ。 関連して他のエラーも発生したため、一連で対 …