DEV Community: Yeonggyoo Jeon

AWS Amplify vs Netlify comparison for hosting static websites

Yeonggyoo Jeon — Sun, 31 Mar 2024 11:55:40 +0000

Before we get into

When you're working on a software development project, you might need a simple demo webpage or demo app to demonstrate your technology or do a POC. Static web pages that are organized as a simple Single Page App (SPA) are useful at this time. There are many web development frameworks that help you implement SPA.(Next.js, Gatsby, Hugo, Nuxt, Jekyll, etc...) You can create a demo app with SPA and host it on the web as a simple static web page to ensure accessibility. There are many services that support various frameworks that can be used for this (Netlify, StackBlitx, AWS Amplify, etc...). There are also services (including frameworks) such as Streamlit and Gradio that allow you to create a SPA-based demo web with Python and host it on the web. These services specialize in rapid web app development for machine learning models for services (I'll cover them in another article when I get a chance).

Configuring the demo app with Next.js

Next.js is an open source framework for developing React-based web applications. It offers a wide range of features such as server-side rendering (SSR), static site generation (SSG), automatic code splitting, image optimization, and more to enable fast and user-friendly web app development.

Key features of Next.js:

Server-side rendering: Render HTML, CSS, and JavaScript on the server before sending the page to the client to speed up page loading.
Static site generation: Deploy your web app as a static site by generating HTML, CSS, and JavaScript as static files during the build phase.
Automatic code splitting: Load only the code you need to speed up page loading.
Image optimization: Automatically optimize images to improve the performance of your web app.
SEO-friendly: Server-side rendering makes it easy for search engine crawlers to index your pages.
Multiple routing options: Along with default routing, we support file-based routing, dynamic routing, catchall routing, and more.
API routing: Easily create and manage server-side APIs.
Community support: We have an active community and a wealth of documentation and tutorials.

Next.js is right for you if you:
You want to develop fast, user-friendly web apps.

To create SEO-optimized web apps
To develop React-based web apps
Framework that offers a wide range of features
Next.js is a powerful framework that is easy to learn, easy to use, and offers a wide range of features that can greatly simplify web app development.

Learn more about Next.js:

Official documentation: https://nextjs.org/docs/
Tutorials: https://nextjs.org/learn/
Community: https://discord.gg/nextjs

Hume AI's demo app

Hume AI is a company that provides an API that recognizes human emotions from text, voice, and vision using AI technology. They have a demo app based on Next.js that can service their API, so I tested it using it. In this article, I will build and run this web app locally and finally deploy it to Netlify and AWS Amplify.

App Code Repository : https://github.com/HumeAI/hume-api-examples

You can try it out here: https://www.hume.ai

Requirements

Node

Download Demo app code



git clone https://github.com/HumeAI/hume-api-examples
cd hume-api-examples

Development



npm install
npm run dev

Build



npm build

Development mode will start serving on localhost:3001.

The choice for hosting static websites

Two popular options that web developers often utilize to host static websites or single page apps (SPAs) are Netlify and AWS Amplify. Both platforms support automatic builds and hosting in Git repositories, making static site deployment very easy. In this article, we'll compare the pros and cons of each based on real-world examples of NextJS app deployments.
We've deployed Hume AI's Example demo app written in Next.js to Netlify and AWS Amplify respectively.

Netlify: https://6575c5e5fc89902adec12a2c--delicate-dodol-3779df.netlify.app
Amplify: https://dev.d1c4gaqa0opsnq.mynextapp.com/

Netlify

Netlify brands itself as an "All-in-one platform for automating modern web projects." It offers continuous deployment from Git, serverless functions, a global CDN, domain management, SSL/TLS certificates, and more.

Deploy and Hosting

The simplest way to host with Netlify is to upload the output files built with 'Deploy manually' by dragging and dropping or browsing to upload, and you can easily connect to the automatically generated URL to host your web app.

After it finishes running, you'll have a URL hosted by Netlify.
Netify url : https://6575c5e5fc89902adec12a2c--delicate-dodol-3779df.netlify.app

Pros:

1.Excellent developer experience with instant cache invalidation and atomic deploys
2. Simple HTTPS setup with free Let's Encrypt SSL/TLS certificates
3. Form handling without needing a backend
4. Serverless functions with generous free tier
5. Plugin ecosystem for extending builds
6. GitHub integration with deploy previews

Cons:

1. Paid plans required for features like split testing, analytics, etc.
2. Limited control over CDN caching and behavior

AWS Amplify

AWS Amplify is a service that provides an all-in-one solution to build and deploy full-stack serverless web apps, including hosting for single page apps and static sites. It layers on top of other AWS services.

Deploy and Hosting

Requirements

- [Node](https://nodejs.org/)
- AWS Account

Install Amplify CLI



npm install -g @aws-amplify/cli

Configure the Amplify CLI



amplify configure

Adding Amplify hosting



$ amplify init

? Enter a name for the project: mynextapp
? Enter a name for the environment: dev
? Choose your default editor: Visual Studio Code (or your preferred editor)
? Choose the type of app that youre building: javascript
? What javascript framework are you using: react
? Source Directory Path: src
? Distribution Directory Path: out
? Build Command: npm run-script build
? Start Command: npm run-script start
? Do you want to use an AWS profile? Y
? Please choose the profile you want to use: <your profile>

Add hosting with the Amplify add command:



amplify add hosting

Deploy the app with the Amplify publish command:

You can integrate Amplify's Framework via Amplify configuration in the Source Code folder without accessing the Web UI, and run it from build to deployment in a single step using the 'amplify publish' command in the CLI environment.



amplify publish

✔ Successfully pulled backend environment dev from the cloud.

    Current Environment: dev

┌──────────┬────────────────┬───────────┬───────────────────┐
│ Category │ Resource name  │ Operation │ Provider plugin   │
├──────────┼────────────────┼───────────┼───────────────────┤
│ Hosting  │ amplifyhosting │ Create    │ awscloudformation │
└──────────┴────────────────┴───────────┴───────────────────┘

? Are you sure you want to continue? Yes

After it finishes running, you'll have a URL hosted by AWS Amplify.
like 'Amplify url : https://dev.d1c4gaqa0opsnq.mynextapp.com/'

Pros:

1. Tightly integrated with the AWS ecosystem


Custom CDN behaviors and cache policies
Feature branches and pull request previews
CI/CD capabilities beyond just hosting
Built-in monitoring and logging

Cons:

1. More complex configuration than Netlify
No free tier, pay-per-use pricing
SSL certificates require provisioning

Conclusion

Both Netlify and AWS Amplify offer powerful solutions for hosting static web pages with unique features and considerations. Netlify is ideal for small to medium-sized projects with simple deployment requirements due to its **simplicity and ease of use. On the other hand, AWS Amplify offers advanced customization options and seamless integration with the broader AWS ecosystem, making it ideal for larger projects that require scalability and flexibility. Ultimately, the choice between Netlify and AWS Amplify depends on your project requirements, budget, and familiarity with the respective platforms.

In the end, the best platform for you depends on your specific needs and skill level. Both Netlify and AWS Amplify offer free trials, so we recommend trying both to see which platform is best for you.

Additional Information

Allow insecure connection on web browser setting

Setting up for insecure content

For Mixed content problem caused by insecure(without ssl) connection with another app manager

Chrome : Settings > Privacy and security > Site settings > Additional content settings > Insecure content
Add the sites :
- [*.]netlify.app
- [*.]amplifyapp.com

References

Developing service with AWS CDK

Yeonggyoo Jeon — Fri, 28 Oct 2022 02:31:17 +0000

1. What is AWS CDK(Cloud Development Kit)?

AWS CDK is an open-sourced software development framework which possible to design cloud infra with codes. AWS opened to the public in July 2019. The official website defines it as "lets you define your cloud infrastructure as code in one of its supported programming languages". Unlike the previous IaC, the CDK provides a syntax for configuring cloud resources with default values verified using existing familiar programming languages. This allows non-professionals to start developing cloud applications by configuring service infra quickly, easily, and in a secure and reusable way.

Which IaC would I use while I develop with AWS?

In my case, Infrastructure management in service development using the public cloud seems to have gone through the following process.

a. Deploy/Manage service infra using the UI console

If you use the AWS Console to configure the infrastructure for service development or hands-on, and o design and deploy the entire service architecture with a mouse click, you would have the question 'Is it really possible to configure a complex system through this process?'. In addition, it becomes inconvenient when you have to build the same infrastructure elements over and over again or rebuild the entire infrastructure across multiple clusters.

b. Use the CLI command

Feeling limited by the click-and-click approach, people usually start deploying services and configuring cloud infrastructure using the AWS CLI as the script of the command line interface. However, it is hard to cope with retrying in the error situation or coping with the processing the race condition in the multi-task.

c. Interest into the IaC (Infra as Code)

You can also learn AWS CloudFormation script, tools that allow you to manage service infrastructure. Even you can choose Hashicorp's Terraform to describe and manage the infrastructure components in a corresponding format of Terraform script. However, I was doubtful when I look at those kinds of scripts as IaC and watched the process of the work with it from the side. From a programmer's view, the previous IaC script with the format of JSON or Yaml seems like too much repeating of the same texts. Therefore, it was clear that even a small increase in the size of the system would result in the number and files becoming too large to manage.

d. CDK, the truly programmable IaC

I found out about the AWS CDK when I felt that scripting IaC is not my way. CDK drew interestd me who was developing software for a long time as it is possible to write programming language and design it with software development skills that were getting improved over decades. Therefore, I thought that it would possible to be more efficient in designing, composing, and managing service infrastructure with CDK. Furthermore, this idea has become even more solid now that I have completed the API service development project using CDK.

The comparison with Terraform, the representative of the existing IaC, is attached in the table below.

Terraform VS AWS CDK

-	Terraform	CDK
Programming feature	Implement with Yaml or HCL, Need to learn a new language different from the existing ones. Auto-completion by installing an assist tools(Not perfect). Difficult to implement safely due to compile errors, ... etc	5 existing programming languages are possible to use. Various extensions are possible using OOP. flexible structure and reusability can be improved by using patterns. Non-limited expandability by the author's programming ability. Automation through existing IDE(VSCode). Safe implementation through compile errors
Workload for composing infra	Many references to configuring infrastructure as an approach from IaaS	Combining the latest technologies in the container/serverless architecture rather than IaaS. Fully support IaaS too.
Support for Public Cloud	Support various public cloud	Specialized in AWS. High grouth potential because ecosystems such as CDK for Terraform and CDK8S ar being created.
License, Maturity and Stability	Requires an enterprise contract for more than basic feature. Slightly lowered the stability in deployment as directly with SDK	Free for CloudFormation, ParameterStore, Matured the stability in deployment using CloudFormation as the backend.

Who's needed for?

Rather than using the AWS Console, you want more flexible, convenient, and robust infrastructure management.
I want to configure/manage resources using IaC, but I can't afford to manage monotonous and huge yaml files.
I want to actively utilize my programming-related development skills for IaC writing.
I want the optimal IaC to configure the service with a serverless architecture in AWS. Developers with the above concerns can consider CDK as a tool for designing and managing service infrastructure.

How is it operate?

Written in a software development language, cloud infrastructure can be modeled as reusable components. Currently, 5 development languages (Typescript, Javascript, Python, Java, C#) are supported. If you look at the operation process of CDK, the written CDK application is executed with CDK CLI, synthesized into CloudFormation Template, and distributed through AWS CloudFormation. It might help to understand if you think of it as running through.

[Deploying infra by writing code]

2. How to start?

Since the official Amazon documentation is well done, you can easily access it by referring to the documentation. You can refer to the Developer Guide and refer to the API Reference for detailed specifications of APIs during actual development. In the case of CDK API, since AWS services are well abstracted, I think that it is a good approach to refer to the CDK API Reference as a way to learn AWS services. In addition, a hands-on lab for first-time users is provided through the CDK Workshop page.

Developer Guide (https://docs.aws.amazon.com/cdk/latest/guide/home.html)
API Reference (https://docs.aws.amazon.com/cdk/api/latest/docs/aws-construct-library.html)
CDK Workshop (https://cdkworkshop.com/)

Development using AWS CDK

cdk is implemented using node. Therefore, no matter what programming language is used for development, node must be installed by default. Install aws-cdk using npm in the environment where node is installed. After initializing the project through 'cdk init', install the necessary node libraries through 'npm install'. Preparations for cdk development are complete, and now, cdk development through coding and development of the stack are checked for errors in the code through 'cdk list'. You just have to proceed. During development and debugging, 'list', 'diff', and 'synth' are used, and 'cdk deploy' is repeatedly used when deploying the confirmed code. If the service is finally terminated or the infrastructure needs to be deleted, you can cleanly delete the installed applications and infrastructure with 'cdk destroy'.

Install CDK CLI

npm install -g aws-cdk
cdk version
mkdir hello-cdk
cd hello-cdk
cdk init --language [typescript/javascript/python/java/csharp]
npm install

Commands of CDK

cdk bootstrap       # Deploy the stack for the CDK Toolkit in your AWS environment
cdk init        # Initializes a new default application in the language of the user's choice
cdk diff        # Identify differences between local AWS CDK code and applications running on AWS 
cdk synth       # Compiling AWS CDK Applications to AWS CloudFormation Templates
cdk deploy      # Deploy the AWS CDK application to a set up AWS account 
cdk destory     # Delete the deployed CDK application

In this article, I will leave it as an introduction and plan a detailed article for developing with CDK next time for more detailed development methods.
For those of you who want to test a little more, please use the reference link above and try the hands-on lab on the CDK Workshop page, it seems to be helpful for understanding.

3. Feature in development with CDK

Advantages of AWS development using CDK

CDK is developed using Constructs that abstract AWS resources into high-level components. You can use the basic settings used in the best practices of AWS services just by referring to these Constructs, and further understand each service in depth just by understanding the API documents.

[AWS CDK Construct]

On the AWS CDK official page, the advantages of developing using cdk are divided into 4 categories as follows.

Easier cloud onboarding

Even if you're new to using AWS, you can speed up your onboarding to the Cloud. cdk's API abstracts AWS resources into high-level components and is initialized with optimal default settings, so you can configure an appropriate system without an expert.

Faster development process

Since the infrastructure is defined using the characteristics of the programming language, efficient and fast development is possible depending on how the logic such as OOP, loop, and conditional statements are configured.

Customizable and shareable

It is possible to design with reusable components suitable for each requirement, and it is possible to quickly expand security, regulations, and compliance with requirements through easy sharing of libraryd components.

No context switching

Since code development and distribution are possible in the IDE in the development environment, developers can develop applications and manage infrastructure without changing or setting up a separate development environment.

References in the solutions constructs

There are structures that are patterned by arranging components that can be used repeatedly, and I have made them into solutions and made them into CDK Constructs. You can find it on the AWS Solutions Constructs page, take it, use it, or refer to it and reuse it in the system configuration you develop to more quickly construct your desired service design.

Ecosystem Expansion

CDK is a great choice for development on AWS and has great advantages, especially when designing serverless architectures. However, you may think that it is not possible to use other public clouds or to directly build an on-premise or IaaS-focused Kubernetes cluster. In order to solve these points, there are projects that can link the advantages of CDK to other platforms and make Kubernetes design with cdk, together with other platforms or CNCF.

Terraform-cdk

It was started supporting the CDK as a tool for defining and provisioning infrastructure using Terraform.
[Terraform Providers]

(https://www.hashicorp.com/blog/cdk-for-terraform-enabling-python-and-typescript-support/)
(https://www.hashicorp.com/blog/announcing-cdk-for-terraform-0-1)
CDK8s

You can use CDK for Kubernetes (CDK8s) to define and manage Kubernetes applications. CDK8s is currently registered as CNCF's Sandbox Project.
[Workflow of CDK8s]

(https://aws.amazon.com/ko/blogs/korea/using-cdk8s-for-kubernetes-applications/)
(https://aws.amazon.com/blogs/containers/introducing-cdk-for-kubernetes/)

Ending

In this article, I introduced the CDK and briefly explained the development flow of how development proceeds. In the next article, I'm planning an article that explains in more detail how to proceed with CDK development. My team is developing a system that provides APIs related to Vision AI using AWS CDK. Next, I will be able to share related tips and development tips on the blog while development is in progress.

Thank you.

Applying for the AWS Community Builder

Yeonggyoo Jeon — Tue, 25 Oct 2022 07:31:57 +0000

AWS Community Builder is a DevRel(Developer Relation) program operated by AWS. AWS operates those two DevRel programs each the AWS community builder and the AWS hero.

1. What is the AWS community builder

Official webpage : https://aws.amazon.com/developer/community/community-builders/

One of the DevRel programs which being officially operated by AWS.
Provide technical resources, helps and opportunities for human networking.
Share technical knowledge about AWS and connect global tech communities.

Operated in the technical areas for each category below

Containers
Data (Databases, Analytics and BI)
Developer Tools
Front-End Web and Mobile
Game Tech
Graviton/Arm Development
Cloud Ops
Machine Learning
Network Content & Delivery
Security & Identity
Serverless
Storage There are no restrictions on activities by category, although applications are made for each one.

2. What the benefits are providing?

If you participate as the Community Builder, would be invited to the Slack channel which bring together the program operators and builders. The benefits of the Community builders introduced here are as follows.

Connecting with others :
Webinars & Briefings :
Certification Exam Vouchers :
Swag Welcome Kit :
AWS Credit :
A Free One-Year Subscription to Cloud Academy :
Third-Party ISV Offers :
Publish Content on Dev.to :
Super sweet logos, Wallpaper & Assets
re:Invent discount passes:
Service beta opportunities

WelcomeKit

3. Ending

It would great opportunity for those who are interested in AWS technology and like sharing knowledge with community or blog. The application is made twice a year and the duration of the activity is one year and can be extended. I hope that many people around the world will share their know-how and knowledge about AWS-related technologies through this community activity.