How do we host our static website
Tags: serverless, devops, aws
Published: 2019-10-26 03:44:27

<!-- wp:paragraph -->
<p>You are building a static website and wanted to know how to host your site, but;</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>You don't want to perform manual steps.</li><li>You want to host for multiple environments such as <strong>Development</strong>, <strong>UAT</strong>, <strong>Staging</strong>, <strong>Production</strong>.</li><li>You want to reduce cost, provide high-levels of reliability, require almost no IT administration, and scale to handle enterprise-level traffic with no additional work.</li><li>You wanted to deliver HTML, JavaScript, images, video and other files to your website visitors around the world with CDN.</li></ul>
<!-- /wp:list -->

<!-- wp:more -->
<!--more-->
<!-- /wp:more -->

<!-- wp:paragraph -->
<p>In this article, I will show you how to host a static website in a few minutes without manual steps, you can define the CI/CD pipeline to automate your deployment process pretty easy. <a href="https://aws.amazon.com/getting-started/projects/host-static-website/">Amazon Web Services </a>is the most popular public cloud vendor in the world, they provide services to simply making a website on their infrastructure around the world. Check out <a href="https://aws.amazon.com/getting-started/projects/host-static-website/">this article</a> to know more details. </p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://d1.awsstatic.com/Projects/v1/AWS_StaticWebsiteHosting_Architecture_4b.da7f28eb4f76da574c98a8b2898af8f5d3150e48.png" alt="AWS_StaticWebsiteHosting_Architecture_4b"/><figcaption><a href="https://aws.amazon.com/getting-started/projects/host-static-website/">Static website hosting architecture at AWS</a></figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>If you are new to AWS, you want to practice in order to know steps to host a site on AWS, <a href="https://dev.to/arswaw/host-a-serverless-static-website-with-free-ssl-in-15-minutes-hd3">this article</a> will help you.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>DevOps</strong> at <a href="https://www.innomizetech.com/">Innomize</a> is the most important aspect of our solutions and required for all our projects. Automation reduces time-to-market, the risk of human errors and redundancy in the system while increasing the efficiency of the project delivery. To automate the static website deployment, there are a couple of ways:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Using<strong> </strong><a href="https://aws-amplify.github.io/">the AWS Amplify</a> framework.</li><li>Using the <a href="https://serverless.com">Serverless</a> framework and define CloudFormation resources, then using the <a href="https://www.npmjs.com/package/serverless-s3-sync">serverless-s3-sync</a> plugin to sync your static files to the S3 bucket. </li><li>Using the <a href="https://github.com/serverless/components">Serverless Component</a>, a new infrastructure provisioning technology to build, compose, and deploy apps in seconds.</li></ul>
<!-- /wp:list -->

<!-- wp:heading {"level":4} -->
<h4>Let's get started</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Now, I will show steps to build and deploy a website using <strong>Serverless Component.</strong> Below are the reasons why I selected this approach:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>It is pretty fast, in less minute you will have a site up and running.</li><li>It is an easy way to apply to our <a href="https://en.wikipedia.org/wiki/Monorepo">Monorepo</a> since we have multiple apps per repo.</li><li>For consistency with our backend framework, we use the <strong>Serverless framework</strong> to build backend services with <strong>AWS Lambda</strong>, <strong>API Gateway</strong>, <strong>Cognito</strong>, and other AWS services.</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Follow <a href="https://github.com/serverless/components/tree/master/templates/website">this guide</a>, you will able to build and deploy your site, however, the <strong>Serverless component</strong> hasn't provided a way to deploy to multiple environments/stages using the same serverless.yml (or serverless.js) file yet. I have raised <a href="https://github.com/serverless/components/issues/481">this issue</a>, check out this if you want to know more details. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><em>Note, I wrote this post based on suggestments and comments from the above Github issue.</em></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Before getting started to deploy the site, if you haven't had a domain registered, you might need to:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Check out <a href="https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/domain-register.html">this article</a> to register a new domain.</li><li>Request a wildcard public cert by following <a href="https://docs.aws.amazon.com/acm/latest/userguide/gs-acm-request-public.html">this article</a>.</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>After  you had the SSL certificate and Route53 issued and registered, follow the following steps to compose and deploy your site:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Install Serverless</li></ul>
<!-- /wp:list -->

<!-- wp:code -->
<pre class="wp-block-code"><code>npm install serverless -g</code></pre>
<!-- /wp:code -->

<!-- wp:list -->
<ul><li>Create a sample React application, you can skip this step if you already have your app.</li></ul>
<!-- /wp:list -->

<!-- wp:code -->
<pre class="wp-block-code"><code>npx create-react-app sls-dev-app</code></pre>
<!-- /wp:code -->

<!-- wp:list -->
<ul><li>Install serverless component packages</li></ul>
<!-- /wp:list -->

<!-- wp:code -->
<pre class="wp-block-code"><code>npm install @serverless/core @serverless/template -D</code></pre>
<!-- /wp:code -->

<!-- wp:list -->
<ul><li>Create <em>serverless.js </em> file in the project root directory</li></ul>
<!-- /wp:list -->


{% gist https://gist.github.com/hoang-innomizetech/38dfbfa5c29a44fec072de004be8d57c %}

<!-- wp:list -->
<ul><li>You can modify the serverless.js file based on your requirements. such as replace your domain name (i.e. change the <em>domain.com</em> to your registered domain name). <strong>Note, right now if you use the full domain name for the bucketName (i.e. </strong><a rel="noreferrer noopener" href="http://www.my-app.domain.com/" target="_blank"><strong>www.my-app.domain.com</strong></a><strong>), you will end up with an error related to CloudFront distribution, that is the reason why I used hyphens (-) instead of using dots (.) for bucket name.</strong></li></ul>
<!-- /wp:list -->

<!-- wp:list -->
<ul><li>Deploy</li></ul>
<!-- /wp:list -->

<!-- wp:code -->
<pre class="wp-block-code"><code># --env can be any value for your environment
sls --debug --env=dev

# then you can deploy to another environment
sls --debug --env=prod</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>In a few minutes (it depends on how fast the CloudFront distribution provision and register your site), you will have your site up and running.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If you have any problem, feel free to send me a DM at <a href="https://twitter.com/hoangleitvn">@hoangleitvn</a></p>
<!-- /wp:paragraph -->
 

Visit our [blog](https://innomizetech.com/blog) for more interesting articles. If you have any questions or need help you can contact me via [Twitter](https://twitter.com/hoangleitvn).