DEV Community

Cover image for NextJS deployment via AWS CodeCommit / Amplify
Shakir for AWS Community Builders

Posted on • Updated on

NextJS deployment via AWS CodeCommit / Amplify

Hey All 👋, Let's see how to add the NextJS starter code in an AWS CodeCommit repo and deploy it with AWS Amplify. I am using the Cloud9 IDE ☁️ for this exercise. You may follow these steps on any Linux/Unix based machine though.

I am using aws cli v2. You may upgrade the version if required. Also ensure you have 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 prompt/off
Enter fullscreen mode Exit fullscreen mode

The user id I'm using has administrator permissions 🔥, so I shouldn't have any issues while creating the repo. If not an admin, the IAM user should be setup with CodeCommit policies.

Let's go ahead 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": "",
        "cloneUrlSsh": "ssh://",
        "Arn": "arn:aws:codecommit:us-east-2:<account-id>:next-js-boilerplate"
Enter fullscreen mode Exit fullscreen mode

The repo 📁 is created and should appear in the list of repositories.

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

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

We are going to connect to the repo via SSH for which we have to upload the SSH public key to the AWS user account. But before that you have to ensure the SSH key is already generated. You may refer to this link if you want to know how to generate the SSH key pair. The public key in my system is at the standard location i.e. ~/.ssh/

Let's upload this key 🔑 and retrieve the public key id.

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

Setup SSH config, and modify its permission so that only the owner(current user) of the file can access it(Read + Write).

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

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

Let's get the GIT SSH URL and then clone it.

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

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

We have successfully cloned the repository, lets add some code to it. We can use npx for bootstraping a NextJS project. You may install nodejs/npm ) if its not already present in your system

$ cd next-js-boilerplate/

$ npx create-next-app@latest
✔ What is your project named? … next-js-boilerpate
Enter fullscreen mode Exit fullscreen mode

This installs the NextJS project, and it also creates a sub directory with the same name, so let's move contents from the sub directory to the main directory.

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

$ rmdir next-js-boilerplate/

$ ls -a
.   .eslintrc.json  .gitignore      node_modules  package-lock.json  public     styles
..  .git            next.config.js  package.json  pages    
Enter fullscreen mode Exit fullscreen mode

The code can now be pushed to the repo.

$ git status
On branch master

No commits yet

Untracked files:
  (use "git add <file>..." to include in what will be committed)

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

$ git push
Enter fullscreen mode Exit fullscreen mode

We can verify this on the AWS console.
NextJS Boilerplate code in AWS CodeCommit repo

🆒 we can now deploy this code via AWS Amplify, I am going to use the GUI for this.

Search for Amplify, create a new app, and then choose CodeCommit.
Select the repo type, in Amplify

The next step is as follows, to select the correct repo and branch.
Select repo and branch in Amplify screen

Jus continue to the final step with no changes, and deploy.
Deploy screen in Amplify

In a few minutes ⏱️, the app should be deployed. We should see the 4 stages(provision, build, deploy and verify) to be successful. There should also be a testing stage, which we haven't used here, as no tests are written.
Amplify stages

You should now be able to view ▶️ the application by clicking on the https link provided above.
NextJS deployment preview via Amplify

Thus, we have gone through some parts of CodeCommit and Amplify. CLI was used with CodeCommit, just to see the power of AWS CLI and I think many cloud operations are possible with it. Note that we can customize Amplify deployments with environment variables, build command modifications etc.

That's it for now, 🙂 thanks for reading...

Top comments (0)