Application Deployment on AWS
Amazon Web Services (opens in a new tab) or (AWS) is a subsidiary of Amazon providing on-demand cloud computing platforms and APIs to individuals, companies, and governments on a metered pay-as-you-go basis. AWS was launched in 2006, and over the years, it has grown to become the leading cloud service provider in the world.
For deploying the ROQ-generated application in AWS, several options are available due to the vast range of cloud computing products offered by AWS. We need two types of services for our generated application:
Hosting: The application can be deployed using Amazon EC2, Amazon Elastic Beanstalk, or AWS Amplify. Each AWS product has a different workflow for deployment. We will use AWS Amplify to ensure simplicity and faster deployment.
Database: ROQ's generated application default database is PostgreSQL. In AWS, we can use Amazon RDS to create the PostgreSQL database.
We will deploy the ROQ generated application in AWS Amplify after creating the database on Amazon RDS.
Amazon Relational Database Service (opens in a new tab) (Amazon RDS) is a cloud-based database service provided by Amazon Web Services (AWS). It is designed to make it easier for developers to set up, operate, and scale relational databases in the cloud. Amazon RDS supports several popular relational database engines: MySQL, PostgreSQL, MariaDB, Oracle, Microsoft SQL Server, and Amazon Aurora.
By default, ROQ-generated applications use PostgreSQL as the database. We can create and setup the database using Amazon RDS.
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:
- 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.
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.
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:
|password||Get your saved password or modify the existing password|
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:
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:
To develop a generated application locally and want to use a database other than the ROQ provided, you can read this database installation documentation.
AWS Amplify (opens in a new tab) is a service from Amazon Web Services (AWS) that enables developers to build and deploy scalable and secure cloud-powered web and mobile applications. Amplify aims to simplify the process of building apps by providing a managed backend for handling authentication, storage, APIs, and other cloud functionalities. Amplify provides two services: Amplify Hosting and Amplify Studio.
To learn more about AWS Amplify, we recommend reading their official documentation (opens in a new tab).
Amplify Hosting is a fully managed hosting service for web apps. We will use this service to connect a repository, build, deploy, and host the web application.
To include the generated application code in your own GitHub repository, please follow our tutorial on application development.
In this tutorial, we will use the GitHub repository. There are a few steps that need to be taken care of:
Amplify Hosting provides clear steps to get started on web hosting using GitHub. Choose GitHub as the source for the generated application.
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.
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.
First time build will fail because we still need to setup the environment variables.
From the build information, we can get the Domain or the Base URL for our deployed application:
Read this documentation section first on how to get the environment variables from ROQ Console.
In AWS Amplify, navigate to App settings, select Environment variables, and manually enter variables from ROQ Console or the
And also, add the
DATABASE_URL from our previous setup:
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 | grep -e NEXT_PUBLIC_ROQ_CLIENT_ID -e NEXT_PUBLIC_ROQ_PLATFORM_URL -e NEXT_PUBLIC_BASE_URL >> .env
Amplify Hosting supports adding environment variables to your application's builds by setting them in the project's configuration in the Amplify console. However, a Next.js server component cannot access those environment variables by default. For more information, please read it here (opens in a new tab).
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.
To test the application, open the browser and go to the URL:
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.
The ROQ-generated application will work as expected if we configure the right environment settings. We must create a new environment on ROQ Console (opens in a new tab).
Select the desired application from the ROQ Console and add a new environment, or navigate to the ROQ Console Environment (opens in a new tab) for the active application.
We can call the new environment anything, for example, Amazon AWS. Later, we need to configure the base URL for the deployed application.
We already have information for the Base URL from our Amplify Hosting build. In the ROQ Console, go to the Application Details → Settings to configure the environment variables.
We need to setup the Base URL and all the Authentication URLs.
|Allowed Logout URLs|
|Allowed Callback URLs|
Click the Copy Env File button to copy the environment variables and save them in a
.env file in the application project root.
Please check the compute logs if the deployed application is not running as expected, such as an
Internal Server Error. To read the logs on AWS Amplify, go to the App settings, then select Monitoring, and finally select Hosting compute logs.
And please look into our FAQ documentation section for other troubleshooting.