Container Based Wordpress

Docker + Wordpress for SPEED

Vue.js for sanity

:tools: Requirements

Backup commands

Uploads Directories

1. On your development machine: rsync -av <user>@<host>:/opt/vue-wp/uploads/ <local directory>

mysql Dump

1. On the production machine: docker-compose exec -T craft-db mysqldump -u root -p current_cia | gzip > /home/<user_name>/backups/"`date +"%Y-%m-%d"`"-craftdb-backup.sql.gz
2. On your development machine: rsync -av <user>@<host>:/home/<user>/<date>-craftdb-backup.sql.gz <local directory>

---

Node.js 12+

• OSX: brew install node using Homebrew
• Linux: apt install nodejs (see Ubuntu/Debian specific instructions) or pacman -S nodejs (Arch Linux)
• Windows: Install

:gear: Installation

1. Clone repo: git clone ssh://git@gitea.yvvas.com:4022/craft-in-america/vue-wp.git
2. Get into the directory with cd vue-wp
3. Spin up those containers with docker-compose up -d
4. Navigate to the theme directory with cd vue-theme
5. Install dependencies: npm install
6. Verify it runs: npm run dev, then check http://localhost:8081

After Installation Gotchas

1. Wordpress starts completely without any data so you’ll have to install it, name your dev site, create a login, etc.
2. The vue-theme is NOT enabled. Please enable it in the wp-admin page under Appearance > Themes
3. Wordpress’ API is NOT turned on by default, so the vue-theme won’t display anything.
4. Navigation, footers, and submenus are API driven. Navigate to the customize page and create main_nav, footer, and sub_nav_<insert-custom-type-here>

Activate Wordpress API

1. Navigate to Settings > Permalinks
2. Click the ‘Custom Structure’ radio button
3. Type in /%postname%/ in the text field
4. Click ‘Save Changes’
5. Verify the API by visiting the API endpoint

:construction_site: Development

Setup a staging server and initialize a bare git repo in the /opt directoru

git init --bare /opt/vue-wp.git

Copy over the post-receive script from ./deployment to /opt/vue-wp.git/hooks and make it executable with the command chmod ug+x /opt/vue-wp.git/hooks/post-receive

On your development machine, add the staging server as a remote…

git remote add staging <user>@<server_ip>:/opt/staging/vue-wp.git 

:electric_plug: Deployment

When you get ready to deploy your app to an actual server, run git push && git push staging and things will get pulled and built on the staging server. Sweet!

Currently the API uses localhost. This should be changed in production. Set your passwords in the .env file like so..

DB_PASSWORD=<changeme>
WORDPRESS_DB_USER=root
IS_DEV=false

Lastly set your directory owner to www-data with docker exec -it vue-wp chown -R www-data:www-data ./wp-content

:robot: CI/CD

Included is a drone config, and some recommended steps to build.

• You MUST activate the pipeline
• Add the id_rsa of the drone host to appropriate key in the pipeline secrets under the name push_deploy_key

You also need to setup a post-receive hook on the host server.

• On your development machine, add the target host as a remote git remote add </opt/staging/js-vue.git> staging master
• Login to the remote machine and setup a bare git repo on git init --bare </opt/staging/js-vue.git>
• Copy the post-receive hook file into the </opt/staging/js-vue.git/hooks/> directory