CI / CD – Example

Example CI/CD Pipeline

This CI/CD pipeline automates the build and deployment process for a WordPress project, specifically targeting theme and plugin management. It consists of three main stages: build_composer, build_node, and deploy, all triggered only on the master branch to ensure production stability.

stages:
  - build_composer
  - build_node
  - deploy

variables:
  THEME_PATH: 'wp-content/themes/chisel-theme/'
  PLUGINS_PATH: 'wp-content/plugins/'
  
build_composer:
  image: php:8.3-alpine
  stage: build_composer
  artifacts:
    paths:
      - $THEME_PATH
  script:
    - echo "Building composer packages..."
    - cd $THEME_PATH
    - php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
    - php composer-setup.php
    - php -r "unlink('composer-setup.php');"
    - php composer.phar install --no-dev --prefer-dist --no-interaction
  only:
    - master

build_node:
  image: node:20.12.2
  stage: build_node
  artifacts:
    paths:
      - $THEME_PATH
  script:
    - echo "Building node packages..."
    - cd $THEME_PATH
    - npm install
    - npm run build-scripts
  only:
    - master

deploy:
  image: alpine:latest
  stage: deploy
  before_script:
    - 'which ssh-agent || ( apk add openssh )'
    - apk add rsync
    - eval $(ssh-agent -s)
    - echo "$SSH_KEY" | tr -d '\r' | ssh-add -
    - mkdir -p ~/.ssh
    - chmod 700 ~/.ssh
    - ssh-keyscan $SSH_HOST >> ~/.ssh/known_hosts
    - chmod 644 ~/.ssh/known_hosts
  script:
    - echo "Deploying theme and plugins to $HOME_PATH..."
    # deploy theme
    - echo "Deploying theme to $HOME_PATH/$THEME_PATH..."
    - rsync -avz --delete ./$THEME_PATH $SSH_USER@$SSH_HOST:$HOME_PATH/$THEME_PATH
    # deploy plugins
    - echo "Deploying plugins to $HOME_PATH/$PLUGINS_PATH..."
    - rsync -avz --delete ./$PLUGINS_PATH $SSH_USER@$SSH_HOST:$HOME_PATH/$PLUGINS_PATH
    - ssh $SSH_USER@$SSH_HOST -- "wp cache flush --path=$HOME_PATH --skip-plugins"
  variables:
    HOME_PATH: /public_html
  only:
    - master

stages:
  - build_composer
  - build_node
  - deploy

variables:
  THEME_PATH: 'wp-content/themes/chisel-theme/'
  PLUGINS_PATH: 'wp-content/plugins/'
  
build_composer:
  image: php:8.3-alpine
  stage: build_composer
  artifacts:
    paths:
      - $THEME_PATH
  script:
    - echo "Building composer packages..."
    - cd $THEME_PATH
    - php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
    - php composer-setup.php
    - php -r "unlink('composer-setup.php');"
    - php composer.phar install --no-dev --prefer-dist --no-interaction
  only:
    - master

build_node:
  image: node:20.12.2
  stage: build_node
  artifacts:
    paths:
      - $THEME_PATH
  script:
    - echo "Building node packages..."
    - cd $THEME_PATH
    - npm install
    - npm run build-scripts
  only:
    - master

deploy:
  image: alpine:latest
  stage: deploy
  before_script:
    - 'which ssh-agent || ( apk add openssh )'
    - apk add rsync
    - eval $(ssh-agent -s)
    - echo "$SSH_KEY" | tr -d '\r' | ssh-add -
    - mkdir -p ~/.ssh
    - chmod 700 ~/.ssh
    - ssh-keyscan $SSH_HOST >> ~/.ssh/known_hosts
    - chmod 644 ~/.ssh/known_hosts
  script:
    - echo "Deploying theme and plugins to $HOME_PATH..."
    # deploy theme
    - echo "Deploying theme to $HOME_PATH/$THEME_PATH..."
    - rsync -avz --delete ./$THEME_PATH $SSH_USER@$SSH_HOST:$HOME_PATH/$THEME_PATH
    # deploy plugins
    - echo "Deploying plugins to $HOME_PATH/$PLUGINS_PATH..."
    - rsync -avz --delete ./$PLUGINS_PATH $SSH_USER@$SSH_HOST:$HOME_PATH/$PLUGINS_PATH
    - ssh $SSH_USER@$SSH_HOST -- "wp cache flush --path=$HOME_PATH --skip-plugins"
  variables:
    HOME_PATH: /public_html
  only:
    - master

YAML

Stages Overview

build_composer: Focuses on installing PHP dependencies via Composer for the WordPress theme.
build_node: Handles Node.js dependency installation and executes front-end build scripts for the theme.
deploy: Securely transfers built theme and plugin files to the production server and clears the WordPress cache.

Variables

THEME_PATH: The relative path to the active WordPress theme (here set to wp-content/themes/chisel-theme/).
PLUGINS_PATH: The relative path to WordPress plugins (wp-content/plugins/).
HOME_PATH: Defines the root directory on the remote server where WordPress is installed (/public_html).

Stage Details

build_composer

Uses a lightweight php:8.3-alpine Docker image for PHP execution.
Downloads and installs Composer dynamically.
Runs composer install within the theme directory with optimized flags (--no-dev, --prefer-dist, and --no-interaction) for production-ready dependencies.
Persists the theme directory as artifacts, allowing subsequent stages to reuse built files.

build_node

Runs on a node:20.12.2 Docker image.
Installs Node.js dependencies inside the theme directory using npm install.
Executes the build script npm run build-scripts to compile frontend assets such as JavaScript and CSS.
The built theme directory is saved as artifacts for deployment.

deploy

Runs on a minimal alpine:latest image.
Installs necessary tools like openssh and rsync for secure deployment.
Sets up SSH agent with the provided private key ($SSH_KEY) for authentication.
Verifies the target SSH_HOST by adding it to known_hosts to prevent MITM attacks.
Synchronizes theme and plugins directories from the repository to the production server using rsync with archive and compression options, deleting files on the server that no longer exist in the source to keep the deployment clean.
Finally, triggers a WordPress cache flush on the server via the wp-cli command to ensure the latest changes take effect immediately.
$SSH_KEY, $SSH_USER and $SSH_HOST should be set in gitlab project variables section

This pipeline efficiently coordinates the build and deployment processes while adhering to best practices for WordPress theme and plugin management, leveraging containerized environments and secure SSH deployment.