Using Git to deploy a Next app to AWS Amplify Hosting
In this video we walk through all of the steps needed to deploy a static Next site to AWS Amplify hosting. We start by creating a new Next project and configuring the build script to create the static build. Next, we create a new GitHub project in our account and push up the code from our Next app to this new repository. Finally, we connect the GitHub repository with to AWS Amplify Console Hosting service and deploy the app. Once the app is deployed, we learn how to integrated Git-based CI & CD by pushing changes to our app and seeing the build automatically kick off.
Nader Dabit: [0:00] To get started, create a new Next app by running npm init next-app. Here, give the project a name and choose the Default starter app. Next, change into the directory and open the app in your text editor.
[0:15] Open package.json and add next export to the existing build script. Next export allows you to export your app to static HTML which can then be run standalone without the need of a Node.js server.
[0:29] Next, we'll go to GitHub and create a new Git repository for our app. Once the repo has been created, copy the URI of the repo onto your clipboard. Back at the command line, we'll initialize a new Git repository by running git init. Next, we'll set the origin by pasting in the URI of the repo we just created.
[1:00] Now, we'll add and commit the files within our project. We'll update our repo by running git push origin master. Next, open the AWS Console at console.aws.amazon.com. Here, search for AWS Amplify.
[1:28] In the Amplify Console, click Connect App. Here, choose GitHub and click continue. Once you've authenticated, you should see a list of all of your repositories. Here I'll choose the new repository that I just created.
[1:45] Next, we'll choose the master branch. Next, we'll update the baseDirectory which is the output directory when a new build is run. We'll set this to out and then click Save. Click Next and then click Save and deploy. Once the build is complete, you should be able to click on the URL to view your app.
[2:21] Next, let's make an update and kick off a new build. To do so, open your text editor and then open index.js. Here, we'll add a V2 to our title and save the file.
[2:36] Back at the command line, we'll add our files, commit the changes and push the updates to Git. Back in the Amplify Console, you should see that a new build has been kicked off. When we open our app, we should see that V2 has been deployed.