Published on 2023-07-19T08:00:00.000Z
AngularJS to React: why the time to switch is now?
Łukasz
Chief Technology Officer
Next.js has emerged as a premier framework, excelling in creating applications with React that prioritize performance, superior SEO, and enhanced user experience.
When it comes to deploying Next.js applications, there are two predominant methods:
-
Vercel deployment: Originating from the creators of Next.js, Vercel offers a serverless deployment avenue that is straightforward to set up. However, it does not offer complete control over the infrastructure and might prove costly for expansive applications.
-
Self-Hosted Infrastructure: While various platforms cater to this requirement, AWS stands out, offering pivotal advantages such as scalability by demand, an extensive suite of cloud services, a cost-effective pricing model, and ubiquitous accessibility.
Challenges of AWS Application Orchestration
Orchestrating an application within AWS can pose challenges and consume significant time, more so when establishing distinct many environments with varying configurations.
Here's where the concept of 'infrastructure-as-code' becomes invaluable.
STT is a notable solution in this domain. It's a framework optimized for constructing contemporary full-stack applications on the AWS platform. SST not only aids in deploying serverless applications built with Next.js as well as Svelte, Remix, Astro, or Solid to your AWS account but also seamlessly integrates backend functionalities.
At its core, the framework is underpinned by AWS CDK, a robust AWS utility crafted to delineate cloud application resources using familiar programming languages. Essentially, AWS CDK permits the code authoring, which subsequently translates to CloudFormation template files.
SST Implementation: A Step-by-Step Guide
Let's see what it looks like in practice:
Adding SST to your Next.js project is extremely simple.
Install the sst npm package in your project root.
yarn add sst
SST automatically detects AWS credentials in your environment and uses them for making requests to AWS. The only environment variables that you need to set are:
-
AWS_ACCESS_KEY_ID -
AWS_SECRET_ACCESS_KEY
Now initialize SST in your project root.
yarn create sst
This will create the sst.config.ts file where all your infrastructure is described as Stacks. Stack contains the code that defines the app's infrastructure; you can create multiple stacks, each with different resources and dependencies, using constructs to add any feature to your app, like a frontend, database, API, cron job, etc.
Below is a sample config of a simple Next.js application:
import { SSTConfig } from 'sst';
import { Bucket, NextjsSite } from 'sst/constructs';
export default {
config() {
return {
name: 'next-app',
region: 'us-east-1',
};
},
stacks(app) {
app.stack(function Site({ stack }) {
const bucket = new Bucket(stack, 'next-app-bucket');
const site = new NextjsSite(stack, 'next-app', {
bind: [bucket],
});
stack.addOutputs({
SiteUrl: site.url,
});
});
},
} satisfies SSTConfig;Now simply run yarn sst deploy, and the infrastructure will be created, and then your application will be deployed on autogenerated or your custom domain.
The final element of any modern development process is the automation of deployment and environment management. We can do this using a tool such as Circle CI, Bitbucket Pipelines, or GitHub Actions. Of course, sst is fully compatible with CI/CD solutions. Below is an example GitHub Actions workflow file that use OpenID Connect to authenticate with AWS.
name: SST workflow
on: push
concurrency: merge-${{ github.ref }}
permissions:
id-token: write
contents: read
jobs:
DeployApp:
environment: Production
runs-on: ubuntu-latest
steps:
- name: Git clone the repository
uses: actions/checkout@v3
- name: configure aws credentials
uses: aws-actions/configure-aws-credentials@v2
with:
role-to-assume: arn:aws:iam::${{ vars.AWS_ACCOUNT_ID }}:role/GitHub
aws-region: us-east-1
- name: Deploy app
run: |
yarn install
yarn sst deploy --stage prodThe Dev Environment & UI Console of SST
SST provides a dev environment and comes with its own UI console based on your CDK stack that allows you to debug and test your Lambda functions locally.
It invokes AWS resources by proxying the request from your AWS account to your local machine. Changes are automatically detected, built, and live reloaded . You can also use breakpoints to debug your functions live with your favourite IDE.
The Transformative Benefits of SST
In summary, SST, offers transformative benefits for developers:
Developer Centricity: Serverless architecture liberates developers from the intricacies of infrastructure management. This allows them to focus solely on coding, enhancing productivity and innovation.
Automatic Resource Provisioning: SST cleverly perceives the application's needs and auto-provisions the requisite AWS resources. This not only streamlines the deployment process but also ensures optimal resource allocation, devoid of manual intervention.
Minimized Error Potential: By automating much of the provisioning and configuration process, SST drastically limits the scope for human errors. This augments the reliability and robustness of deployments.
Cost-Efficiency: With serverless, you only pay for what you use. As SST seamlessly manages resource provisioning based on actual usage, resulting in potential cost savings, as there are no over-provisioning or idle resources.
In essence, SST encapsulates the benefits of serverless while providing a streamlined, developer-friendly approach to deploying applications on AWS.
SST has a lot more to offer; you can read about all the features you can use in the excellent documentation. There is also a dedicated discord server where you can get support. Of course, nothing can replace the work of a specialist who will manually fine-tune every element of the environment, but when you need to launch an application or MVP quickly, I think SST is one of the best solutions.
