Deployment of NextJs app in S3 using AWS CI/CD tools

Sandesh Rauth — Mon, 20 Mar 2023 08:30:34 +0000

Hey there, in this article, I am going to walk you through the process of deploying a Next.js app using AWS CI/CD tools, CodeCommitand CodePipeline. Before we begin, make sure you have an AWS account and are familiar with the basic concepts of AWS and Git flow.

Step 1: Create a Next.js app

First, let's create a new Next.js app using the command line. You can choose to create it with TypeScript by using the flag --typescript.

yarn create next-app my-next-app
cd my-next-app

Step 2: Create a `CodeCommit`repository

Now that we have our app set up, let's create a new repository in AWS CodeCommitto store our code. To do this, go to the AWS CodeCommitconsole and click on the "Create repository" button.
For this you can follow given steps shown in images.

Click on Create repository button you will see the following console. Here you need to write a name of your repo and add description if you want (It is optional). After that, hit Create button.

After creating repo, you will see the following instructions in the console. Please go through the each steps_(personal recommendation)_. Under the step 3 section, you will find the git command to clone this repo.

Now for cloning this repo, you must be able to create the Git credentials. You can follow this steps shown in official documentation.

Add this git origin to your existing code base. If you are not familiar with this steps go through this official documentation.

Step 3:Create a `CodePipeline`for deployment

Next, we need to create a new CodePipelinein AWS CodePipelineto handle the deployment of our app. Go through this steps.

In the AWS CodePipelineconsole, click on "Create pipeline" and follow the steps as shown in the images below and hit Next. Here you can select the New service role and AWS will create a new role for you. You need to edit this role later which is described in the step 5 below.

In the Next step add the source provider. The source provider( code container) for our app is AWS CodeCommitso choose the one. Here, choose the repository name and the branch name(main branch usually "master" or could be any like "develop", "main" etc) respectively and leave all other configuration as default and hit Next.

Once you are done with the second step, third one is pretty important one. Here you will going to choose the build provider. You can choose any one but here I am sticking with the AWS CodeBuild. Once you select this option, you will see other configuration options where you need to leave as default and only need to create a project name.

while creating the project, leave everything default. And In the environment section, for Operating System, choose Amazon Linux 2 and choose standard Runtime.

In the Buildspec section you can give any custom name for the build yml file. For now choose buildspec.yml which is the default one and leave all other configuration as it is and hit Continue to CodePipeline.

Now, you will be redirect to previous step and console will show your project. Now hit Next button.

In this step you have to specify the deploy provider. Choose S3 for now and mention Bucket name and check the Extract file before deploy checkbox as shown and hit Next.

Now review all the settings and create the pipeline. You may see automatic progress of the deployment where your build process will fail. So, don't get panic, we still have two more configuration to complete.

Step 4: create the IAM policy

As our pipeline needs access to the **S3 **and **CloudFront **services. So, Go to the deployment section to see all the logs by clicking the following link as shown in image.

Now under the Build details tab you will see Service role (created at Step 3 while naming the pipeline). Click in the role and you will be redirect to the IAM console.

Now Attach the inline policies as shown in the figure below for S3 write (PutObject) and CloudFront write (CreateInvalidation)

After going to the Create Policy console follow this steps.

First choose the service s3.
Under Actions section, expand write box and choose PutObject.
Mention S3 bucket and object.
Again click on Add additional permissions section and choose service CloudFront
Under Actions, expand write box and choose CreateInvalidation.
create the policy.

Step 5: create a `buildspec.yml` file in the vs code

Now you need to create buildspec.yml file in the root directory_(where your project's node_modules directory lies)_ in vs code. create the file and paste the given map.

version: 0.1

phases:
  pre_build:
    commands:
      - yarn install

  build:
    commands:
      - yarn run build

  post_build:
    commands:
      - aws s3 cp --recursive public-read ./build s3://<bucketname>/
      - aws s3 cp public-read --cache-control="max-age=0, no-cache, no-store, must-revalidate" ./build/index.html s3://<bucketname>/
      - aws cloudfront create-invalidation --distribution-id <your-cloudfront-id> --paths /index.html

artifacts:
  files:
    - 'build/*'
    - 'build/**/*'

The YAML file described above is quite simple.

In the pre_build stage, the script installs all necessary NPM package dependencies.
During the build stage, the script runs the yarn build command to compile and bundle the web app into the build directory.
In the post_build phase, the script carries out three operations. Firstly, it copies all contents of the build directory to the designated **S3 **bucket and makes them publicly accessible. Next, it copies the index.html file once more and sets particular caching HTTP headers to prevent the file from being cached by browsers. Finally, it creates an "invalidation" that instructs the **CloudFront **distribution to refresh its content from the S3 source bucket.

Step 6: Push the code to the origin

At this point, we have now finished all the configuration that needs to be done in AWS for CodeBuild to deploy our NextJsapp to S3. So, commit the changes and push the branch to the repository. You will see progress tag when clicking will shows you a deployment progress and after some minutes your code will be deployed to S3. The complete process looks likes this.

Hope you enjoyed the article and learned a new skills today. If you want more from me then don't forget to follow. Also, If you have any queries or feedback then please comment. Thank you and happy deployment!

Creating Axios Interceptor in React and NextJs

Sandesh Rauth — Sun, 19 Mar 2023 20:18:39 +0000

Hello and welcome to this article on creating an Axios interceptor in React and Next.js. In this article, we'll cover how to set up and use Axios, as well as how to create an interceptor that can automatically refresh tokens.

Step 1: Initializing the Project
First, we need to initialize the project with the following command: yarn create react-app <app-name> or npx create-react-app <app-name>. This command will create a new React app with the name of your choice.

Step 2: Creating the Axios Configuration File
Now that we have a new React app, we can create the directory service and create a file named axiosConfig.ts inside it. Here's the code you need to put in that file:

import axios from 'axios';
import { getToken, setToken } from '../../../utils/localStorage';
import { redirect } from "react-router-dom";
import { getRefreshToken } from '../login';

const statusCode = [401,402,403]
const HttpAuthInstance = axios.create({
    baseURL: process.env.REACT_APP_BASE_URL,
    headers: {
        "Authorization": "Bearer" + " " + getToken("token").accessToken
    }
})

HttpAuthInstance.interceptors.response.use((response) => {
    return response;
}, (error) => {
    if (statusCode.indexOf(error?.response?.status) !== -1) {
        getRefreshToken(getToken("token")?.refreshToken).then(res=>setToken("token",res?.data))
    }
})

export default HttpAuthInstance;

This code sets up an Axios instance that includes a base URL and headers with an authorization token. It also sets up an interceptor that checks for certain error status codes and refreshes the token if necessary.

Step 3: Using the Axios Configuration File
To use this Axios instance in your application, simply import it into the file where you need to make API calls. Here's an example of how to do that:

import HttpAuthInstance from './service/axiosConfig';

HttpAuthInstance.get('/api/users').then(response => {
    console.log(response.data);
});

In this example, we're making a GET request to the /api/users endpoint and logging the response data to the console.

That's it! With this Axios interceptor, your application will automatically refresh tokens when necessary, making it more secure and efficient. I hope you found this article helpful and informative. Happy coding!

DEV Community: Sandesh Rauth