ChatGPT-Next-Web Starter Template

Built off the Next.js Starter Template, this template allows you to run the popular ChatGPT-Next-Web on AWS. ChatGPT-Next-Web is a Next.js based web application that allows you to run your own ChatGPT interface on your own domain.

This tutorial covers what is required to deploy a real world application to AWS, including configuring a CI/CD pipeline with Github Actions to automatically deploy updates to the project.

Resources

The template uses the Open Next (https://open-next.js.org/) project, which generates the static assets and required Lambda function code.

It consists of the following resources:

CloudFront Distribution

• 12 predefined behaviours mapping paths to Lambda functions and S3 buckets
  Read more about how Open Next and CloudFront behaviours work with your assets
• A Cloudfront Function to inject the x-forwarded-host header

Lambda Functions

• Server function: Does the core rendering of the site. When your Next.js site requires custom Environment variables to run you would add them to this Lambda Function
• Image Optimization Function: Renders optimised images for delivery, using the React Image component

S3 Bucket

• Cache Bucket: Used to cache rendered pages to avoid re-rendering when possible
• Assets Bucket: Holds all your static assets

Pre-Requisites

Once off steps needed to enable you to run CDK scripts to deploy infrastructure in your AWS account.

• An active GitHub account
• An active AWS Account - Creating a standalone AWS account
• AWS CLI installed and configured - Get started with the AWS CLI - AWS Command Line Interface
• An AWS Account and Region bootstrapped with the CDK - Bootstrapping - AWS Cloud Development Kit (AWS CDK) v2

Getting Started

1. Fork ChatGPT-Next-Web:

Go to https://github.com/Yidadaa/ChatGPT-Next-Web/fork to fork the repository to create your own copy.

2. Clone repository locally

git clone https://github.com/<your-github-account>/ChatGPT-Next-Web.git 

3. Install Open Next:

cd ChatGPT-Next-Web
npm install -D open-next

4. Run Open Next to generate your function code

npx open-next build

5. Update your .gitignore file in the generated repository to ignore the .open-next directory

# add the line below to your .gitignore
.open-next

6. Head to Akeero to generate a project from the Next.js template (Templates > NextJs Template)

7. You should now be in the Diagram to Code canvas. First up let’s edit the project name

8. We now need to update the environment variable called CODE in server Lambda function with whatever secret code you want to use to access the live site.

9. Save the project locally, selecting the root folder of your web app.

10. Go back to the terminal and install the relevant CDK and Akeero dependencies

cd akeero-cdk
npm install

If you have not bootstrapped CDK for the first time in your AWS account and AWS region, run the following. You only need to bootstrap an account and region once for CDK to work.

npx cdk bootstrap aws://ACCOUNT-NUMBER-1/REGION-1

11. Run CDK Deploy

npx cdk deploy

This command will deploy your site!

Once deployed you should get the CloudFront domain of your distribution as an output for the command! At this point you have a live running site.

12. Add OpenAI API Key

For the project to work you need to add your OpenAI API Key in the web interface.

Updating your project

In the previous steps we forked the ChatGPT-Next-Web app, used Open Next to build, then used a base template in Akeero to define the AWS infrastructure required to host it. Now lets update the infrastructure to meet the needs of your application.

Let’s head back to Akeero to add a domain name.

Adding a custom domain

Adding a custom domain name is as simple as editing the CloudFront distribution to include a root domain name and a sub domain.

Once you've added the domain name, and saved the update locally you need to make one change to the CDK app entry file located in akeero-cdk/bin.

You need to edit the TypeScript file in that directory to include the crossRegionReferences and env properties as per the example below.

import 'source-map-support/register';
import * as cdk from 'aws-cdk-lib';
import { TemplateStack } from '../lib/template-stack';

const app = new cdk.App();
new TemplateStack(app, 'TemplateStack', {
  env: { account: process.env.CDK_DEFAULT_ACCOUNT, region: process.env.CDK_DEFAULT_REGION },
  crossRegionReferences: true
  
  /* For more information, see https://docs.aws.amazon.com/cdk/latest/guide/environments.html */
});

These changes will issue an SSL certificate to the CloudFront distribution and create a DNS record in Route53 for the new deployed site to use.

Making changes live

With each of the examples above we’ve updated the infrastructure, but we haven’t pushed it live. To make those changes live, run the command below from your /akeero-cdk folder.

npx cdk deploy --all

You’ll notice we’ve added –all to the cdk deploy command. This is because we’ve add a custom domain, which requires an SSL certificate to be provisioned in its own stack. The –all tells CDK to deploy all stacks defined in the script.

Updating the App

When you make changes to your Next.js app, it’s as simple as re-running the Open Next build command in your project root, then re-deploying from the /akeero-cdk directory.

npx open-next build
cd akeero-cdk
npx cdk deploy --all

Continous Deployment

Now we want to setup GitHub Actions for continous deployment. The GitHub Action we're going to define will re-deploy your application everytime there is a push to the main branch.

Configure AWS credentials

Follow the steps in this post to configure AWS crednetials to be used by GitHub Actions to deploy your app to AWS.

Create Deployment Action

In your repository create a directory called .github/workflows and in that directory create a GitHub Actions defition file called deploy-cdk.yaml

Copy and paste the following code into deploy-cdk.yaml. This is the definition for your Github Action to deploy your website to AWS.

# deploy-cdk.yaml
name: AWS CDK Deployment

on:
  push:
    branches: [ main ]

env:
  AWS_ACCOUNT : "<example-aws-account-number>"
  AWS_REGION : "<example-aws-region>"
# permission can be added at job level or workflow level    
permissions:
      id-token: write   # This is required for requesting the JWT
      contents: read    # This is required for actions/checkout

jobs:
  DeployCDK:
    runs-on: ubuntu-latest
    steps:
      - name: Git clone the repository
        uses: actions/checkout@v3
      - name: Use Node.js 18
        uses: actions/setup-node@v3
          with:
            node-version: 18
            cache: 'npm'
      - name: Install app dependencies
        run: npm install
      - name: Build Open Next
        run: npx open-next build
      - name: Install CDK dependencies
        working-directory: akeero-cdk
        run: npm install
      - name: configure aws credentials
        uses: aws-actions/configure-aws-credentials@v2
        with:
          role-to-assume: arn:aws:iam::1234567890:role/example-role
          role-session-name: samplerolesession
          aws-region: ${{ env.AWS_REGION }}
      - name: Deploy to AWS
        working-directory: akeero-cdk
        run: npx cdk deploy --all

You will need to update the following sections of this GitHub Action with valid details.

• AWS_ACCOUNT and AWS_REGION in the env section

env:
  AWS_ACCOUNT : "<example-aws-account-number>"
  AWS_REGION : "<example-aws-region>"

• role-to-assume in the name: configure aws credentials task with the name of the AWS role you have created separately for the GitHub Action to use to run CDK. Must have required permissions for CDK to run.

- name: configure aws credentials
        uses: aws-actions/configure-aws-credentials@v2
        with:
          role-to-assume: arn:aws:iam::1234567890:role/example-role
          role-session-name: samplerolesession
          aws-region: ${{ env.AWS_REGION }}

This action will deploy ChatGPT-Next-Web on every push to the main branch.

Happy building!