Container Based Wordpress

Docker + Wordpress for SPEED

Vue.js for sanity

:tools: Requirements

Node.js 14+

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

Docker & docker-compose

• OSX: TBD
• Linux: TBD
• Windows: TBD
  

: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. Copy the sample.env file to .env and substitute the variables with your own
4. Spin up the database and Wordpress containers with docker-compose up -d
5. Use a web-browser to navigate to http://localhost:8080 and complete the Wordpress installer
6. After Wordpress installation is complete, with your terminal navigate to the theme directory cd vue-theme
7. Install the theme dependencies: npm install

Post-Installation Configuration

The initial Wordpress installation does not include any content or user data beyond the default, so we’ll need to adjust some settings before we can use our custom theme.

1. The vue-theme is NOT enabled. Please enable it in the wp-admin page under Appearance > Themes
2. The custom plugins must be enabled for our theme to work. Please activate them in the wp-admin page under Plugins. You should activate craft-endpoints, craft-post-types, and posts-to-posts
3. Wordpress’ API is NOT turned on by default, so the vue-theme won’t have anything to display. You will need to start the API with the instructions below.

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

After the API is active double check your settings in the .env file like so..

DB_PASSWORD=<change_me>
WORDPRESS_DB_USER=<default_user>
WORDPRESS_DB_PASSWORD=<change_me>
DB_NAME=<current_db>
IS_DEV=true

Make sure IS_DEV is set to true. This is important.

Currently the API uses localhost. This should be changed in production.

Set your directory owner to www-data with docker exec -it craft-vue chown -R www-data:www-data ./wp-content so your Wordpress container can write files

Lastly, run npm run dev to start the development server.

If successful, it will tell you that it is running on http://localhost:8081

:electric_plug: Deployment

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

git init --bare /opt/staging/craft-vue.git

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

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

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

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

: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/craf-vue.git> staging master
• Login to the remote machine and setup a bare git repo on git init --bare </opt/staging/craf-vue.git>
• Copy the post-receive hook file into the </opt/staging/craf-vue.git/hooks/> directory

:question_mark: Misc

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>