Upload
jeroen-van-dijk
View
99
Download
0
Embed Size (px)
Citation preview
THE ENTERPRISE WOR/D/THY/PRESS
THE FAMOUS 5-MINUTE INSTALLATION
WORDPRESS
BUT WHAT ABOUT MAINTENANCE?
WORDPRESS
IS THE ADMIN THE BEST PLACE?
MANAGE THEMES & PLUGIN VERSIONS?
WORDPRESS
CHANGES OR NEW FUNCTIONALITY
HOW DO YOU TEST OR DEVELOP?
WORDPRESS
WITH MINIMAL DOWNTIME
AND WHAT ABOUT DEPLOYING?
WORDPRESS
FOR THE BEST USER EXPERIENCE
IT NEEDS TO BE FAST!
WORDPRESS
DEVOPS CLI FRONTEND SEARCH
DEVOPS CLI FRONTEND SEARCH
WE NEED FULL CONTROL OF DEV & OPS
TO DEPLOY TO MULTIPLE ENVIRONMENTS
DEPENDENCY MANAGEMENT
FOR CONSISTENT ENVIRONMENTS
AUTOMATION
DEV DEPENDENCY MANAGEMENT
GETCOMPOSER.ORG
COMPOSER
DEPENDENCY MANAGEMENT
PHP PACKAGE REPOSITORY
PACKAGIST.ORG
DEPENDENCY MANAGEMENT
CUSTOM PATHS DEFINITIONS
COMPOSER INSTALLERS
DEPENDENCY MANAGEMENT
COMPOSER’ED’ PLUGIN & THEME MIRROR OF WORDPRESS.ORG
WPACKAGIST.ORG
DEPENDENCY MANAGEMENT
NOT SUPPORTED IN WORDPRESS CORE :(
COMPOSER
DEPENDENCY MANAGEMENT
GITHUB.COM/JOHNPBLOCH/WORDPRESS
BUT THERE IS A SOLUTION
DEPENDENCY MANAGEMENT
DEPENDENCY MANAGEMENT
{ "name": "epwp/wordpress", "type": "project", "require": { "php": ">=7.0", "johnpbloch/wordpress": "4.6.1" }, "extra": { "wordpress-install-dir": "custom/path" } }
1 . 2 . 3 MAJOR . MINOR . PATCH
BC-BREAKS . FEATURES . FIXES
SEMVER
DEPENDENCY MANAGEMENT
~ 1 . 2 . 3 ^ 1 . 2 . 3
VERSIONING
DEPENDENCY MANAGEMENT
ROOTS.IO/BEDROCK
BEDROCK
BEDROCK
BEDROCK
├── composer.json ├── config │ ├── application.php │ └── environments │ ├── development.php │ ├── staging.php │ └── production.php ├── vendor └── web ├── app │ ├── mu-plugins │ ├── plugins │ ├── themes │ └── uploads ├── wp-config.php ├── index.php └── wp
NEVER HARDCODE OR STORE VARIABLES
WP-CONFIG CHANGES
BEDROCK
BEDROCK
/** * Use Dotenv to set required environment variables * and load .env file in root */ $dotenv = new Dotenv\Dotenv($root_dir); if (file_exists($root_dir . '/.env')) { $dotenv->load(); $dotenv->required( [ 'DB_NAME', 'DB_USER', 'DB_PASSWORD', 'WP_HOME', 'WP_SITEURL' ] ); }
OPS AUTOMATION
PROVISIONING, CONFIGURATION & DEPLOYMENT
ANSIBLE
AUTOMATION
IN YAML FORM
PLAYBOOKS
AUTOMATION
AUTOMATION
--- - hosts: webservers vars: http_port: 80 max_clients: 200 remote_user: root tasks: - name: ensure apache is at the latest version yum: name=httpd state=latest - name: write the apache config file template: src=/srv/httpd.j2 dest=/etc/httpd.conf notify: - restart apache - name: ensure apache is running (and enable it at boot) service: name=httpd state=started enabled=yes handlers: - name: restart apache service: name=httpd state=restarted
DOCS.ANSIBLE.COM/ANSIBLE/
MODULES
AUTOMATION
COMMUNITY ROLE MANAGER
ANSIBLE GALAXY
AUTOMATION
AUTOMATION
- name: composer src: geerlingguy.composer version: 1.2.7
- name: ntp src: resmo.ntp version: 0.3.0
- name: logrotate src: nickhammond.logrotate version: fc3ea4
FOR SENSITIVE DATA ENCRYPTION
ANSIBLE VAULT
AUTOMATION
AUTOMATION
vi file_with_passwords.yml
==
ansible-vault edit file_with_password.yml
.VAULT_PASS NOT UNDER VERSION CONTROL
KEEP YOUR KEY PRIVATE
AUTOMATION
ANSIBLE-PLAYBOOK DEPLOY.YML -E ENV=<ENV> -E SITE=<SITE>
DEPLOY WITH CONFIDENCE
AUTOMATION
ROOTS.IO/TRELLIS
TRELLIS
TRELLIS
FOR LOCAL DEVELOPMENT
VAGRANT
AUTOMATION
§ Nginx § MariaDB § PHP 7.0 § Composer § WP-CLI § LetsEncrypt SSL § Page caching like Varnish § Data caching in memory § Ops best practices
TRELLIS
TRELLIS
epwp.com/ # → Root folder for the project ├── trellis/ # → Automation, provision, deployment └── site/ # → A Bedrock-based WordPress site └── web/ ├── app/ # → WordPress content directory └── wp/ # → WordPress core (don't touch!)
DIY LET’S BOOTSTRAP THIS!
TRELLIS
mkdir epwp.com
cd epwp.com
git clone https://github.com/jvandijk/epwp-trellis.git trellis
git clone https://github.com/jvandijk/epwp-site.git site
DEVOPS CLI FRONTEND SEARCH
FASTER ADMINISTRATION OF WORDPRESS
WP CLI
WP-CLI
WP-CLI
vagrant@epwp:/srv/www/epwp.com/current$ wp cli info
PHP binary: /usr/bin/php7.0 PHP version: 7.0.11-2+deb.sury.org~xenial+2 php.ini used: /etc/php/7.0/cli/php.ini WP-CLI root dir: phar://wp-cli.phar WP-CLI packages dir: /home/vagrant/.wp-cli/packages/ WP-CLI global config: WP-CLI project config: /srv/www/epwp.com/current/wp-cli.yml WP-CLI version: 0.24.1
TO EXECUTE DIRECT DATABASE QUERIES
WP DB
WP-CLI
MIGRATE YOUR DATA
WP EXPORT & IMPORT
WP-CLI
MODIFY CONTENT
WP SEARCH-REPLACE
WP-CLI
INSTALL, CHECK-UPDATE, MULTISITE CHANGE
WP CORE
INSTALL, CHECK-UPDATE, MULTISITE CHANGE
WP CORE
`WP PACKAGE BROWSE` FOR MORE OSS CLI EXTENSIONS
WP CLI PACKAGES
WP-CLI
GENERATE CODE ACCORDING TO BEST PRACTICES
WP SCAFFOLD
SCAFFOLDING
GENERATE CODE FOR PLUGIN
WP SCAFFOLD PLUGIN <SLUG>
SCAFFOLDING
GENERATE CODE FOR A CUSTOM POST TYPE
WP SCAFFOLD POST-TYPE <SLUG>
SCAFFOLDING
GENERATE THE CODE FOR A TAXONOMY
WP SCAFFOLD TAXONOMY <SLUG> —POST-TYPES=<A,B>
SCAFFOLDING
IMPLEMENT PLUGIN
<?php /* Plugin Name: My WP extension Plugin URI: https://www.a-wp-site.com/ Description: WordPress extension Version: 1.0.0 Author: Enrise Author URI: https://www.enrise.com */ require_once('src/Bootstrap.php');
new \Bootstrap::getInstance();
IMPLEMENT PLUGIN
public static function getInstance() { if ( ! ( self::$instance instanceof self ) ) { self::$instance = new self(); }
return self::$instance; }
protected function __construct() { add_action( 'plugins_loaded', [ $this, 'doYourThing' ], 100 ); }
public function doYourThing() { // trigger your scaffolded code from here return; }
LIST, SEARCH, INSTALL, ACTIVATE, UPDATE
WP PLUGIN
3RD PARTY PLUGIN
LIST, SEARCH, INSTALL, ACTIVATE, UPDATE
WP PLUGIN
3RD PARTY PLUGIN
TO LOCK ON A VERSION
COMPOSER REQUIRE WPACKAGIST-PLUGIN/SLUG
3RD PARTY PLUGIN
ADVANCEDCUSTOMFIELDS.COM
LET’S EXTEND THAT CUSTOM POST TYPE
CUSTOM FIELDS
COMPOSER REQUIRE WPACKAGIST-PLUGIN/ADVANCED-CUSTOM-FIELDS
ADVANCED CUSTOM FIELDS
CUSTOM FIELDS
WILL BE STORED IN DATABASE
DESIGN CUSTOM FIELD ADDITIONS IN THE ADMIN
CUSTOM FIELDS
UNFORTUNATELY NO DIRECT SCAFFOLDING
EXPORT CUSTOM FIELDS TO PHP
CUSTOM FIELDS
DEVOPS CLI FRONTEND SEARCH
DECOUPLED CMS
GOING HEADLESS
NO MONOLITH STRATEGY
SCALING UP
TRANSPILE TO SUPPORT OLDER TECHNOLOGIES
BLEEDING EDGE JAVASCRIPT & CSS
START USING IT TODAY!
ECMASCRIPT 2016
NPM INSTALL ESLINT —SAVE-DEV
ESLINT
NPM INSTALL ESLINT-CONFIG-AIRBNB —SAVE-DEV
ESLINT-CONFIG-AIRBNB
.ESLINTRC
{ "root": true, "extends": "airbnb", "globals": { "wp": true }, "parser": "babel-eslint", "rules": { "react/jsx-filename-extension": [ 1, { "extensions": [".js", ".jsx"] } ], } }
TRANSPILE DOWN TO ECMASCRIPT 5
BABEL JS
MODULE BUNDLER
WEBPACK
COMPONENT BASED STRATEGY
src/components/blocks/Logo/├── Logo.css├── Logo.js├── package.json└── logo.svg
EXTRACT-TEXT, FILE-LOADER, URL-LOADER
WEBPACK PLUGINS
AUTO RELOAD ON EVERY CODE CHANGE
WEBPACK HOT MIDDLEWARE
DESIGN IN MULTIPLE BROWSERS SIMULTANEOUS
BROWSER SYNC
DEVELOPER EXPERIENCE
COMPLETE DECOUPLE THE FRONTEND
WORDPRESS REST API
COMPOSER REQUIRE WP-API/WP-API
WORDPRESS REST API
USE THE POWER OF AMAZON S3
MEDIA STORAGE
COMPOSER REQUIRE HUMANMADE/S3-UPLOADS
MEDIA STORAGE
ARE YOU READY?
NOW LET’S START SETTING UP
SERIOUSLY?
LET’S NOT REINVENT THE WHEEL..
SERIOUSLY?
ROOTS.IO/SAGE
SAGE
§ Sass for stylesheets § ES6 for JavaScript § Webpack for compiling assets, optimizing images, and
concatenating and minifying files § BrowserSync for synchronized browser testing § Bootstrap 4 for a front-end framework § Template inheritance
SAGE
TEMPLATE STRUCTURE
$ tree templates templates ├── 404.php ├── index.php ├── layouts │ └── base.php ├── page.php ├── partials │ ├── content-page.php │ ├── content-single.php │ ├── content.php │ ├── entry-meta.php │ ├── footer.php │ ├── head.php │ ├── header.php │ ├── page-header.php │ └── sidebar.php ├── single.php └── template-custom.php
composer create-project roots/sage your-theme-name 9.0.0-alpha.3
DEVOPS CLI FRONTEND SEARCH
WE NEED SOME DATA!
SMALL INTERMEZZO
FAKE DATA
GITHUB.COM/FZANINOTTO/FAKER
FAKER
FAKE DATA
EXPRESSIVE FIXTURES GENERATOR
ALICE
FAKE DATA
WP PACKAGE INSTALL TRENDWERK/FAKER
WP CLI FAKER
FAKE DATA
FAKE DATA
Trendwerk\Faker\Post: session{41..80}: post_content: <realText(600, 4)> post_title: '<sentence()>' post_type: 'session' post_date_gmt: <(gmdate('Y-m-d H:i:s', (time() - (rand(1, 5) * 86400) + ( rand(1, 8) * 3600))))> meta: date: <(gmdate('Ymd', strtotime(@self->post_date_gmt)))> start_time: <(strtotime(@self->post_date_gmt) - (strtotime(@self-> post_date_gmt) % 3600))> # end the session an hour later end_time: <(3600 + strtotime(@self->post_date_gmt) - (strtotime(@self-> post_date_gmt) % 3600))> speakers: <(array((string)((int)$this->valueForCurrent - 40 + 10)))> terms: location: <terms('location', 1)>
WP FAKER FAKE YOUR-FILE.YML
GENERATE THE DATA
FAKE DATA
DISTRIBUTED FULL TEXT SEARCH ENGINE
ELASTICSEARCH
SEARCH
CONSISTENCY - AVAILABILITY - PARTITION TOLERANCE
NOSQL DATABASE
SEARCH
HTTP JSON API
RESTFUL INTERFACE
SEARCH
SEARCH
RDBMS ELASTICSEARCH
DATABASE INDEX
TABLE TYPE
ROW DOCUMENT
DEFINING YOUR STRUCTURE
MAPPING
SEARCH
"your-index" : { "mappings" : { "post" : { "properties" : { "post_content" : { "type" : "string" }, "post_date" : { "type" : "date", "format" : "YYYY-MM-dd HH:mm:ss", "include_in_all" : false }, "post_title" : { "type" : "string", "store" : true, "fields" : { "raw" : { "type" : "string", "index" : "not_analyzed" }, "sortable" : { "type" : "string", "analyzer" : "ewp_lowercase" } }, ...
ANALYZED VS NOT ANALYZED
SEARCH
COMPOSER REQUIRE WPACKAGIST-PLUGIN/ELASTICPRESS
ELASTICPRESS
SEARCH
SEARCH
define('EP_HOST', env('EP_HOST')); define('ES_SHIELD', env('ES_SHIELD'));
wp elasticpress index --setup
SEAMLESS FOR WORDPRESS SEARCH
INTEGRATES WITH WP_QUERY
SEARCH
SEARCH
new WP_Query( [ 'ep_integrate' => true, 'post_type' => 'post', 'posts_per_page' => 20, ] );
./DEPLOY.SH PRODUCTION EPWP.COM
RUNNING IN PRODUCTION
DEPLOY
§ initialize - creates the site directory structure § update - clones the Git repo onto the remote server § prepare - prepares the files in the new release path § build - builds the new release § share - symlinks shared folders to new release § finalize - finalizes the deploy by updating the symlink
ADD YOUR DEPLOY HOOKS IN DEPLOY.YML
DEVOPS CLI FRONTEND SEARCH