One of my Drupal Amazon AWS CDN migration experiences

Lately I’ve helped to move one of the existing sites from an Amazon EC2 to another, this is a cross-account migration.

Some config and environment:

Old server: ubuntu 12.04 / Apache on a m3.medium EC2 instance with Drupal 7, database is on an RDS instance alone
New server: ubuntu 14.04 / Apache 2 / php5-fpm on a m3.medium EC2 instance, it also has a RDS instance for the database
The new instances were all set up prior for this migration.

So the other parts were relatively simple like always:

  • Put site to maintenance mode, disabled clean-url, deleted cache, etc.
  • Site file tar gz compressed
  • Used mysqldump to get MySQL dump file and tar gz
  • From the destination EC2 instance, ssh to the old instance to get the compressed file
  • Copied everything from old bucket to the new bucket by using CloudBerry Explorer for Amazon S3 / S3 Browser

The CDN and sitemap issue

It’s all good, however when I installed and set up everything. I’ve found files missing and the sitemap was just with the old domain name.
The sitemap was generated with Drupal XML sitemap
No matter how many times that I rebuilt the sitemap it’s just the old one that shows in the browser when directly visit
So I started to look for the cause of this issue.
The rest of the parts were all looking good, so I then started to look at the most suspicious CDN setup, and finally get it sorted out.
The following are the steps that I did.
Config Steps:
  • need to hand code all the Amazon AWS details into the site settings.php
  • need to hand code the base URL to settings.php
  • need to run a complete CRON
  • delete all caches including S3 cache, static cache, everything cached
  • need to enable base url option in advgg -> under OBSCURE OPTIONS -> check “include the base_url variable in the hooks hash array”
  • remove the old sitemap in xmlsitemap panel
  • add a new sitemap file back in
  • go to rebuild the sitemap links in the rebuid panel
  • check the sitemap that is rebuit then use update cached files, click “update”
  • the I have a perfect sitemap to submit to the Search Engines

Conclusion:

  • The sitemap built is actually not located on the web server, it’s a CDN distribution over S3 bucket via CloudFront – usually sitemap will located on the web server site root though
  • So if you go to the web server site root to look for this sitemap file it’ll not show there
  • The Amazon details needed to be hand coded in the setting files, this may not be the best option but it’s the only option that works at the moment
  • CRON takes time also the CDN distribution has delay, the changes could not be seen immediately
  • Drupal can’t live without caching otherwise it’s very slow, but caching will cause problem over development and/or troubleshooting as what you are looking at were all cached files and changes made could not take effect right away

Here is the reference:

https://keithyau.wordpress.com/2014/12/04/why-bootdev-cdn-configuration/

Conference Paper Review System – Software Engineering Project – PHP / MySQL / OOP

This example demonstrates my PHP / MySQL programming capability of building web based applications with object-oriented software design.

This is a team project, and my role was software designer and programmer.

Project Demo URL

http://paper-review.w3c-lab.com/

LOC

Around 4500 lines of code including PHP, HTML, CSS and JavaScript codes

Time spent

2 and a half months, including the early software requirement and design stages as well as the testing stage.

Main programming package

PHP / MySQL / JavaScript

Skills demonstrated

jQuery AJAX, Bootstrap model, PHP OOP,  Project Management, Software Engineering

Features

HTML5 based mobile compatible application

Other Package/Framework used

Bootstrap / jQuery

Screenshots

01

07

04

03

02

Documents and misc (click to download)

Mobile UI Design Prototype – Flight Watcher

Design brief

This was an UI design for a flight travel app. I was requested to create a set of high fidelity UI prototypes for this app.

Software Used
  • Adobe Illustrator CC
  • Adobe Fireworks CS6
The prototype screenshots

loading screen home-planner-one-way-economy Planner - return trip Multi-city add more flights multi-city-add-more-flight-02 origin picker calendar Return economy flight search result booking  booking history account-bill-and-payment account profile settings menu

A custom Google Map Prototype based on Google Map API v3 / BootStrap / Custom tiles overlay

This custom Google Map prototype demonstrates my capability of building highly customized interactive maps based on Google Map API with custom tiles (map slices from a static image).

Prototype Link (new window)

Features of the custom Google Map prototype:

  • Google Map API to integrate map functions like map Zoom/Drag
  • Google Map API v3 to integrate custom markers and polygons
  • Static Deakin Burwood Campus map to provide custom tiles overlay
  • BootStrap to provide mobile friendly interface
  • jQuery to provide interactivity such as popup info box
  • HTML5

Software Used

  • Adobe Dreamweaver CC for editing HTML and JavaScript
  • Adobe Illustrator CC for editing and slicing the static map
  • Map Tiler for creating custom tiles overlay

 

Custom Google Map Prototype screenshots:

Map with custom marker and popup info box

Google Map API custom tiles and  polygon

Google Map API customer message box

An Apple Watch Demo Project – Flash / AS3 / Video Editing

This demo shows my capability of creating Interactive Applications based on Adobe Flash and Action Script.

It also shows the level of my video and graphics editing skills.

Components

Image, videos, Flash Animations, Flash buttons, AS3 scripts

Project URL (new window): Apple Watch Demo
Direct Link to SWF: Click Here
Software used
  • Adobe Flash CC
  • Adobe Premiere CC
  • Adobe Illustrator CC
Time spent

About 25 hours

Project Screenshots:

apple-watch-demo2

apple-watch-demo1

 

Path Finder – SIT302 Team Project – 2015 iAwards Nomination

This is the proof that I’m an award-winning IT pro!   😀

Project introduction

PathFinder is a peer-to-peer web-based guide featuring video tutorials, an online interactive map, timetables to assist in your scheduling and an incredible game experience – all in the palm of your hand. Our development team, in conjunction with the IT staff, have taken the complexity out of finding information by designing a simple, yet engaging experience for all IT students.

Project Intro Video

 

Project site URL

http://project-survival.w3c-lab.com/

Technology Used
  • Highly customized WordPress theme
  • Over 30+ WordPress plugins
  • Flash for interactive map
  • Adobe Premiere CC
  • Adobe After Effects CC
  • YouTube for video hosting
  • HTML5 for interactive game
My role and contributions

I was the team leader (of a 7-member team), system analyst and web developer.

My major tasks and contributions for the project were:

  • Task planning and allocation
  • Meeting arrangement for both the team and stakeholders and supervisors
  • Initial project analysis report
  • Developed the base of the system
  • Web hosting management / WP Installation and configuration / Theme customization
  • Over 300+ pages of documentation produced

Sample of project Gantt chart

Achievement
2015 iAwards Nomination (Team) – iAwards Link (new window)

The iAwards honours companies at the cutting edge of technology innovation and recognises the achievements of home-grown Australian innovators.

2015 Deakin University School of IT Project Award (Personal Award)

Achieved the highest mark overall for SIT302 Project

2015 Deakin University School of IT Project Award