DEV Community

loading...
AWS Community Builders

Modern Full-Stack Serverless, Part VIII

Salah Elhossiny
ML engineer || AWS Certified MLS || AWS Community Builders member || Fullstack developer
・8 min read

In this part, we’ll learn about the following:

CLI-based deployments

Using our local project, we will deploy an app to Amplify
Console hosting directly from the CLI.

Git-based deployments

Using a GitHub repository, we will deploy an app to Amplify
Console hosting and learn how to trigger new builds when
changes are merged into the master branch.

Access control

Add access control to restrict access to your branches with a
username and password.

Custom domains

Use your custom domain name for the deployment.

Let’s get started

CLI-Based Deployments

In this section, we will learn how to deploy a project to Amplify
Console hosting directly from the CLI.
To get started, create a new React app:~ npx create-react-app fullstack-app

 ~ cd full-stack-app
 ~ npm install aws-amplify @aws-amplify/ui-react
Enter fullscreen mode Exit fullscreen mode

Next, we’ll initialize a new Amplify project and add a single service,
authentication:

 ~ amplify init
 # Follow the steps to give the project a name, environment
 name, and set the
 default text editor.
 # Accept defaults for everything else and choose your AWS
 Profile.
 ~ amplify add auth
 ? Do you want to use the default authentication and security
 configuration?
 Default configuration
 ? How do you want users to be able to sign in? Username
 ? Do you want to configure advanced settings? No, I am done.

Enter fullscreen mode Exit fullscreen mode

When running the init command, we are walked through the same
set of questions we’ve been walked through in all of the previous
parts.

We are asked questions like what our source and distribution
directories are, as well as the build command. By default, the
Amplify CLI will detect the framework and automatically set these
for you for many popular frameworks, like in our React projects.

If you are using a framework that is not recognized by the Amplify
CLI, or have a custom build configuration, you may need to set these
values to be something different.

To add hosting, we can use the hosting category:

 ~ amplify add hosting
 ? Select the plugin module to execute: Hosting with Amplify Console
 ? Choose a type: Manual Deployment

Enter fullscreen mode Exit fullscreen mode

Next, let’s update our frontend code to add a basic greeting as well as
authentication.

Start by opening src/index.js and configuring the Amplify app by
adding the following code below the last import:


 import Amplify from 'aws-amplify';
 import config from './aws-exports';

 Amplify.configure(config);
Enter fullscreen mode Exit fullscreen mode

Then update src/App.js with the following code:


import React from 'react'
import logo from './logo.svg'
import './App.css'
import { withAuthenticator } from '@aws-amplify/ui-react'


function App() {
 return (
  <div className="App">
   <header className="App-header">
    <img src={logo} className="App-logo" alt="logo" />
    <h1>Hello World!</h1>
   </header>
  </div>
 );
}

export default withAuthenticator(App, { includeGreetings: true })

Enter fullscreen mode Exit fullscreen mode

Our app is now ready to deploy. To deploy both the frontend and backend, we can run the publish command. The publishcommand will deploy both the frontend and backend code to the Amplify Console:

  ~ amplify publish

Enter fullscreen mode Exit fullscreen mode

Now, we should be able to view the app in the console with both the
frontend deployment as well as backend service configuration:

  ~ amplify console
Enter fullscreen mode Exit fullscreen mode

From the Amplify Console dashboard, click the app name that was just deployed.

Here, you should be able to see a toggle to view both the frontend (Frontend environments) as well as the backend (Backend environments) deployments.

1

From the Frontend environments view, you should be able to click the domain to view the live website hosted by the Amplify Console. The domain URL should look something like this:

 https://env_name.deployment_id.amplifyapp.com 
Enter fullscreen mode Exit fullscreen mode

When you make an update and need to deploy a new version, you can
run the publish command again to deploy the updated version of
the app.

Git-Based Deployments

Now let’s look at how you can enable Git-based deployments using an Amplify app stored in a GitHub repository.

While deploying from your local project works well, many times you will be working from a Git repository either alone or with a team. The Amplify Console supports Git-based hosting for your applications, along with built-in features automatic deployments on merges and feature branch deployments (branch deployments linked to each feature branch).

Let’s look at how to take the app we have already built and deploy it
to the Amplify Console from a GitHub repository.

The first step is to remove the existing amplify backend that we have
set up:

 ~ amplify delete

Enter fullscreen mode Exit fullscreen mode

Then, create a new Amplify app and add authentication:

 ~ amplify init

 # Follow the steps to give the project a name, environment
 name, and set the
 default text editor.
 # Accept defaults for everything else and choose your AWS
 Profile.

 ~ amplify add auth
 ? Do you want to use the default authentication and security
 configuration?
 Default configuration
 ? How do you want users to be able to sign in? Username
 ? Do you want to configure advanced settings? No, I am done.
Enter fullscreen mode Exit fullscreen mode

Now, deploy the backend using the Amplify push command:

  ~ amplify push
Enter fullscreen mode Exit fullscreen mode

We now need to create a GitHub repository to hold the app.

Creating the GitHub Repository

The next thing you will need to do is go to GitHub.com and create a
new repository. I’ll create a new repo called my-react-app.

1

Once you’ve created the repo, you will be given a repo URI that
looks like:

git@github.com:dabit3/my-react-app.git
Enter fullscreen mode Exit fullscreen mode

2

Copy this repo URI and return to the command line. From here, we
will initialize a new GitHub project in our local app:

~ git init
~ git remote add origin git@github.com:your_github_username/my-react-app.git
Enter fullscreen mode Exit fullscreen mode

We’ll then add the files to be tracked and push the changes to our
repo:

~ git add .
~ git commit -m 'initial commit'
~ git push origin master

Enter fullscreen mode Exit fullscreen mode

Now that the app has been pushed to GitHub, we can connect to
Amplify Console hosting. To do so, let’s add it via the CLI:

  ~ amplify add hosting
  ? Select the plugin module to execute: Hosting with Amplify Console
  ? Choose a type: Continuous deployment (Git-based
deployments)
Enter fullscreen mode Exit fullscreen mode
  1. As your first step (in the Amplify Console), choose GitHub as the source code provider and then click Connect branch.

  2. Next, sign in with GitHub, then choose the new repo you just created and the master branch. Click Next.

  3. In the Configure build settings page, when asked to “select a backend environment,” choose the environment name you already have created.

  4. Next, in the Configure build settings page, when asked to “select an existing service role or create a new one so Amplify Console may access your resources,” click Create new role to create a new IAM role:
    a. Click Next: Permissions, Next: Tags, Next: Review, and then Create Role to create a new IAM role.
    b. Go back to the Configure build settings page, click the refresh button, and select the newly created role from the dropdown.

  5. Click Next.

  6. In the Review page, click Save and deploy to deploy the app.

The app has now been deployed to the Amplify Console and a new build will begin. When the build finishes, you should be given a live URL to view your app

Git-Based CI/CD

Now that the app has been deployed, let’s look at how to implement CD into the app.

The basic idea with Git-based CI and CD is that you can deploy and test builds to any branch by pushing directly to Git. Once the changes are merged, a new build is kicked off and a live URL is given to you to try out.

In this way, you can have feature/branch deployments, like prod (for
production), dev (for development), and feature_name (for new
features). When building in this way, you are able to test out new
changes in a live environment, testing out not only the frontend but
also the backend changes.

Let’s try kicking off a new build. To do so, make a change to one of
the local files. Update src/App.js with some updated text, then add the
changes and push to GitHub:

~ git add .
~ git commit -m 'updates to App.js'
~ git push origin master
Enter fullscreen mode Exit fullscreen mode

Now, when you open your app in the Amplify Console, you should
notice a new build has been kicked off automatically for you.

Access Control

Next, let’s look at how to enable access control to password protect
our deployment.

Using access control, you can specify that a visitor must have a
username and password to view either a deployment or a specific
branch deployment. This is especially useful if you are testing out
new private features that you wish to keep undiscoverable by anyone
outside your team.

Here’s how to enable access controls:

  1. In the lefthand menu, click Access Control.

  2. Next, click Manage Access.

  3. Here, for the master branch, set the Access setting to Restricted, then set a username and password.

Now, open the URL for the deployment. You will notice that you will be unable to view it without entering the username and password.

In the Access Control menu, you can also choose to set access control on a branch-by-branch basis.

Custom Domains

Finally, let’s learn how to use a custom domain name for our app.

To enable a custom domain, we need to do three things:

Add the domain in Amazon Route53.

Set the nameservers in the DNS settings of the domain provider for the domain you are using.

Configure the Amplify Console app to use the domain added in Route 53.

Let’s walk through how to do this:

  1. In the Services dropdown menu in the main AWS dashboard,
    search for or click Route53.

  2. Click Hosted Zones.

  3. Click Create Hosted Zone.

  4. Set the domain name by adding the URL to the Domain
    name input field, then click Create.After creating the Hosted Zone, you will be given four nameserver
    values. You will need those values in the next step, so keep them
    handy. You can also navigate back to them at any time by visiting the
    Route53 dashboard and clicking on the domain you would like to
    retrieve the values for. The nameservers will look something like this:

 ns-1020.awsdns-63.net
 ns-1523.awsdns-62.org
 ns-244.awsdns-30.com
 ns-1724.awsdns-23.co.uk
Enter fullscreen mode Exit fullscreen mode
  1. Now, go into your hosting account (e.g., GoDaddy or Google
    Domains), and set these custom nameservers in your DNS
    setting for the domain you’re using.

  2. Next, back in the Amplify Console for the app for which you
    would like to enable a custom domain, click Domain
    Management in the left menu, then click the Add Domain
    button.

  3. Here, the drop-down menu should show you the domain you
    have in Route53. Choose this domain and click Configure
    domain.
    This should deploy the app to your custom domain (it will take 5–30
    minutes for the DNS to propagate).

Conclusion

1.The Amplify Console hosts both backend and as well as frontend deployments.

2.There are two main ways to deploy the frontend to the Amplify Console, from your local project or from a Git repository. You can also upload projects manually or host them from Dropbox.

3.Once your app is hosted, you can then set up things like password protection, custom domains, and branch deployments by configuring your deployment in the Amplify Console.

References:

Notes from Book: Full Stack Serverless: Modern Application Development with React, AWS, and GraphQL
By: Nader Dabit
Part 1 : https://dev.to/salah856/modern-full-stack-serverless-part-i-34cb

Part 2 : https://dev.to/aws-builders/modern-full-stack-serverless-part-ii-94i

Part 3 : https://dev.to/aws-builders/modern-full-stack-serverless-part-iii-ha

Part 4 : https://dev.to/aws-builders/modern-full-stack-serverless-part-iv-54bl

Part 5: https://dev.to/aws-builders/modern-full-stack-serverless-part-v-35j6

Part 6: https://dev.to/aws-builders/modern-full-stack-serverless-part-vi-25e3

Part 7: https://dev.to/aws-builders/modern-full-stack-serverless-part-vii-351l

Discussion (0)

Forem Open with the Forem app