Posts

NextJS Practice Series

Image
Introduction NextJS is a powerful React framework that enables developers to build high-performance web applications with features like Server-Side Rendering (SSR) and Static Site Generation (SSG). Key advantages include improved SEO, automatic code splitting for faster page loads, a built-in routing system, and an optimized developer experience with "Fast Refresh" and easy deployment through platforms like Vercel. Prerequisites NextJS framework is primarily used for building web applications based on ReactJS and is supported with many more features, so if you only have a need to create a Single Page Web Application or have never started with React , you should look up some basic knowledge before continuing with the posts in this series. Detail Using styled-components in Next Applications Understanding React Server Component Guide to Setting Up Jest Testing for a NextJS Project Guide to deploying NextJS on AWS ECS Guide to Setting Up CI/CD for NextJS with Jenkins, Gitlab, and...

All Practice Series

Image
Introduction This is a comprehensive page about the technologies I have shared in series format. You can view brief introductions and links to directly access each series you are interested in. In the field of software development, to deploy a product from the initial idea to its release, the standard process typically involves several stages as follows: Database : Designing and implementing the database according to business requirements, storing data during the system's operation. Backend : Handling the main logic of the system, communicating with the database and services. Frontend : Building the interface for users to interact with the system, which could be a desktop, mobile, or web application. This usually includes implementing UI/UX and integrating APIs from the backend. DevOps : Deploying the system for use, which can be done on a server or in the cloud. Testing : Applying testing methods to ensure the product meets the standards for release. Of course, these are just stan...

Guide to Querying and Pagination with AWS DynamoDB in NestJS

Image
Introduction In my previous article, I provided a basic guide on initializing and using AWS DynamoDB, but in this article, we will delve deeper into QueryCommand. In AWS DynamoDB, the Query method allows you to search for data based on the primary key (Partition Key) and filter conditions (Sort Key). To optimize performance and cost, DynamoDB supports a Pagination mechanism through the ExclusiveStartKey and LastEvaluatedKey parameters. Applying pagination not only reduces the data transfer load but also enables the application to handle large data tables smoothly, ensuring system stability. Detail Use AWS CDK to create the file lib/dynamodb-gsi-stack.ts import * as cdk from "aws-cdk-lib" import * as dynamodb from "aws-cdk-lib/aws-dynamodb" import { Construct } from "constructs" export class DynamoDbGsiStack extends cdk . Stack { constructor ( scope : Construct , id : string , props ?: cdk . StackProps ) { super (scope, id, props) ...

Guide to Initializing and Connecting AWS DynamoDB

Image
Introduction Amazon DynamoDB is a fully managed NoSQL database service that provides fast and predictable performance with seamless scalability at any scale. Key benefits include: unlimited scalability, extremely low latency in milliseconds, built-in security, and flexible pricing models based on usage (On-demand) to optimize costs. Detail Use AWS CDK to create the lib/dynamodb-stack.ts file import * as cdk from "aws-cdk-lib" import * as dynamodb from "aws-cdk-lib/awsf-dynamodb" import { Construct } from "constructs" export class DynamodbStack extends cdk . Stack { constructor ( scope : Construct , id : string , props ?: cdk . StackProps ) { super (scope, id, props) const productTable = new dynamodb. Table ( this , "ProductTable" , { tableName: "Products" , partitionKey: { name: "id" , type: dynamodb.AttributeType. STRING , }, billingMode: dynamodb.Bi...

Guide to Setting Up CI/CD for NextJS with Jenkins, Gitlab, and AWS ECS

Image
Introduction In the previous article, I provided instructions on setting up CI/CD with Jenkins and Gitlab to deploy a NestJS project to AWS EKS. Now, I will provide similar guidance for deploying a project using the NextJS framework to AWS ECS, triggering an auto build on Jenkins when pushing code to Gitlab, and running tests for the project before deployment. A summary of the steps involved will be as follows: Build the Docker image for the NextJS project and push it to AWS ECR. Deploy that Docker image to AWS ECS. Set up Jenkins to connect with Gitlab. When code is pushed to Gitlab, Jenkins will trigger an auto build of the steps defined in the Jenkinsfile, including: Pulling the new code from Gitlab. Running tests for the project. If the test fails, stop the deployment process. If the test passes, proceed to the next step. Building the Docker image with the new code and pushing it to AWS ECR. Deploying to AWS ECS by restarting the service, which will use the latest Docker image to d...