Skip to content

Latest commit

 

History

History
288 lines (221 loc) · 7.2 KB

aws.mdx

File metadata and controls

288 lines (221 loc) · 7.2 KB
title category order
AWS
Deploy
2

import Link from "../../../../components/Link.jsx";

AWS

To deploy to AWS, use the @lazarv/react-server-adapter-aws package. This adapter is specifically designed to support the AWS cloud infrastructure and different tookits (AWS CDK, sst, serverless framework).

### Installation

Add the @lazarv/react-server-adapter-aws package to your project:

pnpm add -D @lazarv/react-server-adapter-aws

Add this to .gitignore: .aws-react-server

Then you need to add the adapter to your react-server.config.mjs file:

export default {
  adapter: '@lazarv/react-server-adapter-aws',
};

Streaming can be activated by setting the property streaming: true:

export default {
adapter: [ '@lazarv/react-server-adapter-aws', {streaming: true} ]
};

Note: check if your deployment toolkit (e.g. AWS CDK) supports streaming!

AWS deployment toolkits:

Each toolkit can optional support additional configuration properties:

export default {
  adapter: [ '@lazarv/react-server-adapter-aws', {streaming: true,
    "toolkitDefault":"cdk",
    "toolkit":{
      "cdk": {
        "stackName":"myStack"
      },
      "sst": {}
    }
  }]
};

When multiple configuration exist the property "toolkitDefault" : "cdk", is required!

## [SST V3 (ion)](https://sst.dev)

Architecture

  • AWS Cloudfront - globals CDN and reverse proxy for the framework and the static assets
    • path _server/ origin Lambda - no caching
    • path assets/ and client/ are created by the framework, contain your assets and client code with a cache breaker filename - origin S3
    • path any other root directory copied from public folder or created as a result of static pages - origin S3 (CloudFront defaults to max. 10 behaviors which allow 8 additional root directories!)
    • any url not catched above - origin Lambda - no caching
  • AWS Lambda URL Function - provides the react-server framework
  • AWS S3 - static assets
  • Resources from S3 have a cache-control: public,max-age=0,s-maxage=86400,stale-while-revalidate=86400 header

Note: Currently only deployment is supported, dev mode is not implemented.

### Installation
  1. First you need to initialize your project with sst. You can do this by running the following command:
pnpm add sst
pnpm sst init
>  JS project detected. This will...
   - use the JS template
   - create an sst.config.ts

? Continue:

Answers: Yes

? Where do you want to deploy your app? You can change this later:

Answers: aws

  1. Create the sst-react-server.ts sst stack to your project and add the stack to sst.config.ts:
pnpm build

Optional manual sst.config.ts setup:

  1. add import { ReactServer } from "./sst-react-server";
  2. replace async run() {},with:
async run() {
    new sst.aws.ReactServer("ReactServertackDemoApp");
  },
## Configuration

All possible configuration options are documented here: ./sst-react-server.ts

### Deploy

You can build and deploy your application to AWS using the following command:

pnpm sst deploy

Error: TypeError: aws_exports.ReactServer is not a constructor

run pnpm build again to fix missing ReactServer stack to sst.

remove stack:

pnpm sst remove
## [AWS CDK](https://docs.aws.amazon.com/cdk/v2/guide/getting_started.html)

Note: Streaming is not supported.

Architecture

  • AWS Cloudfront - globals CDN and reverse proxy for the framework and the static assets
  • AWS API Gateway - used by AWS Lambda function
  • AWS Lambda Function - provides the react-server framework
  • AWS S3 Bucket - browser client code and static assets with cache breakers
  • AWS S3 Bucket - static assets from public folder and static pages

Bei default, all static routes to existing files are uploaded to a Cloudfront KV store and used to directly redirect requests to static items on edge to the s3 bucket. As there is a 5MB Limit on the KV store size and only 512Byte for the keys (max. length of url) you can use the property staticRoutes to define a list of root directories which are directly handled by cloudfront without the need a lookup in the KV store.

### Installation

First you need to install this packages:

pnpm add aws-cdk-lib constructs source-map-support
pnpm add -D aws-cdk tsx

add to .gitignore:

cdk.out

Third, add the ReactServer() cdk stack cdk/lib/react-server-stack.ts:

touch cdk.json
pnpm build

Note: will only add a sample configuration when cdk.json is empty.

Optional properties of the stack react-server.config:

{
"adapter": [
    "@lazarv/react-server-adapter-aws",
    {
      "streaming": false,
      "toolkit": {"cdk":{
        "stackName": "ReactStackStack-001", 
        "cdkFolderPath": "cdk", // default: './cdk'
        "stackProps": {
          "description": "Hello World Stack"
          "domainName": "example.com",
          "subDomain": "www",
          "certificate": "arn:aws:acm:us-east-1:123456789012:certificate/12345678-1234-1234-1234-123456789012" //or a certificatemanager.ICertificate
          "hostedZone": route53.HostedZone.fromLookup(stack, "MyHostedZone", { domainName: "example.com" })
          "staticRoutes": ["/assets/","/client/"], // (optional) this catch all routes are created as caching behaviors on cloudfront and point to the static assets on S3. Alle Routes need to start with a "/"! 
          "maxBehaviors": 10, // (optional) defaults to the AWS limit for Cloudfront behaviors
          env: {
            account: '123456789012',
            region: 'us-east-1'
          },
        }
      }}
    }
  ]
}
### Deploy

Build the project and deploy with the command from the cdk toolkit.

pnpm build
pnpm cdk deploy --all

remove stack:

pnpm cdk destroy --all
## Serverless Framework V3

Note: Streaming is not supported and there are no plans to support Version 4.x.

Architecture

  • AWS Cloudfront - globals CDN and reverse proxy for the framework and the static assets
  • AWS API Gateway - used by AWS Lambda function
  • AWS Lambda Function - provides the react-server framework
  • AWS S3 - static assets

add the following packages:

pnpm add -D serverless@3 serverless-cloudfront-invalidate serverless-s3-sync

add to .gitignore:

.serverless

run this commands to create a sample configuration:

touch serverless.yml
pnpm build

Note: will only add a sample configuration when serverless.yml is empty.

### Deploy

Build the project and deploy with the command from the sls toolkit.

pnpm build
pnpm sls deploy

get FrontendCloudFrontDistributionUrl: pnpm sls info --verbose

Configuration of the stack is possible in serverless.yml.

remove stack:

pnpm sls remove