{"id":1359,"date":"2018-10-17T01:18:44","date_gmt":"2018-10-17T00:18:44","guid":{"rendered":"https:\/\/rosetta.vn\/short\/?p=1359"},"modified":"2018-10-25T15:44:31","modified_gmt":"2018-10-25T14:44:31","slug":"deploying-frontend-applications%e2%80%8a-%e2%80%8athe-fun-way-hacker-noon","status":"publish","type":"post","link":"https:\/\/rosetta.vn\/short\/2018\/10\/17\/deploying-frontend-applications%e2%80%8a-%e2%80%8athe-fun-way-hacker-noon\/","title":{"rendered":"Deploying frontend applications\u200a\u2014\u200athe fun way \u2013 Hacker Noon"},"content":{"rendered":"
\n
\n
\n
\n

In this post I will tell you how I deploy my frontend applications using GitHub, Jenkins, Docker and Digital Ocean.\u00a0I had some doubts<\/a>\u00a0through my learning journey so I decided to put up what I learned on this post as a self note.<\/p>\n

Note:<\/strong>\u00a0This post is not intended for you my friend, expert and consultant guru 15+ years exp DevOps architect; this is for those of us who are just starting to discover the beauty of CI\/CD tech. This post may contain some bad practices, please take it with a grain of salt.<\/p>\n<\/div>\n<\/div>\n<\/section>\n

\n
\n
\n<\/div>\n
\n
\n

Cut the crap, shoot me the\u00a0TL;DR<\/h3>\n

You\u2019re like me, you skim around and grab the bullets, you leave. Here\u2019s the TL;DR for you:<\/p>\n

1. Spin up 2 servers with Docker installed: build and production servers<\/p><\/blockquote>\n

2. Install Jenkins (or any other CI) in your build server<\/p><\/blockquote>\n

3. Create a job in your CI that clones, installs and builds your project\u00a0in a docker image<\/strong><\/p><\/blockquote>\n

4. Set up webhooks in GitHub to fire the job on every push<\/p><\/blockquote>\n

5. Push the docker image to your personal Docker Hub<\/p><\/blockquote>\n

6. SSH into your production server<\/p><\/blockquote>\n

7. Pull the image from Docker Hub and run the container<\/p><\/blockquote>\n

8. Profit<\/p><\/blockquote>\n

\n
\n
<\/div>\n
<\/div>\n<\/div>
Docker based continuous deployment workflow<\/figcaption><\/figure>\n

Thanks for reading.<\/p>\n<\/div>\n<\/div>\n<\/section>\n

\n
\n
\n<\/div>\n
\n
\n

Hopefully I caught your attention and you want more details now. In the following paragraphs I will outline my thought process and explain how my deployment pipeline works. I won\u2019t go deep into technical details but will instead put up some useful links for your further research.<\/p>\n

The problem<\/h3>\n

Simple: I developed a\u00a0TypeScript AST interactive viewer<\/a>\u00a0in Angular and I wanted to deploy it.<\/p>\n<\/div>\n

\n
\n
\n
<\/div>\n
<\/div>\n<\/div>
TypeScript AST Interactive Viewer<\/a><\/figcaption><\/figure>\n<\/div>\n
\n

Bu\u2026 but, why not use Firebase, Google Engine, vanilla FTP, GH pages? you know, like \u201cone-click deploys\u201d duh\u200a\u2014\u200a<\/em>you may ask. All those tools work great, but most of them are either too expensive or just felt too magical (nothing tops \u201cgcloud app deploy\u201d) and\u00a0are not that fun to learn<\/strong>! I wanted to understand, automate and have full control of the whole deployment process. I wanted a challenge, I wanted to learn, I wanted to have fun (hell I\u2019m inspired).<\/p>\n

What it all comes down\u00a0to<\/h4>\n

I set up my own challenge which looked like this:<\/p>\n

    \n
  1. I want to push code and have it deployed automatically\u200a\u2014\u200aaka Continuous Delivery.<\/li>\n
  2. I want to pay a cheap hosting service<\/li>\n<\/ol>\n

    Let\u2019s draw these non-functional requirements in a black box diagram\u00a0:<\/p>\n

    \n
    \n
    <\/div>\n
    <\/div>\n<\/div>
    Problem illustration. From GitHub to Live App. Icon: magic by \u2726 Shmidt Sergey \u2726 from the Noun\u00a0Project<\/figcaption><\/figure>\n

    Unraveling the Magic\u00a0box<\/h3>\n

    I\u2019ll divide this chapter into three parts. Each part will reveal one small portion of my Magic box:<\/p>\n

      \n
    1. From GitHub to Magic<\/li>\n
    2. Developing the Magic<\/li>\n
    3. From Magic to Live App<\/li>\n<\/ol>\n<\/div>\n<\/div>\n<\/section>\n
      \n
      \n
      \n<\/div>\n
      \n
      \n

      1. From GitHub to\u00a0Magic<\/h4>\n

      Push code, sit and relax, refresh live app, profit. That\u2019s all I wanted.<\/p>\n

      Choosing my VPS (Virtual Private Server)<\/em><\/strong><\/p>\n

      The first step was then to set up a server which could grab my code from GitHub and execute a series of commands (npm i && npm run build<\/em>). Not quite sure what to do next, but I knew I had to start from there.<\/p>\n

      After reading about the best VPS providers out there, I finally went with\u00a0Digital Ocean<\/a>.\u00a0Great tutorials<\/strong>, easy for new comers, decent DNS management and good pricing\u200a\u2014\u200awas a no-brainer.<\/p>\n

      CI tools everywhere<\/em><\/strong><\/p>\n

      After signing up, I knew I needed some sort of tool that let me grab the code and automate the build process\u200a\u2014\u200athe CI tool\u00a0(Continuous Integration)<\/em>. There are several of them out there, some of them targeted for open source projects, some primarily designed to be self hosted, some premium, some free. I chose Jenkins mainly for its concept of Pipelines and because I had some familiarity with the tool.<\/p>\n

      Reading through some tutorials, it was relatively easy to get my Jenkins instance up and running. Now I needed to tell Jenkins to grab my code whenever I git pushed. Turns out there are dozens of posts out there on how to set up a GitHub webhook pointing from your repo to your Jenkins Droplet IP. Setting this up was faster than I expected (not quite straightforward for private GitHub repos, though).<\/p>\n

      Let\u2019s recap<\/em><\/strong><\/p>\n

      At this point I have a DO droplet running Linux with a Jenkins instance pulling code from GitHub on every git push. How cool, huh? Let\u2019s see how our Magic box starts to reveal itself:<\/p>\n

      \n
      \n
      <\/div>\n
      <\/div>\n<\/div>
      Black box diagram with Digital Ocean Droplet and\u00a0Jenkins<\/figcaption><\/figure>\n

      Useful links:<\/em><\/strong><\/p>\n

        \n
      1. How to create a Droplet in Digital Ocean<\/a>.<\/li>\n
      2. How to install Jenkins in a DO Droplet<\/a>.<\/li>\n
      3. How to set up and Jenkins pipeline<\/a>.<\/li>\n
      4. How to integrate GitHub with Jenkins<\/a>.<\/li>\n<\/ol>\n<\/div>\n<\/div>\n<\/section>\n
        \n
        \n
        \n<\/div>\n
        \n
        \n

        2. Developing the\u00a0magic<\/h4>\n

        In the next few paragraphs, I\u2019ll develop the core of my strategy which leverage Docker and DO droplets. Let\u2019s dive right in.<\/p>\n

        Dockerize all the things<\/em><\/strong><\/p>\n

        At this point, I have a\u00a0dist<\/em>\u00a0folder with an\u00a0index.html<\/em>\u00a0and its dependencies, ready to go. I know I need to spin up a webserver to serve these files over the web. Let\u2019s then install\u00a0nginx<\/em>\u00a0(or\u00a0Apache<\/em>) in the same server and serve the thing. I also need to install Node and a couple global node packages. Easy peasy, let\u2019s do that\u2026<\/p>\n

        \u201cBut wait, Carlos, that hmmm\u2026 that doesn\u2019t feel like the right thing to do\u200a\u2014\u200ayou\u2019d end up with a ton of stuff installed on your server and managing your dependencies will be a hell later on\u2026 just saying, though\u201d\u200a\u2014\u200aInner self<\/em><\/p><\/blockquote>\n

        Indeed, I needed a way to encapsulate the dependencies, the\u00a0dist<\/em>\u00a0artifact and even the webserver so that it wouldn\u2019t mess up my server. Let\u2019s use\u00a0Docker<\/strong>. It would let me build an image with my webserver running on a port on my server, and my server filesystem would barely notice what I just did. How cool, huh?<\/p>\n

        I set up a\u00a0Dockerfile<\/a>\u00a0for my app and edited the job in Jenkins to build a docker image and run the container with the 80 port exposed. It worked like charm. I could access my app live from\u00a0http:\/\/my.server.ip<\/em>.<\/p>\n

        On scaling and stuff<\/em><\/strong><\/p>\n

        I planned to have many applications deployed with this same schema using the same server. It wouldn\u2019t make sense then to run Jenkins and all my containers in the same server. It just felt like I could do much better\u200a\u2014\u200aI wanted to separate concerns. Sure I can juggle with different users, having Jenkins living in its own user, etc, but something within me really wanted to keep a machine specifically for building my applications.<\/p>\n

        Based on this premise, I created another droplet (aka server<\/em>) with less memory (no heavy lifting, just to serve webapps) and with Docker installed as it should be able to run Docker containers. I would then run all my apps in this server. This would let me scale well because I could easily change the memory allocation on my build server, while leaving my apps untouched.<\/p>\n

        Let\u2019s recap<\/em><\/strong><\/p>\n

        We\u2019ve made quite a good progress. We\u2019ve settled for Docker as our core build mechanism and we also decided to separate concerns in favor of maintainability by spinning up a separate production server in another server.<\/p>\n

        \n
        \n
        <\/div>\n
        <\/div>\n<\/div>
        Deployment workflow with Docker and 2 DO\u00a0droplets<\/figcaption><\/figure>\n

        Useful links:<\/em><\/strong><\/p>\n

          \n
        1. How to Dockerize\u00a0Angular<\/a>,\u00a0React<\/a>\u00a0and\u00a0Vue<\/a>\u00a0apps.<\/li>\n
        2. How to install Docker in Ubuntu<\/a>.<\/li>\n<\/ol>\n<\/div>\n<\/div>\n<\/section>\n
          \n
          \n
          \n<\/div>\n
          \n
          \n

          3. From Magic to Live\u00a0App<\/h4>\n

          I wasn\u2019t sure how to integrate my servers (build + prod). After\u00a0asking for help<\/a>and researching, I came to the conclusion that, for my particular use case, I could implement the following workflow:<\/p>\n

            \n
          1. Build the docker image in the\u00a0Build Server<\/em><\/li>\n
          2. Push the docker image to my\u00a0Docker Hub<\/em><\/li>\n
          3. Log in to my prod server via SSH<\/li>\n
          4. Pull the image from the\u00a0Docker Hub<\/em>\u00a0and run the container<\/li>\n<\/ol>\n

            It made sense as I didn\u2019t have to resort to using tools like docker-machine or kubernetes to orchestrate my servers.\u00a0It just works,\u00a0<\/em>it\u2019s simple and it looks clean enough for me.<\/p>\n

            Note on security:<\/em>\u00a0It\u2019s recommended to disable password based authentication on your production server and enable only\u00a0key based authentication from your build server<\/a>. That is, it will be virtually impossible to login to your prod server if not from your build server.<\/p>\n

            Show me some code<\/em><\/strong><\/p>\n

            A technical post is not a technical post until you show some code. Let\u2019s see what the Jenkins pipeline looks like in the CI when integrating the whole thing:<\/p>\n<\/div>\n

            \n
            \n
            \n
            <\/div>\n
            <\/div>\n<\/div>
            Jenkins Scripted Pipeline. Visit\u00a0gist\u00a0here<\/a>.<\/figcaption><\/figure>\n<\/div>\n
            \n

            I\u2019ve labeled some lines in the snippet, let\u2019s go through them real quick:<\/p>\n

              \n
            1. Build docker image based on the\u00a0Dockerfile<\/a>.<\/li>\n
            2. Push the docker image to my\u00a0Docker Hub<\/em>\u00a0account.<\/li>\n
            3. SSH into the production server<\/li>\n
            4. Pull the image from my Docker Hub.<\/em><\/li>\n
            5. Run the container from the image we just pulled. I run the container on port 8080, but that\u2019s because I set up nginx to route the traffic to several containers in the same server via subdomain\u00a0proxy_pass\u00a0<\/em>(e.g. domainA.com serves container A, domainB.com serves container B). I won\u2019t elaborate on this technique as it falls out of the scope of this post.<\/li>\n<\/ol>\n

              As stated at the beginning of this post, this pipeline runs on every\u00a0git push\u00a0<\/em>made in master. The following image shows what happens on Jenkins for every deployment. By the way,\u00a0I love this image as it depicts what the challenge looked like in my head before diving in.<\/strong><\/p>\n

              \n
              \n
              <\/div>\n
              <\/div>\n<\/div>
              Stage view of the Jenkins pipeline. Each line represents a deployment triggered by a git\u00a0push.<\/figcaption><\/figure>\n

              Let\u2019s wrap up<\/em><\/strong><\/p>\n

              We finally made it. We have unraveled our black box. Every secret has been revealed and we have been able to cover each one of its components.\u00a0Let\u2019s take a look at what our final deployment workflow looks like now!<\/strong><\/p>\n

              \n
              \n
              <\/div>\n
              <\/div>\n<\/div>
              Diagram of the full deployment strategy covered in this post. A Docker image is built in the build server, goes through the Docker Hub and finally made it to the production server.<\/figcaption><\/figure>\n

              Useful links<\/em><\/strong><\/p>\n

                \n
              1. Enable Key based authentication in Ubuntu<\/a>.<\/li>\n
              2. Run Docker containers and expose ports<\/a>.<\/li>\n<\/ol>\n<\/div>\n<\/div>\n<\/section>\n
                \n
                \n
                \n<\/div>\n
                \n
                \n

                Conclusion<\/h3>\n

                There are tons of deployment strategies out there, each of them with its pros and cons, and each one relying on a different stack with its own taste. That\u2019s the beauty of it. In this post I covered just one of these strategies that grants me full control over my custom deployment pipeline using two servers, a CI and Docker.<\/p>\n

                It all might sound daunting if you\u2019re not very familiar with the concepts we covered. Fear not, I say. It\u2019s a long post mainly because it sums up a learning journey which spanned across almost 3 months, putting 1\u20132 hours each night grinding on these servers and reading stuff I was not very familiar with.<\/p>\n

                Even if you\u2019re a FrontEnd developer focused on browser-land, I still think it\u2019s very valuable that you get familiar with the full stack. It will give you the tools to have a solid conversation and form an opinion when discussing DevOps stuff in your company. It\u2019s better to say\u00a0\u201cyou guys are the experts, but this is my opinion on the matter\u2026\u201d\u00a0<\/em>than saying \u201cwell, that\u2019s not my thing, you ops guys figure it out\u201d.<\/em><\/p>\n

                I hope you got some inspiration to go ahead and implement your personal deployment pipeline and get to know all this DevOps tech\u200a\u2014\u200atons of fun ahead!<\/p>\n<\/div>\n<\/div>\n<\/section>\n<\/blockquote>\n

                Source: Deploying frontend applications\u200a\u2014\u200athe fun way \u2013 Hacker Noon<\/a><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

                In this post I will tell you how I deploy my frontend applications using GitHub, Jenkins, Docker and Digital Ocean.\u00a0I had some doubts\u00a0through my learning journey so I decided to put up what I learned on this post as a<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false},"categories":[30,196,215],"tags":[942,943,941,889,944],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p8jhJx-lV","_links":{"self":[{"href":"https:\/\/rosetta.vn\/short\/wp-json\/wp\/v2\/posts\/1359"}],"collection":[{"href":"https:\/\/rosetta.vn\/short\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rosetta.vn\/short\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rosetta.vn\/short\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/rosetta.vn\/short\/wp-json\/wp\/v2\/comments?post=1359"}],"version-history":[{"count":1,"href":"https:\/\/rosetta.vn\/short\/wp-json\/wp\/v2\/posts\/1359\/revisions"}],"predecessor-version":[{"id":1360,"href":"https:\/\/rosetta.vn\/short\/wp-json\/wp\/v2\/posts\/1359\/revisions\/1360"}],"wp:attachment":[{"href":"https:\/\/rosetta.vn\/short\/wp-json\/wp\/v2\/media?parent=1359"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rosetta.vn\/short\/wp-json\/wp\/v2\/categories?post=1359"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rosetta.vn\/short\/wp-json\/wp\/v2\/tags?post=1359"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}