Ben Lobaugh Online

I think, therefore I am. I am, therefore I sail

Category: Computing Page 1 of 51

Photo by Josh Sorenson on Unsplash

How to Make a Domain Proxy for Digital Ocean Spaces

By

On January 15, 2021

In Web Development

Digital Ocean has been my go to solution for hosting for many years. When the Spaces service, an S3 compatible object store, was introduceed, I jumped on board right away. The service performs well and allows me to manage all the web infrastructure from one location.

The drawback with Spaces, to me, is how custom domains are handled. It is possible to do, but you have to turn over DNS control of the domain to Digital Ocean. That is not always possible or practical to do. For a couple years I have run various sites with the domain provided by Digital Ocean.

A default Spaces domain has the format: account.datacenter.digitaloceanspaces.com
For my personal blog this looks like: lobaugh.sfo2.digitaloceanspaces.com

A useable, but not very attractive domain. I decided to revisit the topic.

Nginx has some powerful proxy capabilities in it, and it turns out that it works quite well to create a domain proxy.

With the proxy enabled, visiting
https://assets.lobaugh.net/image.png
Will return the file from
https://lobaugh.sfo2.digitaloceanspaces.com/image.png

Running my own domain proxy does introduce additional complexity and slight overhead, but I am comfortable with it.

I will present the nginx.conf file in its entirety here, then walk through it below.

log_format upstream '[$time_local] Requested: $host$uri - Proxied $proxy_host - Response time remote $upstream_response_time request $request_time';proxy_cache_path /tmp/nginxcache levels=1:2 keys_zone=my_cache:10m max_size=2g 
                 inactive=600m use_temp_path=off;server {listen 80;location / {
  proxy_cache my_cache;
  proxy_pass https://lobaugh.sfo2.cdn.digitaloceanspaces.com$uri$is_args$args;
  add_header X-Proxy-Cache $upstream_cache_status;
  access_log  /dev/stdout upstream;
 }
}

That’s it! The configuration is fairly simple.

* log_format upstream — (optional) Establishes the format of the log file. Not needed if logging is disabled. Turning off logging may help performance.
* proxy_cache_path — Configures the nginx caching of the files from Spaces. A 10 minute cache, with a max of 2 gigabytes is created. Though not necessary, this will help save on server resources and wait time for clients.
* server.listen — Establish the web service
* server.location — Configure the web service
* proxy_cache — Sets up the previously configured cache
* proxy_pass — This is the meat and potatoes. This passes the call to assets.lobaugh.net to the Spaces service, and retrieves the file
* add_header — (optional) Adds a simple header item that allows us to inspect whether the response was cached. Can be safely left out
* access_log — Send the output of the log to /dev/stdout, based on the upstream format. Not needed if logging is disabled. Turning off logging may help performance

This is v1 of the configuration. Nginx provides a lot of neat options that can tweak and optimize it. To learn more about the options, here are a few helpful links:

* https://docs.nginx.com/nginx/admin-guide/web-server/reverse-proxy/ 
* http://nginx.org/en/docs/http/ngx_http_proxy_module.html#proxy_pass
* https://dev.to/danielkun/nginx-everything-about-proxypass-2ona 
* https://www.digitalocean.com/community/tutorials/understanding-nginx-http-proxying-load-balancing-buffering-and-caching
* https://www.nginx.com/blog/nginx-caching-guide/ 
* https://dev.to/shameemreza/accelerate-your-website-with-nginx-as-a-reverse-proxy-cache-a9o

I am satisfied with this setup for now. It has allowed me to achieve the custom domain I wanted, and has minimal performance impact.

Using An iPad For Web Development

By

On May 31, 2020

In Web Development

My obsession with using an iPad for web development started all the way back with the first generation iPad. Tools then were sparse, but I made it work by jumping through some hoops. Today’s iPad is a much superior machine, and the available apps have come a long way toward making the iPad comfortable enough, and capable of being a web development machine.

Long have I thought about writing an article on how I use my iPad for web development. I think I just needed the right impetus, which came about today.

A long time business friend texted me a challenge, to gather a list of URLs for all images uploaded to a particular website. The kicker- I had to do it faster, and more elegantly, than another mutual friend we have. An iPad was already in my hands, all I needed was a stand to hold it up, and a Bluetooth keyboard for convenience. While our mutual friend has an impressive desktop machine, in less than 10 minutes, I was able to come up with a solution, code it, and publish it as a generic utility.

There are really only three tools that I need to enable web development on my iPad. I will describe those, but first, a bit about the iPad I use.

The Platform — 2018 iPad

You might think the latest, greatest, most powerful iPad it needed, but that is not the case. My iPad is from 2018, a couple years old as of the writing of this article. It is also the base model iPad. Nothing fancy to it.

I would love to have the latest iPad Pro, but since I am not doing hardcore graphics or video editing, it is not necessary.

Now let’s talk about the tools I use for web development from an iPad.

The Server — 100% Remote

The development server is fully remote. It is possible to run a local server, but it is a lot of work, and not worth the hassle. I have a Droplet running on Digital Ocean that hosts all work in progress. Code is edited via ssh.

Security is paramount- the server is locked down and will only respond to my IP address.

For an in-depth look at this set up, read my article at https://medium.com/@benlobaugh/the-unchained-developer-free-your-workflow-and-become-device-agnostic-ce0450e238de

SSH Client — Terminus

The key to making the iPad a useable web development platform for me is SSH. No code is created locally. In fact, all of the resources related to a project live remotely. This means the choice of an SSH client is critical. A few years ago, SSH app choices were limited, and none were what I would consider to be quality enough to spend hours using. They were for quick commands only. Then, I used web based SSH clients, which have their own set of quirks. Today, the quality and selection of apps has improved.

My SSH client app of choice is Terminus. Terminus works across several platforms. It has built in sftp, mosh, and telnet clients; will run fully in the background without disconnecting; and has a lot of other great features. It really shines as an SSH client though. I am able to define hosts and reconnect with a quick tap.

Once connected, there are a plethora of tools at my disposal. The most critical tools to my success are:

  • Docker
  • Vim
  • Tmux
  • Git

With them, I have been able to set up any project. When other tools are called for, such as composer or npm, I will often run them inside of a Docker container.

Another critical need is the ability to transfer files between machines. File transfers are a breeze, with common Linux tools.

Web Browser

The last, and possibly most critical, piece for web development on an iPad is, of course, a web browser. Apple updated Safari to handle desktop versions of sites, freeing the iPad from a mobile only experience.

It seems that everyone has a browser they are devoted to, for better or worse. I happen to find Safari to be acceptable, and with the integrations Apple has created it was a no-brainer choice. Safari handles nearly all my needs. Combine it with a tool such as Cross Browser Testing and anything can be accomplished.

Helpful Hardware

The apps get me running from the software side, and are all I need, but there are two pieces of hardware that I find extremely valuable from a comfort and efficiency standpoint: a tablet stand and a Bluetooth keyboard. Really any will do. Specifically I use the following:

  • Amazon Basics Adjustable Tablet Holder — I like how flexible it is for sizing and angles. Folds up compactly as well.
  • Logitech multidevice backlit keyboard. Unfortunately Logitech no longer makes this keyboard. A bummer since I believe it is the best keyboard they ever made. Logitech has other Bluetooth keyboards that will work also, such as this Bluetooth keyboard, that also has a tablet stand built in.

Fin

That’s it. Those three tools; remote server, ssh, web browser; provide 99% of my needs as a web developer. In fact, if you look at my laptop, you will notice my workflow there is very similar. I have even used the same setup on my iPhone to code while riding a bus!

There are a couple tools I use on the laptop that have good iPad equivalents as well.

  • Postman -> HTTPbot for all query testing needs
  • Browser debugger — this is an area that is still weak for the iPad. There are some promising tools though, such as MIHTool
  • Of course, Slack for accessing developer chat communities

I hope this helps you kick start your own iPad web development journey. Let me know in the comments if there is any way I can help you.

If you already used your iPad for web development, what tools and techniques do you have?

Quick tip to access protected properties in PHP object

By

On May 27, 2020

In Computing, PHP, Programming

Calling an object that has a protected property that you need access to? This function will allow you to quickly access data stored in protected properties of PHP objects.

Note: I tested this on PHP 7.4. It will likely work on other versions, but may need tweaking.

Good developers will protect the internals of their objects with private and protected scopes. That means from outside of the object your code will not be able to access whatever is protected. What I am about to show you breaks that encapsulation. Generally, this is not something you want to do, however, if you are working with an object you have no control over, it may be necessary. I ran across this while working with an object from an external library.

This method works by typecasting the object to an array. You can then access the property using a little known method.

Let’s see the code!

    function getProtectedValue( $object, $prop_name ) { 
        $array = ( array ) $object;
        $prefix = chr( 0 ) . '*' . chr( 0 );
        return $array[ $prefix . $prop_name ];
    }

Photo courtesy of Unsplash https://unsplash.com/photos/Vp3oWLsPOss

Unchained developer

The Unchained Developer- Free Your Workflow and Become Device Agnostic

By

On May 4, 2020

In Computing, Web Development

Back in 2011, I was getting frustrated with my aging development machine. It could barely keep up with me, though I resisted getting a new machine because it can be so frustratingly time-consuming to set up a new machine. As I pondered what to do a thought struck me, “you are a WEB developer Ben…. DUH!!” Right, thanks self. The web does not care what device is connected to it. Why couldn’t I also be device agnostic? 

With that in mind, I set off to see if I could truly unchain my development and work from a specific device, and operate from anywhere. Not only was I successful, but I have also been using the same setup for nine years. I have even created patches from my iPhone while riding a city bus to meet a friend for coffee!

If you’ve been pondering the same, I  would like to share how, with a little effort and very little cash, you too can become an unchained developer.

I started out with some strict criteria in mind:

  • Cheap
  • Accessible from anywhere
  • Simple file management
  • Strong security
  • FAST
  • Flexible
  • Ability to tap into other systems
  • Smooth editing experience

Step One – Decouple the development environment

Like many developers, I was running a (M/L)AMP stack on my machine. That meant installing Nginx or Apache, MySQL, PHP, and all other necessary packages directly onto my machine, but what is a web server? Generally, for my work, Nginx or Apache, MySQL, and PHP. It was easy enough to transition those components to a remote machine.

After some research, I selected Digital Ocean as my host of choice. Digital Ocean has been very good to me, over the years. Their offerings are easy to understand and their cost is super cheap. I started with the $5/mo server, and, if your criteria are similar to mine, I recommend you do the same.

When I need more horsepower for running data migrations and other intense processes I simply tell Digital Ocean to temporarily upgrade the machine. In a matter of minutes, I can go from a small, single-core machine to 32 cores and 3,840 gigabytes of RAM! Because Digital Ocean charges by the hour, I can run hefty scripts and only spend a couple of dollars when temporarily upsizing, vs sometimes days of processing data on the smaller machine size. 

The primary limitation I have had to contend with is storage space. Digital Ocean to the rescue again!  They offer a service called “Volumes” that mount directly to the machine. The volume interacts just like an attached hard drive, and you only pay for what you use. Volumes scale up to terabytes in size. I started with a 50 gigabyte volume, at a cost of another $5 per month.

At this point, the hosting cost is $10 per month. For the cost of a coffee and a pastry, I successfully removed my local machine as a barrier for hosting development sites!

Server security

When my laptop was the development environment, the sites and databases were, by default, kept out of the eye of the general public. With the move to the Digital Ocean server came a new concern, security of my client’s data. An unauthorized person stumbling upon one of these sites could have dire legal consequences for both me and the client. 

Digital Ocean provides free firewalls; easy to provision and with a simple UI for management. Using this firewall, I blocked all ports except the web (http, https) and ssh. I went one step further and limited access to only an IP whitelist. This list is manually managed. It does make accessing the server a bit more onerous while traveling, but adding and removing IPs by hand provides a visual indicator that security is tight, and only those machines that need it have access.

Safe on dropped connections

When running a long script locally, it is no big deal to pop open a terminal, start the script, and walk away, trusting it will continue. When running a script via ssh on a remote server you enter a whole new ball game. I needed to have the same confidence that scripts would continue to run whether my connection dropped or not. Enter tmux.

Tmux is an incredibly powerful tool. At its heart, tmux is a terminal multiplexer. Meaning, from a single terminal session, you can create splits into multiple shells, each running its own commands, and different panes. The most important feature to me, however, is that tmux keeps its terminal session running even if you are no longer connected via ssh. That means I can run a command and walk away with confidence it will continue to run. Heck, if I am on a laptop I can turn the laptop off and tmux keeps that command running. 

With tmux, I can even connect from a different device to that same session. That is, in fact, how I was coding from my iPhone while riding a city bus. I had the files open on my laptop in tmux and vim from before I turned off the laptop. I reconnected the ssh session from my phone and BAM, instantly back in the editor, right where I left off.

Another great benefit of running commands on the server is that it consumes zero local resources. That means whether I start the command from my MacBook Pro or my iPhone, it will run without creating a burden on my local device. 

Docker for simplicity

I did not want to get locked into a difficult to manage web server solution and I desired the flexibility to utilize different versions of software, and different types of servers, such as Nginx, Node, and Apache. Docker is a natural fit. It allows me to run client projects in complete isolation of each other.

My preferred way to structure a client project with Docker is:

  • Nginx reverse proxy – Takes care of domain lookups and routing to the proper client site
  • MySQL – I run a new MySQL instance for each client, to prevent information spillage between private client databases.
  • Service 1 (Such as Elasticsearch)
  • Service 2 (Such as Redis)
  • Service N (Whatever else is needed!)
  • Webserver

File management

So far, I have solved the web server side of things. Now I need to get files to the server to develop on. There are three methods typically used:

  • sftp/scp
  • Github/git
  • Direct download

sftp/scp

Both sftp and scp allow you to connect to a remote server to send files. I prefer scp as it is simple and comes with all ssh clients, meaning it is available out of the box on Linux and MacOS. This is the method that I typically use to get local files to the server.

Using scp to transfer a local project to the server is as simple as:

$ scp -r local_project_folder server:/path/to/projects

As a bonus, scp can work in both directions. Call the server first to retrieve files from the remote machine.

Github/git

My preferred method of assessing project code is via a git repository, such as Github. A simple git clone and your files are available on the server. I typically do this via an ssh cli, in fact, I really enjoy the cli so most of my work is done via cli. 

Once the project is pulled from git and all the build tools are installed, you will be able to run composer, npm, grunt, etc., just like you would locally.

Direct download

At times, I may need to download a file directly. Prior to working on a remote server, I would be at the mercy of my internet connection. Let me tell you this, I lived on a boat for nearly four years and the internet was slooooow. If a client sent me a database, it would take all day to download. The Digital Ocean, server has a crazy fast connection and the same download now takes minutes, if that. This saved a ton of time and angst over dropped downloads. The file needed to be on the server anyway, so downloading direct prevented two days’ worth of file transfers!

The wget tool is my go-to tool for downloading due to its simplicity. Curl is also a great option, though. Downloading a file with wget is as simple as:

$ wget https://example.com/file.zip

Smooth editing experience

When it comes down to it, editing text is the primary job of a web developer, therefore, having a smooth editing experience is crucial.

Being a long time Linux guy, and lover of the cli, I naturally turned to vim as my defacto editor. 

Now wait a minute, before you go smirking to Sublime, or VS Code, or whatever the current hotness is, recall that vim has been around for ages. It has a robust plugins system integrating every functionality you can imagine. Not only that, using vim directly on the server frees me from any reliance on a local editor or IDE. I have the freedom and flexibility to really program from any device I desire. I have worked from all sorts of devices: MacBooks, iPhone, iPad, Android tablet, multiple flavors of Windows, and Linux with complete freedom to open a file,  edit, and then reconnect, exactly where I left off from another machine.

A few years back, a buddy scoffed at my “cute little [vim] editor”. He was proud of his Sublime setup. It really was rather nifty. I mocked him right back saying, “vim can do anything Sublime can do, better and faster- and you call yourself a Linux guy….” He laughed it off and we carried on with our projects. The next morning he called, sounding a bit off. “Remember when you made fun of me yesterday for being a ‘Linux guy’ and using Sublime instead of vim?” “Yeeesssssss,” came my hesitant reply, not sure where this was going. “Well,” he angrily spat , “That comment bugged me all day. I decided to pull up vim and prove you wrong! I stayed up all night, trying to prove you wrong and you know what happened? I have a really cool vim setup that is identical to the Sublime setup! I deleted Sublime.”

True story, I swear!

All joking aside though, most editors and IDEs these days do support ssh. It is likely that whatever editor you prefer to use will still be compatible with remote development. Check out the editor support articles for guidance.

That’s it!

And that is really all it took to unchain my development workflow from a single machine and free me up to work anywhere, on anything. I no longer worry about a laptop dying on me. If it goes up in smoke, I can grab my iPad and be back up and running as fast as ssh reconnects. 

Bonus Round – Mobility

I wanted to see how far I could take the unchained approach and continued to push the envelope. To this day, there is nothing I run that requires a specific machine. The “move to the cloud” movement has only made things easier. 

Here are some of the other things that allowed me to become 100% unchained from a single machine:

Communication

  • Webmail, or IMAP connections, via an app
  • Slack facilitates instant team communication. There are apps for everything and a web UI as a fallback
  • IRC. Yes, IRC. The first chat groups I was ever part of were via IRC on the Freenode network, where I am still active today
  • Zoom. Great video conferencing software that requires very little bandwidth to operate

Connectivity

  • In-home wifi
  • On the go, the cell hotspot hits the spot
  • Most coffee shops and many public spaces have free wifi now

Secure connections

  • Use a VPN to prevent traffic snooping
  • SSH tunnels can also be used to route traffic directly to the server

I hope this article has inspired you to become an unchained developer and saved you some time in the process. I love the freedom and stress reduction it has afforded me. If you have a low powered machine that struggles under the weight of your development environment, this could save you big $$$ on an upgrade!

Are you already an unchained developer? What tips and tricks can you share in the comments?

Questions or need help designing your unchained server? I am happy to help you find an answer. Drop me a line on my contact page. 

Lock attached to door

How to Force SSL (HTTPS) in Laravel

By

On March 10, 2020

In Computing, Web Development

Out of the box, Laravel will allow both HTTPS and HTTP requests to your website or application. Ideally all requests are served via SSL. There are several ways to accomplish this, some of which require access to server configs. I am going to show you how you can easily force SSL in your Laravel application to ensure HTTPS will be on no matter where you application is deployed. Of course the server still requires a valid SSL certificate to run- that is outside the scope of this tutorial.

Assumptions

  • Working server with the SSL certificate already installed
  • Laravel app running
  • Requests being fulfilled on both HTTP and HTTPS
  • Basic Laravel knowledge

Time to complete in your app

30 minutes or less!

How it works

Laravel provides a mechanism for filtering HTTP requests called Middleware. Middleware has many use cases, a few of which include: user verification, CORS headers, logging requests, etc. Only after all Middleware conditions have been met is the app able to fulfill the visitor’s request. This is the perfect place for us to enforce SSL.

Read more about Middleware in the on the official Laravel docs https://laravel.com/docs/master/middleware

Step One: Create the Middleware Base

Middleware can be generated automatically with artisan with the following command:

php artisan make:middleware ForceSSL

The new file will be created in app/Http/Middleware/ForceSSL.php

namespace App\Http\Middleware;

use Closure;

class ForceSSL
{

    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        return $next($request);
    }
}

Step Two: Update the handler

All we have to do now is look at the request and if it is not secure redirect to the secure version of the url!

Update the handle method like so

    public function handle($request, Closure $next)
    {

        // If the request is not secure, redirect to the HTTPS url.
        if( !$request->secure() ) {
            return redirect()->secure( $request->getRequestUri() );
        }

        // Otherwise carry on.
        return $next($request);
    }

Step Three: Test

That is it. 

Really.

Go test it.

Step Four: Enjoy a nice scotch

‘nuff said

Photo by Anita Jankovic on Unsplash

Page 1 of 51

Next

Powered by WordPress & Beards