This Banner is For Sale !!
Get your ad here for a week in 20$ only and get upto 15k traffic Daily!!!

NextJS deployment via AWS CodeCommit / Amplify


Hey All 👋, Let’s examine the way to add the NextJS starter code in an AWS CodeCommit repo and deploy it with AWS Amplify. I’m utilizing the Cloud9 IDE ☁️ for this train. You might observe these steps on any Linux/Unix primarily based machine although.

I’m utilizing aws cli v2. You might improve the model if required. Additionally guarantee you have got setup the CLI with the required authentication config.

$ aws --version
aws-cli/2.4.27 Python/3.8.8 Linux/4.14.262-200.489.amzn2.x86_64 exe/x86_64.amzn.2 immediate/off
Enter fullscreen mode

Exit fullscreen mode

The consumer id I am utilizing has administrator permissions 🔥, so I should not have any points whereas creating the repo. If not an admin, the IAM consumer ought to be setup with CodeCommit policies.

Let’s go forward and create the repo.

$ aws codecommit create-repository --repository-name next-js-boilerplate --repository-description "Boilerplate code for NextJS" --tag "code=JavaScript,framework=NextJS"
{
    "repositoryMetadata": {
        "accountId": "<account-id>",
        "repositoryId": "<repository-id>",
        "repositoryName": "next-js-boilerplate",
        "repositoryDescription": "Boilerplate code for NextJS",
        "lastModifiedDate": "2022-03-19T08:17:28.327000+00:00",
        "creationDate": "2022-03-19T08:17:28.327000+00:00",
        "cloneUrlHttp": "https://git-codecommit.us-east-2.amazonaws.com/v1/repos/next-js-boilerplate",
        "cloneUrlSsh": "ssh://git-codecommit.us-east-2.amazonaws.com/v1/repos/next-js-boilerplate",
        "Arn": "arn:aws:codecommit:us-east-2:<account-id>:next-js-boilerplate"
    }
}
Enter fullscreen mode

Exit fullscreen mode

The repo 📁 is created and may seem within the record of repositories.

$ aws codecommit list-repositories --output textual content
REPOSITORIES    <repository-id>    next-js-boilerplate
Enter fullscreen mode

Exit fullscreen mode

May be checked on the AWS console too, on the browser.
List of repositories in CodeCommit

We’re going to connect with the repo by way of SSH for which now we have to add the SSH public key to the AWS consumer account. However earlier than that it’s important to make sure the SSH secret’s already generated. You might confer with this link if you wish to know the way to generate the SSH key pair. The general public key in my system is at the usual location i.e. ~/.ssh/id_rsa.pub.

Let’s add this key 🔑 and retrieve the general public key id.

$ SSHPublicKeyId=$(aws iam upload-ssh-public-key --user-name nc --ssh-public-key-body file://~/.ssh/id_rsa.pub --output textual content --query SSHPublicKey.SSHPublicKeyId)
Enter fullscreen mode

Exit fullscreen mode

Setup SSH config, and modify its permission in order that solely the proprietor(present consumer) of the file can entry it(Learn + Write).

$ cat > ~/.ssh/config <<EOF
Host git-codecommit.*.amazonaws.com
 Person $SSHPublicKeyId
 EOF

$ chmod 600 ~/.ssh/config
Enter fullscreen mode

Exit fullscreen mode

Let’s get the GIT SSH URL after which clone it.

$  gitUrl=$(aws codecommit get-repository --repository-name next-js-boilerplate --query repositoryMetadata.cloneUrlSsh --output textual content)                                            

$ git clone $gitUrl
Cloning into 'next-js-boilerplate'...
warning: You seem to have cloned an empty repository.
Enter fullscreen mode

Exit fullscreen mode

We’ve efficiently cloned the repository, lets add some code to it. We will use npx for bootstraping a NextJS challenge. You might install nodejs/npm ) if its not already current in your system

$ cd next-js-boilerplate/

$ npx create-next-app@newest
✔ What's your challenge named? … next-js-boilerpate
Enter fullscreen mode

Exit fullscreen mode

This installs the NextJS challenge, and it additionally creates a sub listing with the identical identify, so let’s transfer contents from the sub listing to the primary listing.

$ mv next-js-boilerplate/.* .
$ mv next-js-boilerplate/* .

$ rmdir next-js-boilerplate/

$ ls -a
.   .eslintrc.json  .gitignore      node_modules  package-lock.json  public     kinds
..  .git            subsequent.config.js  package deal.json  pages              README.md
Enter fullscreen mode

Exit fullscreen mode

The code can now be pushed to the repo.

$ git standing
On department grasp

No commits but

Untracked recordsdata:
  (use "git add <file>..." to incorporate in what shall be dedicated)
        .eslintrc.json
        .gitignore
        README.md
        subsequent.config.js
        package-lock.json
        package deal.json
        pages/
        public/
        kinds/

$ git add .
$ git commit -m 'including nextjs boiler plate code'

$ git push
Enter fullscreen mode

Exit fullscreen mode

We will confirm this on the AWS console.
NextJS Boilerplate code in AWS CodeCommit repo

🆒 we are able to now deploy this code by way of AWS Amplify, I’m going to make use of the GUI for this.

Seek for Amplify, create a brand new app, after which select CodeCommit.
Select the repo type, in Amplify

The following step is as follows, to pick the right repo and department.
Select repo and branch in Amplify screen

Jus proceed to the ultimate step with no adjustments, and deploy.
Deploy screen in Amplify

In a couple of minutes ⏱️, the app ought to be deployed. We must always see the 4 phases(provision, construct, deploy and confirm) to achieve success. There must also be a testing stage, which we’ve not used right here, as no exams are written.
Amplify stages

It is best to now be capable of view ▶️ the appliance by clicking on the https hyperlink offered above.
NextJS deployment preview via Amplify

Thus, now we have gone by some components of CodeCommit and Amplify. CLI was used with CodeCommit, simply to see the ability of AWS CLI and I feel many cloud operations are potential with it. Observe that we are able to customise Amplify deployments with atmosphere variables, construct command modifications and so on.

That is it for now, 🙂 thanks for studying…

The Article was Inspired from tech community site.
Contact us if this is inspired from your article and we will give you credit for it for serving the community.

This Banner is For Sale !!
Get your ad here for a week in 20$ only and get upto 10k Tech related traffic daily !!!

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to Contribute to us or want to have 15k+ Audience read your Article ? Or Just want to make a strong Backlink?