Application Deployment on AWS

Create PostgreSQL

Go to AWS Console (opens in a new tab) for RDS, then click the Create database button. This will bring us to the database page:

This is a one-long page settings page, so we will only display what has changed while leaving the rest as its default. These are the settings that we modified for the purpose of this tutorial:

• Engine options: Choose the PostgreSQL database
• Templates: Free tier
• Settings → Db instance identifier: animefiguredb
• Settings → Master Password: Manual password entry (save it)
• Connectivity → Public access: Yes

After creating a database, it will appear in the list of databases in the region where it was created. For example, if the database was created in us-east-1c (N. Virginia), it will be listed under that region.

To access the database information, click on the name of the database as it is listed. For example, by clicking the animefiguredb DB identifier.

Database Information

The necessary details for establishing a database connection can be found under the Connectivity & Security and Configuration tabs. Specifically, we require the database URL, endpoint, and port number (the username and password have already been set up).

The security group rules also need to be configured to connect the PostgreSQL database from outside the Amazon Web Services network.

The CIDR/IP - Inbound type with the rule 0.0.0.0/0 allows any traffic from outside the AWS network. Turning off this rule or limiting it to specific IPs is recommended.

Connect to Database

The recommended way to connect to Amazon RDS is by using SSL/TLS connections. By default, our database uses a Certificate Authority (CA), which can be found in the Connectivity & security tab. To connect to the PostgreSQL database outside the network, we must download a certificate bundle. We can download certificate bundles for all AWS regions (opens in a new tab) or certificate bundles for specific AWS regions (opens in a new tab).

From our PostgreSQL setup earlier, we have our connection data:

Store the certificate bundle us-east-1-bundle.pem in the application project root directory. This certificate is only required if connecting to the database from outside the AWS network. We can use the psql CLI tool to test the database connection:

psql "postgresql://postgres:password@animefiguredb.carjebedzjdp.us-east-1.rds.amazonaws.com:5432/postgres?sslmode=require&sslrootcert=us-east-1-bundle.pem"

DATABASE_URL

ROQ's generated application needs the DATABASE_URL environment variable to work. Since we already know the connection information, we can form the database URI and set the environment variable:

DATABASE_URL=postgresql://postgres:password@animefiguredb.carjebedzjdp.us-east-1.rds.amazonaws.com:5432/postgres

Connect to GitHub

Amplify Hosting provides clear steps to get started on web hosting using GitHub. Choose GitHub as the source for the generated application.

Select Repository

To use a GitHub repository with Amplify Hosting, first install and authorize AWS Amplify.

We have the option to grant authorization for all repositories or to select a specific repository for better control. Private repository is also supported.

To add a repository, select the repository and the default branch to be deployed.

Build Settings

For our ROQ-generated application, we need the Base URL. Unfortunately, we are unable to determine the URL until the application has been deployed or moved to the build state.

From the build information, we can get the Domain or the Base URL for our deployed application:

https://main.d335zd9ekqhkcd.amplifyapp.com

Set Environment Variables

In AWS Amplify, navigate to App settings, select Environment variables, and manually enter variables from ROQ Console or the .env file.

And also, add the DATABASE_URL from our previous setup:

DATABASE_URL=postgresql://postgres:password@animefiguredb.carjebedzjdp.us-east-1.rds.amazonaws.com:5432/postgres

amplify.yaml

AWS Amplify has an application build specification that can be edited through App settings or overridden by the amplify.yaml file. The build specification YML file controls how an app build will run and is stored on the servers.

To edit the build specification in the AWS Amplify, go to App settings, select Build settings, and edit App build specification.

We can override the AWS Amplify setting above by creating a amplify.yaml file on the application project root directory:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm install
    build:
      commands:
        - env | grep -e NEXT_PUBLIC_ROQ_CLIENT_ID -e NEXT_PUBLIC_ROQ_PLATFORM_URL -e NEXT_PUBLIC_BASE_URL >> .env
        - env | grep -e ROQ_BASE_URL -e ROQ_PLATFORM_URL -e ROQ_ENVIRONMENT_ID -e ROQ_API_KEY >> .env
        - env | grep -e ROQ_SECRET -e ROQ_CLIENT_ID -e ROQ_CLIENT_SECRET -e ROQ_AUTH_CALLBACK_URL -e ROQ_AUTH_LOGIN_URL -e ROQ_AUTH_LOGOUT_URL -e ROQ_AUTH_URL -e DATABASE_URL >> .env
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Please note that environment variables that were previously entered manually are available only in build time. To make the environment variables available in runtime, we need to save the environment variables into a .env file.

env | grep -e NEXT_PUBLIC_ROQ_CLIENT_ID -e NEXT_PUBLIC_ROQ_PLATFORM_URL -e NEXT_PUBLIC_BASE_URL >> .env

Rebuild After Deployment

After the environment variables are setup, we can redeploy the application in Amplify Hosting. Click the application name. For example, anime-figure-store, this will bring us to the app homepage.

Click the branch main that will bring us to the branch build details.

And click the Redeploy this version button to build and redeploy.

Test Application

To test the application, open the browser and go to the URL:

https://main.d335zd9ekqhkcd.amplifyapp.com/

Initially, no users are registered. We can create an account in the application and manage it through the ROQ Console.

Whenever we make changes to the source code and push it to the GitHub repository, AWS Amplify Hosting will automatically build the latest version of the application. This way, we will always have access to the most up-to-date version of the application.