in local dev, grab image from remote host if not found locally (#247)

* in local dev, grab image from remote host if not found locally

* add local hosting docs.

* add media export script

* update export targets

* remove unused plugin that is disabled

* adding excluded tables arg

refs: patronage/bubs-timber#156

* actual correct path to disable google locally

* add debug code from timber

refs: patronage/bubs-timber#166

.vscode/tasks.json

@@ -38,6 +38,11 @@
       "type": "shell",
       "command": "cd wordpress && bash _build/db.sh import"
     },
+    {
+      "label": "Wordpress Media Export Production",
+      "type": "shell",
+      "command": "cd wordpress && bash _build/db.sh media production"
+    },
     {
       "label": "Wordpress Dev",
       "type": "shell",

docs/images.md

@@ -48,6 +48,8 @@ If you're developing against local WordPress graphql, things will work similarly
 
 The only thing you need to make sure you've done is whitelisted local and public image locations in `next.config.js`.
 
+If you need to export your images, locally, see the `Wordpress` docs for details on how to export.
+
 ### Elastic Storage
 
 The one thing we've run into is large sites with increasingly large images storage requirements. On cloud hosts, this storage is often surprisingly limited.

docs/wordpress.md

@@ -11,11 +11,11 @@ We rely on Docker for this, and below are some details on getting up and running
 
 ## Docker
 
-Inside of the WordPress folder is a docker-commpose.yml file that will spin up a basic WordPress image with a MariaDB database (this is better for Apple Silicon Macbooks).
+Inside of the WordPress folder is a docker-compose.yml file that will spin up a basic WordPress image with a MariaDB database (this is better for Apple Silicon Macbooks than MySQL).
 
 The VS Code task `WordPress Docker Recreate` can be run from the task runner as an alias to get your container started.
 
-Inside of the WordPress folder you'll find a .env. You'll want to configure your name for the project, and any WP Engine deployment targets. This variables are used in the db.sh script to manage imports/exports of your database, and deploy.sh which deploys to WP Engine.
+Inside of the WordPress folder you'll find a .env. You'll want to configure your name for the project, and any WP Engine deployment targets. This variables are used in the db.sh script to manage imports/exports of your database, and deploy.sh which deploys to WP Engine. This file is set to be committed, as it typically doesn't contain secrets. But if that changes, make sure you take precaution to keep secrets out of git.
 
 ## Exporting and Importing database
 
@@ -25,6 +25,12 @@ Your wordpress admin will be viewable at /wp-login.php, and you can use the user
 
 To help with exports, we also have tasks "Wordpress DB Export" for both production and staging that will save the latest DB to the \_data folder. You will need a local version of [WP CLI](https://wp-cli.org/) in order for this to work. You can quickly install by running `brew install wp-cli` if you use use homebrew.
 
+## Working with Images
+
+The "WordPress Media export" task can be used to download images from your production site and save them locally. This is not required, but can be useful if you want to test image resizing or manipulation locally.
+
+Note that we have also configured .htaccess on Docker to grab images from the production server if they are not found locally. This can be useful if you don't want to download all of the images from the production site, or if you want to use the latest version of the images from the production site.
+
 ## Managing WP deps with Composer
 
 We tend to checkin our WP plugins to github if using a private repo. However for this open source repo, we don't. You'll want to remove those lines from the top of .gitignore inside the wordpress folder.
@@ -33,12 +39,16 @@ If the plugins are not checked in, you'll need to install them with the VS Code
 
 To update plugins, you can update their versions in the composer.json file, and then run the VS Code task `Wordpress Composer Update` task to install Wordpress Deps.
 
+### Local Plugins
+
+When you run Composer, an "init" task will be executed that copies a few files if they do not exist. These files are gitignored to avoid committing them to the repository.
+
+One of these files is local-plugins.php, which can be used to enable or disable plugins that you want to configure differently on your local development environment compared to production. For example we enable debug plugins that we ignore on production to be enabled locally.
+
 ## New version of WordPresss
 
 When you want to update wordpress core, you need to update the `wordpress/docker-compose.yml` file for Docker users. Then run `Wordpress Docker Recreate` task to rebuild your local container.
 
-Also update `composer.json` so that non-docker users get the updated WP version.
-
 ## Theme
 
 The `headless` theme is configured to make some light adjustments to WordPress to support headless dev.

wordpress/.env

@@ -20,3 +20,6 @@ COMPOSE_WPE_DEVELOPMENT=bubsnextd
 # These are used for the forced deploys to WPE
 GIT_EMAIL="hello+bubs@patronage.org"
 GIT_NAME="Bubs Deploy"
+
+# Optional, list any SQL tables in WPEngine that shouldn't be included in export
+SQL_EXCLUDED_TABLES=

wordpress/.htaccess

@@ -0,0 +1,28 @@
+# CUSTOM
+<IfModule mod_rewrite.c>
+
+    ## Rewrite images if they don't exist locally
+    ## Allows us to pull staging server SQL and use same images
+    ## This isn't meant to be deployed, so make sure it's excluded
+    RewriteCond %{REQUEST_FILENAME} !-f
+    RewriteRule ^wp-content/uploads/(.*)$ https://bubsnext.wpengine.com/wp-content/uploads/$1 [L]
+
+    # Simple 404 for missing files
+    <FilesMatch "(\.jpe?g|gif|png|bmp|ico)$">
+      ErrorDocument 404 "File Not Found"
+    </FilesMatch>
+
+</IfModule>
+# END CUSTOM
+
+# BEGIN WordPress
+<IfModule mod_rewrite.c>
+    ## Remove index.php from all URLs
+    RewriteEngine On
+    RewriteBase /
+    RewriteRule ^index\.php$ - [L]
+    RewriteCond %{REQUEST_FILENAME} !-f
+    RewriteCond %{REQUEST_FILENAME} !-d
+    RewriteRule . /index.php [L]
+</IfModule>
+# END WordPress

wordpress/_build/.deploy_exclude.txt

@@ -1,6 +1,7 @@
 _build/
 _data/
 _init/
+.htaccess
 .editorconfig
 .env
 .gitignore

wordpress/_build/db.sh

@@ -15,6 +15,7 @@ WORDPRESS_DB_NAME=${COMPOSE_PROJECT_NAME:-wordpress}
 PRODUCTION_SSH="${COMPOSE_WPE_PRODUCTION}@${COMPOSE_WPE_PRODUCTION}.ssh.wpengine.net"
 STAGING_SSH="${COMPOSE_WPE_STAGING}@${COMPOSE_WPE_STAGING}.ssh.wpengine.net"
 DEVELOPMENT_SSH="${COMPOSE_WPE_DEVELOPMENT}@${COMPOSE_WPE_STAGING}.ssh.wpengine.net"
+SQL_EXCLUDED_TABLES="${SQL_EXCLUDED_TABLES}"
 
 # handle script errors, exit and kick you to working branch
 function error_exit {
@@ -90,7 +91,7 @@ function db_export() {
     else
       mkdir -p _data
       filename=$(date +'%Y-%m-%d-%H-%M-%S').sql.zip
-      wp db export --add-drop-table --ssh=$SSH_TARGET - | gzip > _data/$(date +'%Y-%m-%d-%H-%M-%S').sql.gz
+      wp db export --add-drop-table --exclude_tables=$SQL_EXCLUDED_TABLES --ssh=$SSH_TARGET - | gzip > _data/$(date +'%Y-%m-%d-%H-%M-%S').sql.gz
       echo "export complete";
     fi
   elif [[ $status == "Permission denied"* ]] ; then
@@ -102,6 +103,40 @@ function db_export() {
   fi
 }
 
+function media_export() {
+  local TARGET=${1}
+
+  if [ "$TARGET" = "staging" ]; then
+    SSH_TARGET=$STAGING_SSH
+    PROJECT=$COMPOSE_WPE_STAGING
+  elif [ "$TARGET" = "development" ]; then
+    SSH_TARGET=$DEVELOPMENT_SSH
+    PROJECT=$COMPOSE_WPE_DEVELOPMENT
+  else
+    SSH_TARGET=$PRODUCTION_SSH
+    PROJECT=$COMPOSE_WPE_PRODUCTION
+  fi
+
+  # We don't need all thumbnails, just the original files
+  EXCLUDE_REGEX="*[0-9]*x[0-9]*\.[a-zA-Z0-9]*"
+
+  echo "connecting to $SSH_TARGET"
+
+  status=$(ssh -o BatchMode=yes -o ConnectTimeout=5 $SSH_TARGET echo ok 2>&1)
+
+  if [[ $status == ok ]] ; then
+    echo "auth ok, proceeding with media export"
+    rsync -rlD -vz --size-only --exclude=$EXCLUDE_REGEX $SSH_TARGET:sites/$PROJECT/wp-content/uploads/ ./wp-content/uploads/
+    echo "export complete";
+  elif [[ $status == "Permission denied"* ]] ; then
+    echo no_auth
+  elif [[ $status == "Host key verification failed"* ]] ; then
+    echo "host key not yet verified, please run: ssh $SSH_TARGET then try again"
+  else
+    echo "SSH couldn't connect, please check that environments are defined in your .env, and your SSH key is added to WP Engine"
+  fi
+}
+
 CALLED_FUNCTION=${1}
 TARGET=${2}
 
@@ -111,6 +146,9 @@ if [ "$CALLED_FUNCTION" = "export" ]; then
 elif [ "$CALLED_FUNCTION" = "import" ]; then
   echo "running DB import script"
   db_import
+elif [ "$CALLED_FUNCTION" = "media" ]; then
+  echo "running media export script"
+  media_export
 else
   error_exit "Specify a DB task (export or import)"
 fi

wordpress/_init/local-plugins.php

@@ -84,8 +84,7 @@ function run_activate_plugin( $plugin ) {
     new Disable_Plugins_When_Local_Dev( array(
         'hello.php',
         'object-cache.php',
-        'absolute-privacy/absolute_privacy.php',
-        'google_apps_login/google_apps_login.php'
+        'google-apps-login/google_apps_login.php'
     ));
 
     // enable
@@ -95,4 +94,4 @@ function run_activate_plugin( $plugin ) {
     // run_activate_plugin('user-switching/user-switching.php' );
     // run_activate_plugin('object-cache.php' );
 
-}
+}

wordpress/docker-compose.yml

@@ -22,6 +22,7 @@ services:
       - "8000:80"
     volumes:
       - ./wp-content:/var/www/html/wp-content
+      - ./.htaccess:/var/www/html/.htaccess
     restart: always
     environment:
       WORDPRESS_DB_HOST: db:3306
@@ -33,5 +34,11 @@ services:
         define('WP_ENV', 'development');
         define('HEADLESS_AUTH_SECRET', 'bubs-next-wp-auth-secret-key');
         define('HEADLESS_API_SECRET', 'bubs-next-headless-secret-key');
+        define('WP_LOCAL_DEV', true);
+        define('WP_THEME', 'timber');
+        define('WP_DEBUG_LOG', true );
+        define('WP_DEBUG_DISPLAY', false);
+        @ini_set('display_errors', 0);
+
 volumes:
   db_data: {}

wordpress/wp-content/themes/headless/index.php

@@ -18,4 +18,4 @@
 // echo $redirect;
 return wp_redirect( $redirect, 307 );
 
-?>
+?>