angular Docker frontend jenkins react Technology

Deploying frontend applications — the fun way

Deploying frontend applications — the fun way

Deploying frontend applications — the fun way

Phrase cloud with DevOps and FrontEnd applied sciences

On this publish I’ll inform you how I deploy my frontend purposes utilizing GitHub, Jenkins, Docker and Digital Ocean. I had some doubts by way of my studying journey so I made a decision to place up what I discovered on this submit as a self notice.

Word: This publish is just not meant for you my good friend, skilled and advisor guru 15+ years exp DevOps architect; that is for these of us who’re simply beginning to uncover the great thing about CI/CD tech. This publish might include some dangerous practices, please take it with a grain of salt.

Minimize the crap, shoot me the TL;DR

You’re like me, you skim round and seize the bullets, you allow. Right here’s the TL;DR for you:

1. Spin up 2 servers with Docker put in: construct and manufacturing servers2. Set up Jenkins (or another CI) in your construct server3. Create a job in your CI that clones, installs and builds your venture in a docker image4. Arrange webhooks in GitHub to fireside the job on each push5. Push the docker picture to your private Docker Hub6. SSH into your manufacturing server7. Pull the picture from Docker Hub and run the container8. RevenueDocker based mostly steady deployment workflow

Thanks for studying.

Hopefully I caught your consideration and also you need extra particulars now. Within the following paragraphs I’ll define my thought course of and clarify how my deployment pipeline works. I gained’t go deep into technical particulars however will as an alternative put up some helpful hyperlinks on your additional analysis.

The issue

Easy: I developed a TypeScript AST interactive viewer in Angular and I needed to deploy it.

TypeScript AST Interactive Viewer

Bu… however, why not use Firebase, Google Engine, vanilla FTP, GH pages? you understand, like “one-click deploys” duh — chances are you’ll ask. All these instruments work nice, however most of them are both too costly or simply felt too magical (nothing tops “gcloud app deploy”) and are usually not that fun to study! I needed to know, automate and have full management of the entire deployment course of. I needed a problem, I needed to study, I needed to have fun (hell I’m impressed).

What all of it comes down to

I arrange my very own problem which appeared like this:

  1. I need to push code and have it deployed mechanically — aka Steady Supply.
  2. I need to pay an affordable internet hosting service

Let’s draw these non-functional necessities in a black field diagram :

Drawback illustration. From GitHub to Stay App. Icon: magic by ✦ Shmidt Sergey ✦ from the Noun Venture

Unraveling the Magic field

I’ll divide this chapter into three elements. Every half will reveal one small portion of my Magic field:

  1. From GitHub to Magic
  2. Creating the Magic
  3. From Magic to Reside App

1. From GitHub to Magic

Push code, sit and loosen up, refresh stay app, revenue. That’s all I needed.

Selecting my VPS (Digital Personal Server)

Step one was then to arrange a server which might seize my code from GitHub and execute a collection of instructions (npm i && npm run construct). Not fairly positive what to do subsequent, however I knew I needed to begin from there.

After studying about the perfect VPS suppliers on the market, I lastly went with Digital Ocean. Nice tutorials, straightforward for brand spanking new comers, respectable DNS administration and good pricing — was a no brainer.

CI instruments in all places

After signing up, I knew I wanted some type of device that permit me seize the code and automate the construct course of — the CI device (Steady Integration). There are a number of of them on the market, a few of them focused for open supply tasks, some primarily designed to be self hosted, some premium, some free. I selected Jenkins primarily for its idea of Pipelines and since I had some familiarity with the software.

Studying by means of some tutorials, it was comparatively straightforward to get my Jenkins occasion up and operating. Now I wanted to inform Jenkins to seize my code every time I git pushed. Turns on the market are dozens of posts on the market on learn how to arrange a GitHub webhook pointing out of your repo to your Jenkins Droplet IP. Setting this up was quicker than I anticipated (not fairly simple for personal GitHub repos, although).

Let’s recap

At this level I’ve a DO droplet operating Linux with a Jenkins occasion pulling code from GitHub on each git push. How cool, huh? Let’s see how our Magic field begins to disclose itself:

Black field diagram with Digital Ocean Droplet and Jenkins

Helpful hyperlinks:

  1. Learn how to create a Droplet in Digital Ocean.
  2. Learn how to set up Jenkins in a DO Droplet.
  3. How you can arrange and Jenkins pipeline.
  4. The best way to combine GitHub with Jenkins.

2. Creating the magic

Within the subsequent few paragraphs, I’ll develop the core of my technique which leverage Docker and DO droplets. Let’s dive proper in.

Dockerize all of the issues

At this level, I’ve a dist folder with an index.html and its dependencies, able to go. I do know I have to spin up a webserver to serve these information over the online. Let’s then set up nginx (or Apache) in the identical server and serve the factor. I additionally want to put in Node and a pair international node packages. Straightforward peasy, let’s do that…

“But wait, Carlos, that hmmm… that doesn’t feel like the right thing to do — you’d end up with a ton of stuff installed on your server and managing your dependencies will be a hell later on… just saying, though” — Internal self

Certainly, I wanted a way to encapsulate the dependencies, the dist artifact and even the webserver in order that it wouldn’t mess up my server. Let’s use Docker. It might let me construct a picture with my webserver operating on a port on my server, and my server filesystem would barely discover what I simply did. How cool, huh?

I arrange a Dockerfile for my app and edited the job in Jenkins to construct a docker picture and run the container with the 80 port uncovered. It labored like appeal. I might entry my app reside from http://my.server.ip.

On scaling and stuff

I deliberate to have many purposes deployed with this similar schema utilizing the identical server. It wouldn’t make sense then to run Jenkins and all my containers in the identical server. It simply felt like I might do a lot better — I needed to separate considerations. Positive I can juggle with totally different customers, having Jenkins dwelling in its personal consumer, and so forth, however one thing inside me actually needed to maintain a machine particularly for constructing my purposes.

Based mostly on this premise, I created one other droplet (aka server) with much less reminiscence (no heavy lifting, simply to serve webapps) and with Docker put in appropriately capable of run Docker containers. I might then run all my apps on this server. This might let me scale properly as a result of I might simply change the reminiscence allocation on my construct server, whereas leaving my apps untouched.

Let’s recap

We’ve made fairly a superb progress. We’ve settled for Docker as our core construct mechanism and we additionally determined to separate considerations in favor of maintainability by spinning up a separate manufacturing server in one other server.

Deployment workflow with Docker and a couple of DO droplets

Helpful hyperlinks:

  1. Find out how to Dockerize Angular, React and Vue apps.
  2. Methods to set up Docker in Ubuntu.

three. From Magic to Stay App

I wasn’t positive learn how to combine my servers (construct + prod). After asking for assist and researching, I got here to the conclusion that, for my specific use case, I might implement the next workflow:

  1. Construct the docker picture within the Construct Server
  2. Push the docker picture to my Docker Hub
  3. Log in to my prod server by way of SSH
  4. Pull the picture from the Docker Hub and run the container

It made sense as I didn’t should resort to utilizing instruments like docker-machine or kubernetes to orchestrate my servers. It simply works, it’s easy and it appears clear sufficient for me.

Observe on safety: It’s beneficial to disable password based mostly authentication in your manufacturing server and allow solely key based mostly authentication out of your construct server. That’s, it is going to be nearly unimaginable to login to your prod server if not out of your construct server.

Present me some code

A technical submit just isn’t a technical publish till you present some code. Let’s see what the Jenkins pipeline seems like within the CI when integrating the entire factor:

Jenkins Scripted Pipeline. Go to gist right here.

I’ve labeled some strains within the snippet, let’s undergo them actual fast:

  1. Construct docker picture based mostly on the Dockerfile.
  2. Push the docker picture to my Docker Hub account.
  3. SSH into the manufacturing server
  4. Pull the picture from my Docker Hub.
  5. Run the container from the picture we simply pulled. I run the container on port 8080, however that’s as a result of I arrange nginx to route the visitors to a number of containers in the identical server by way of subdomain proxy_pass (e.g. serves container A, serves container B). I gained’t elaborate on this system because it falls out of the scope of this submit.

As said firstly of this publish, this pipeline runs on each git push made in grasp. The next picture exhibits what occurs on Jenkins for each deployment. By the way, I really like this picture because it depicts what the problem appeared like in my head earlier than diving in.

Stage view of the Jenkins pipeline. Every line represents a deployment triggered by a git push.

Let’s wrap up

We lastly made it. We’ve got unraveled our black field. Each secret has been revealed and we have now been capable of cowl every certainly one of its elements. Let’s check out what our last deployment workflow seems to be like now!

Diagram of the complete deployment technique coated on this publish. A Docker picture is constructed within the construct server, goes via the Docker Hub and eventually made it to the manufacturing server.

Helpful hyperlinks

  1. Allow Key based mostly authentication in Ubuntu.
  2. Run Docker containers and expose ports.


There are tons of deployment methods on the market, every of them with its execs and cons, and every one counting on a unique stack with its personal style. That’s the great thing about it. On this submit I coated simply considered one of these methods that grants me full management over my customized deployment pipeline utilizing two servers, a CI and Docker.

All of it may sound daunting in case you’re not very conversant in the ideas we coated. Worry not, I say. It’s an extended publish primarily as a result of it sums up a studying journey which spanned throughout virtually three months, placing 1–2 hours every night time grinding on these servers and studying stuff I used to be not very acquainted with.

Even should you’re a FrontEnd developer targeted on browser-land, I nonetheless assume it’s very helpful that you simply get acquainted with the complete stack. It offers you the instruments to have a strong dialog and type an opinion when discussing DevOps stuff in your organization. It’s higher to say “you guys are the experts, but this is my opinion on the matter…” than saying “well, that’s not my thing, you ops guys figure it out”.

I hope you bought some inspiration to go forward and implement your private deployment pipeline and get to know all this DevOps tech — tons of fun forward!

Shameless self promotion

I’m not an novice SoundCloud rapper nor I’m in search of funds in Patreon. I simply need you to take a look at my different posts like this one or this one, perhaps you’ll be able to seize one or two issues that you simply like.

Discover me on twitter @caroso1222 and don’t overlook to say hello!

Deploying frontend applications — the fun way was initially revealed in Hacker Midday on Medium, the place individuals are persevering with the dialog by highlighting and responding to this story.