Presentation slides from my talk at WordCamp Utrecht November 2017

1. Deploy your code using version control and continuous integration
PRODUCTION-READY WORDPRESS

2. • Presenter
• Front End Developer
• Senior Sales Engineer - WP Engine
• Music Technology
Edmund Turbin
@spicecadet

3. Production
Ready Wordpress
Contents
The Problem
The Solution
The Script
Demonstration
Learnings
Deployment, version control and continuous
integration

4. The Problem

5. Deploy your
site
• Manage the way code is deployed
• Automate repetitive tasks for devs, admins when changes
go live
• Make it easy to use best practices
• Allow for flexibility, multiple deploy processes, safe testing

6. The Solution

7. The Solution
• Develop Locally
• Distributed Version Control
• Don’t keep plugins and WP core in repository
• Deploy to testing environment prior to production
• Automate build and testing

8. Continuous
Integration
• Multiple developers share code
• Several pushes per day
• Each push verified by automated build
• Avoids “integration hell”
• Teams can detect problems early

9. Workflow
• Local Development
• Central Version Control
• Continuous Integration Pipelines
• Build Script
• Dependencies
• Push to server

10. Version
Control
Repo

11. Workflow
Install
&
Build
Repo Deps Push
Deployment

12. Initial Setup
Setup
Clone
Repo
Install
Apps
Configure
Env
Build

13. Build
Build ConcatUglify
Compile
Sass/Less
JS Lint

14. Dependencies
Dependencies PluginsWPackagist

15. Testing
Test
Automated
Testing

16. Tools

17. Theme

18. Local
Development

19. Build

20. Collaboration/
VCS

21. Dependencies

22. Continuous
Integration Tool

23. Continuous
Integration Tool

24. Continuous
Integration Tool

25. Continuous
Integration Tool

26. Continuous
Integration Tool

27. Automated
Testing

28. Automated
Testing

29. The Script

30. # Set Constants
INSTALL="edmund"
EMAIL="edmund.turbin@wpengine.com"
ENVIRONMENT=“production"
# Use Node 8.7.0
nvm use stable
# Disable Xdebug
rm -f /home/rof/.phpenv/versions/$(phpenv version-name)/etc/conf.d/
xdebug.ini

31. # Codeship project root is the ~/clone directory
cd ~/clone
# Set production remote and config
git config --global user.name "Codeship Deploy"
git config --global user.email "$EMAIL"
git remote add $ENVIRONMENT git@git.wpengine.com:$ENVIRONMENT/
$INSTALL.git
# Unset shallow fetch and fetch origin
git fetch --unshallow || true // not all versions of each file
git fetch origin "+refs/heads/*:refs/remotes/origin/*"

32. # Run Composer to install dependencies
cd wp-content/themes/sage
composer install --prefer-source —no-interaction
# Run build tasks
npm install
bower install
gulp —production

33. # Remove unnecessary files
rm -rf vendor/
rm ~/clone/.gitignore
git rm ~/clone/.gitignore
# Git Commit and Push
git add --all
git commit -m "Codeship Deployment"
git push $ENVIRONMENT HEAD:master --force

34. # Assertible Tests
curl -u DLI7uFTdkcpfcXdQ: "https://assertible.com/deployments" -d'{
"service": "43994ec7-41e0-4d7f-9155-6945816333f1",
"environmentName": "production",
"version": "v1"
}'

35. DemonstratioN

36. Learnings

37. Codeship
• Uses a virtual machine at time of deploy
• Has many common binaries installed, possible to install more
• Caches NPM packages
• Can be used in Debug mode which allows you to SSH into the
virtual machine and run commands until happy

38. Git Integration
• Understanding how to move files from Codeship was
difficult
• A few different attempts to make this happen
• Possible to use FTP, but Git is more streamlined and quicker
• git push — force option important - not all files in the repo
are needed in production

39. Build
• Gulp, Grunt, Webpack.js, etc. can all be run during
deployment
• Local development can use it’s own build script
• Possible to use different tasks or build scripts for each
branch
• Allows for release management - deploy different branches
to their own server environments (stage, test, production)

40. Next Steps
• Do more testing with Assertible 😁
• Remove all source files and unnecessary files like readme 😎
• Create automated rollback functionality 😵
• Wishlist: Visual Regression Testing with NPM/Wraith, Backstop.js 👊

42. Reference
Team Collaboration with Github
7 Easy Steps to Continuous Deployment
Optimize Local Development
Codeship Deployment Script
Post Deployment Smoke-Testing with Assertive

43. Questions
@spicecadet
edmund.turbin@wpengine.com