DEV Community

Hoang Le for INNOMIZE

Posted on • Edited on • Originally published at blog.innomizetech.com

How do we host our static website

You are building a static website and wanted to know how to host your site, but;

  • You don't want to perform manual steps.
  • You want to host for multiple environments such as Development, UAT, Staging, Production.
  • 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.
  • You wanted to deliver HTML, JavaScript, images, video and other files to your website visitors around the world with CDN.

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. Amazon Web Services 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 this article to know more details.

AWS_StaticWebsiteHosting_Architecture_4b
Static website hosting architecture at AWS

If you are new to AWS, you want to practice in order to know steps to host a site on AWS, this article will help you.

DevOps at Innomize 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:

Let's get started

Now, I will show steps to build and deploy a website using Serverless Component. Below are the reasons why I selected this approach:

  • It is pretty fast, in less minute you will have a site up and running.
  • It is an easy way to apply to our Monorepo since we have multiple apps per repo.
  • For consistency with our backend framework, we use the Serverless framework to build backend services with AWS Lambda, API Gateway, Cognito, and other AWS services.

Follow this guide, you will able to build and deploy your site, however, the Serverless component hasn't provided a way to deploy to multiple environments/stages using the same serverless.yml (or serverless.js) file yet. I have raised this issue, check out this if you want to know more details.

Note, I wrote this post based on suggestments and comments from the above Github issue.

Before getting started to deploy the site, if you haven't had a domain registered, you might need to:

After you had the SSL certificate and Route53 issued and registered, follow the following steps to compose and deploy your site:

  • Install Serverless
npm install serverless -g
  • Create a sample React application, you can skip this step if you already have your app.
npx create-react-app sls-dev-app
  • Install serverless component packages
npm install @serverless/core @serverless/template -D
  • Create serverless.js file in the project root directory
  • You can modify the serverless.js file based on your requirements. such as replace your domain name (i.e. change the domain.com to your registered domain name). Note, right now if you use the full domain name for the bucketName (i.e. www.my-app.domain.com), 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.
  • Deploy
# --env can be any value for your environment
sls --debug --env=dev

# then you can deploy to another environment
sls --debug --env=prod

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.

If you have any problem, feel free to send me a DM at @hoangleitvn

Visit our blog for more interesting articles. If you have any questions or need help you can contact me via Twitter.

Top comments (0)