mramshaw / Meatballs

Exploring deployment options in the Cloud

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Meatballs

Exporing deployment options in the Cloud (mainly from the context of deploying React and Vue apps)

[Full disclosure: I have never seen "Cloudy with a Chance of Meatballs" but the title stuck with me.]

Motivation

While researching competitors to AWS S3 for hosting my ReactAWS repo, I ended up trying out many of them. Which didn't really fit into the goals of that particular project - which was to explore deploying a minimal React scaffold to AWS.

Cloud Deployment Options

Depending upon your deployment requirements, any of the following may be an option:

[Many of them have free options. Most will require installing a CLI tool.]

Bitbucket Cloud

Bitbucket Cloud is a Bitbucket option (Bitbucket is one of the Atlassian companies).

Like both GitHub and GitLab, Bitbucket has a deployment option.

Firebase

Firebase was acquired by Google in 2014.

Firebase helps mobile and web app teams succeed

From: http://firebase.google.com/

Features React Firebase.

Definitely worth a look for Mobile, known for authentication and Crashlytics.

As perhaps might be expected, their firebase CLI is exceptionally useful.

Check out my demo Vue.js app deployed to Firebase at: https://vuerender-f8354.web.app/ or https://vuerender-f8354.firebaseapp.com/

GitHub Pages

GitHub Pages are pretty straightforward.

Check out my Corkboard repo deployed on GitHub Pages: https://mramshaw.github.io/Corkboard/

GitLab Pages

GitLab Pages seem to be pretty much the same thing as GitHub Pages, but for GitLab of course.

Heroku

Heroku is owned by Salesforce.com and offers a number of attractive services.

It uses containers, which are referred to as dynos: http://www.heroku.com/dynos

Deploying to Heroku can be a little bit complicated.

Netlify

Netlify is very easy to use, so a pretty good option.

Of course, Netlify are known for defining Jamstack.

So, not surprisingly, Netlify is really optimal for Jamstack deployments.

Check out my ReactAWS scaffold deployed on Netlify: https://compassionate-sinoussi-40e0e0.netlify.com/

Render

Render seems to be an interesting alternative to Heroku, probably worth investigating.

They offer a summary of how Render differs from Heroku:

http://render.com/render-vs-heroku-comparison

One difference:

Heroku customers running production and staging workloads typically see cost reductions of over 50% after switching to Render

And:

Heroku serves all content over HTTP/1.1. However, major browsers have supported HTTP/2 since 2015. Render serves all requests over HTTP/2, falling back to HTTP/1.1 for older clients. This minimizes simultaneous connections to your Render apps and reduces page load times for all your users.

[Both quotes are from the Render web page. Other differences between the two services are also listed.]

Note that Render can integrate with either a GitHub repo or a GitLab repo.

These appear to be the only deployment options available (for now?).

Apart from the GitHub / GitLab root repo proviso, seems like a nice service.

Note that - at the free level - the Let's Encrypt site certificate expires in three (3) months.

Stackbit

Stackbit describe themselves as:

THE BEST WAY TO JAMSTACK

[I am including them here for completeness, but they are probably only for Jamstack deployments.]

Surge

Surge appears to be for static websites only, so perhaps not suitable for React.

Surge describes themselves as:

Static web publishing for Front-End Developers

From: http://surge.sh/

[Note the Static part.]

And:

Surge has been built from the ground up for native web application publishing and is committed to being the best way for Front-End Developers to put HTML5 applications into production.

From: http://surge.sh/help/getting-started-with-surge

Zeit

[Zeit is sometimes referred to as simply Now.]

ZEIT Now is a cloud platform for static frontends and serverless functions. It enables developers to host websites and web applications that deploy instantly, scale automatically, and require no supervision.

From: http://github.com/zeit/now/tree/master/examples

Reference

Some useful reference notes follow.

Jamstack

Jamstack (formerly known as JAMstack) is an architecture defined by Mathias Biilmann (CEO & Co-founder of Netlify):

A modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup

[The JAM in Jamstack stands for Javascript, APIs, and Markup. So ... somewhat more than a static website.]

It’s a new way of building websites and apps that delivers better performance, higher security, lower cost of scaling, and a better developer experience.

From: http://jamstack.org/

Check out Jamstack examples here: http://jamstack.org/examples/

[Incidentally, Jamstack sites are considered by AWS to be well-architected.]

To achieve optimal efficiency and cost reduction, Jamstack sites require a CDN.

Jamstack sites are serverless:

The thing that they all have in common is that they don’t depend on a web server.

From: http://jamstack.org/

While Jamstack sites are effectively serverless, Jamstack itself is not considered to be serverless.

To Do

  • Add links to a Vue.js app deployed on Firebase
  • Add link to a React.js app deployed on GitHub Pages
  • Add more details on Render versus Heroku
  • Remove link to deleted Heroku deployment (Heroku is no longer free)
  • Remove link to deleted Render deployment
  • Investigate Twelve-factor options
  • Add more notes on cloud deployment options