Previously on “The Internet is for Doing Roadtrips!”

In 2019, I gave a tour of how our location-tracking media-heavy roadtrip blog worked.

I stood it up on Tumblr in 2015 for the Pacific Coast Highway “cheap car challenge” roadtrip. You know, back when I mistakenly assumed that would be the only one. In 2017, for the Southwest Offroadtrip, I added all the mapping bits. After that, little changed except a migration to WordPress. Then before running a beater convertible up the ALCAN in 2019, I did some feature-stuffing but side-stepped something important: the whole mess was horrifically insecure. And the code had become rather embarrassing.

Still, I’ve become increasingly proud of this little platform as it has grown. I recently compiled an index of our escapades and it was longer than I’d realized.

Old Architecture v2 from 2017

A refresher of this clutter:

• The location service was entirely unauthenticated.
• It was built on Silex, a Symfony 3 off-shoot well beyond EOL.
• It needed a separate proxy for things like “don’t tell the Internet where I sleep” and “don’t follow me when we’re not traveling.”

Also:

• It ran on a separate server instance (💸💸).
• The PHP I wrote for the backend wasn’t fantastic. The JavaScript for the proxy script and the blog frontend was sloppy 2015-era JS — a time we all yearned to dump heavy libraries but that meant writing everything the hard way.
• The blog used an obsolete Mapbox library.

And that site has always been my playground to fiddle with interesting tech and learn new things. As I ramp up as a new Product Manager at Cloudflare, just how much can I orange-cloud* Route Not Found? It’s professional development, I promise.

* CF-speak for “adding a site on our infrastructure,” the term originating from a cute piece of UI in the Dashboard.

Architecture v3

In which “Zero Trust” describes both the security products in play and the prudent measure of faith to place in a hooptie.

What happens on my phone is the same: Tasker pulls a location every half-hour and sends it to the service, batching it for later if we’re out from under The Cloud. I also submit photos and posts with the WordPress app.

The Location Service Worker is the key new piece, running on the Workers serverless platform on the Cloudflare Edge:

• Receives GPS history from my phone
• Gets information about those waypoints using Google Maps Geocoding API
• Writes/reads these data to the database on Alfa, connected via a Tunnels backhaul
• Does additional filtering on location history
• Aggregates some interesting stats
• Requires authentication for operations that read anything unfiltered or write anything at all
• It’s also my first stab at writing a project in TypeScript, which I quite like!
• 📝 Worker API specification and codebase

I split the Location Service Frontend to a separate React app on Pages, also Edge-hosted, and secured by a giant No Trespassing sign Access:

• Shows data from the Worker with visuals using Google Maps
• Facilitates creating and updating Trip info
• Facilitates fixing geocoder problems
• It’s also my first stab doing anything substantial with React. Not confident with it yet, but it’s quick and fun.
• 📝 Admin SPA codebase

The only remaining server is named Alfa, a Lightsail instance in AWS, protected by Cloudflare’s firewall and propped up by the CDN. Alfa runs both WordPress and the location database. For that, I picked PostgreSQL for two extensions:

• PostGIS adds geographic and geometric types, functions, and aggregators. Rather than writing code myself in the Worker to do geographic math or assemble GeoJSON, Postgres can do it for me, faster, eliminating round-trips to the database.
• PostgREST is a middleware service that exposes a PostgreSQL instance via an authenticated HTTP API. Workers can’t open raw TCP connections (yet!), but they can fetch. A colleague recently wrote a post about this, which helped me get started.

Also, I restructured the database to expose location history in a VIEW which joins Waypoints to Trips BETWEEN start and end times. Thus, it only contains Waypoints during Trips.

The rest of the stack remains:

• Simple WordPress blog:
  • Deployed by Composer
  • With a few small plugins I wrote for performance tuning and integration with the Location Service and Mapbox.
  • New: I moved what few videos I have over to Stream, locked the staging environment behind Access, turned on bot blocking, and activated APO — beyond overkill for the size of my audience but surprisingly fast.
  • Future? With Tunnels, I could garage the blog onto an old computer in my apartment when we’re not on the road (i.e. when even fewer people read it), which would make it free…
• Frontend maps with Mapbox GL JS and designed in Mapbox Studio.
• I can write short posts via email sent from our emergency satellite beacon.
• And we’re still using my Magic Roadtrip Planning Spreadsheet, Google My Maps, and Caltopo for scheming.

So it’s that time again?

Yup. This project only gets love when we’re fixin’ to set off on an adventure. Thanks to these continued “unprecedented times,” the used car market is facing significant inflation. Who knew that if I’d held onto that little Celica a while longer, I could have turned a profit on it?! So we’ve tabled whatever Great Roadtrip #4 will be for a while.

Instead, we’re going to do a Greatest Hits from the Southwest Offroadtrip this October with our usual loadout: Xterra the Younger and his friends, George’s Jeep Renegade and Evan’s Land Rover Discovery. The latter returning to its proving grounds, as it was purchased originally for that trip and seen here with the 4Runner I still miss.

The Southwest Backtrack

Disclaimer: I am a Cloudflare employee and built this as a way to kick some tires on our product line, some of which is made available to me for free — although the Free Plan would cover everything but my use of Stream and APO. This is not an endorsement of our wacky hobbies, nor is it product documentation or security guidance.