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.
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:
- Using the AWS Amplify framework.
- Using the Serverless framework and define CloudFormation resources, then using the serverless-s3-sync plugin to sync your static files to the S3 bucket.
- Using the Serverless Component, a new infrastructure provisioning technology to build, compose, and deploy apps in seconds.
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:
- Check out this article to register a new domain.
- Request a wildcard public cert by following this article.
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=prodIn 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)