The Enterprise Wor/d/thy/Press
-
Upload
jeroen-van-dijk -
Category
Technology
-
view
56 -
download
1
Transcript of The Enterprise Wor/d/thy/Press
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 FRONTENDSEARCH
DEVOPS CLI FRONTENDSEARCH
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!
EXERCISE
gist.github.com/jvandijk/
mkdir epwp.com cd epwp.com
git clone https://github.com/jvandijk/epwp-trellis.git trellis cd trellis && git fetch origin git checkout step-1-tutorial-init
git clone https://github.com/jvandijk/epwp-site.git site cd site && git fetch origin git checkout step-1-tutorial-init
vagrant destroy if you prepared the tutorial
EXERCISE
edit group_vars/development/wordpress_sites.yml - change example domain into ‘epwp.com’ - introduce the WP admin_user ‘epwp_user’ - change the admin email to ‘[email protected]' - enable self-signed SSL
edit group_vars/development/vault.yml - make the WP admin pass ‘epwp_pass’ - change the database password to ‘dbpassword_development’
OPTIONALLY: - create vault/.vault_pass with a ‘<unique key>’ inside - encrypt with ansible-vault group_vars/development/vault.yml
IF IT DIDN’T WORK OUT FOR YOU
cd trellis git reset --hard
git checkout step-3-enable-ssl vagrant destroy & vagrant up
DEVOPS CLI FRONTENDSEARCH
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
SEARCH, LIST, INSTALL, UPDATE, ACTIVATE THEMES
WP THEME
SCAFFOLDING
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
DIY LET’S CREATE A CONFERENCE SITE
EXERCISE
cd site git checkout step-2-build-the-theme
go to /srv/www/epwp.com/current wp theme activate epwp wp plugin activate —all
Check: - https://epwp.com/speaker - https://epwp.com/session
EXERCISE
Scaffold a new plugin named ‘epwp’ Activate the plugin Scaffold and add post type ‘session’ Scaffold and add post type ‘speaker’ Scaffold and add taxonomy ‘location’ linked to ‘session’
Check again: - https://epwp.com/speaker - https://epwp.com/session
Install wpackagist-plugin/advanced-custom-fields Install wpackagist-plugin/acf-field-date-time-picker
In admin create & export fields for ‘speaker’ and ‘session’
TEXT
DATE_TIME_PICKER
DATE_PICKER
RELATIONSHIP
IF IT DIDN’T WORK OUT FOR YOU
cd site git reset --hard
git checkout step-6-update-admin-fields
DEVOPS CLI FRONTENDSEARCH
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, ] );
DIY LET’S ENHANCE THE SEARCH
EXERCISE
cd site git checkout step-7-add-fake-data
define some session locations in the wp admin
go to /srv/www/epwp.com/current wp package install trendwerk/faker wp db query "show create table wp_posts" edit the post ID wp faker fake faker.yml
Check: - https://epwp.com/speaker - https://epwp.com/session
EXERCISE
cd site git checkout step-7-add-fake-data
Install wpackagist-plugin/elasticpress
Create a define ES_SHIELD (user:pass) Create a define EP_HOST (your-domain.com)
go to /srv/www/epwp.com/current enable the plugin wp elasticpress index --setup
Search for a ‘location’ or just make a typo
IF IT DIDN’T WORK OUT FOR YOU
cd site git reset --hard
git checkout step-8-add-elasticsearch-support
cd trellis git checkout step-5-add-elasticsearch-support
DEVOPS CLI FRONTENDSEARCH
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
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
./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 FRONTENDSEARCH
20162016