aws-samples/react-ssr-lambda

Demo of server side rendering for React application on AWS Lambda

Sample to deploy React SSR on Lambda

This repository consists of a sample to demonstrate two variants to do Server Side Rendering with AWS Lambda for React applications. It usues AWS CDK to make the deployment.

This solution can only be provisioned in the us-east-1 Region as it deploys Lambda@Edge, which can only be done in that Region.

Requirements

• Node.js 12.x
• AWS CDK 1.72+
• Configured aws credentials
• This example will only be deployed successfuly in us-east-1 region as it is using AWS Lambda@Edge

Folder structure

• /cdk - code to deploy the solution
• /simple-ssr - React application created with the create-react-app tool.

Deployment

• Clone git repository

  git clone https://github.com/aws-samples/react-ssr-lambda.git

• Run the following commands in your terminal window, provide the name of the S3 bucket instead of <your bucket name>, for example mybucket, to deploy the static content

  cd react-ssr-lambda

  cd ./cdk

  npm install

  npm run build

  cdk bootstrap

  cdk deploy SSRApiStack --outputs-file ../simple-ssr/src/config.json

  cd ../simple-ssr

  npm install

  npm run build-all

  cd ../cdk

  cdk deploy SSRAppStack --parameters mySiteBucketName=<your bucket name>

• After successful deployment you will see output variables

  CF URL - for React App stored on S3 and rendered on client

  Lambda SSR URL - for React App rendered by Lambda behind API Gateway

  Lambda@Edge SSR URL - for React App rendered by Lambda@Edge

• To clean-up the reated resources run

  cd ./cdk

  cdk destroy SSRApiStack

  cdk destroy SSRAppStack

react-ssr-lambda's Issues

problem when deploying edge lamda function

Hi
I got this error message when executing last command to delpoy example "cdk deploy SSRAppStack --parameters mySiteBucketName=demo-appssr.jlrrocc.net"
it seems something is no more supported in the script to create the lamba
perhaps CDK version is not updated ?

15:57:08 | CREATE_FAILED | AWS::Lambda::Function | CustomCDKBucketDep...CC9EB8756C81C01536
Resource handler returned message: "The runtime parameter of python3.6 is no longer supported for creating or updating AWS Lambda functions. We recommend you
use the new runtime (python3.9) while creating or updating functions. (Service: Lambda, Status Code: 400, Request ID: 0f0508e4-0922-446a-8535-26bc2924cb68)" (
RequestToken: eafa215b-5a68-4682-31e0-027450395044, HandlerErrorCode: InvalidRequest)

    new Function (/home/jlrocc/Documents/react-ssr-lambda/cdk/node_modules/@aws-cdk/aws-lambda/lib/function.ts:369:35)
    \_ SingletonFunction.ensureLambda (/home/jlrocc/Documents/react-ssr-lambda/cdk/node_modules/@aws-cdk/aws-lambda/lib/singleton-lambda.ts:93:12)
    \_ new SingletonFunction (/home/jlrocc/Documents/react-ssr-lambda/cdk/node_modules/@aws-cdk/aws-lambda/lib/singleton-lambda.ts:32:32)
    \_ new BucketDeployment (/home/jlrocc/Documents/react-ssr-lambda/cdk/node_modules/@aws-cdk/aws-s3-deployment/lib/bucket-deployment.ts:87:21)
    \_ new SsrStack (/home/jlrocc/Documents/react-ssr-lambda/cdk/lib/srr-stack.ts:37:5)
    \_ Object.<anonymous> (/home/jlrocc/Documents/react-ssr-lambda/cdk/bin/cdk.ts:13:1)
    \_ Module._compile (node:internal/modules/cjs/loader:1105:14)
    \_ Module.m._compile (/home/jlrocc/Documents/react-ssr-lambda/cdk/node_modules/ts-node/src/index.ts:858:23)
    \_ Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    \_ Object.require.extensions.<computed> [as .ts] (/home/jlrocc/Documents/react-ssr-lambda/cdk/node_modules/ts-node/src/index.ts:861:12)
    \_ Module.load (node:internal/modules/cjs/loader:981:32)
    \_ Function.Module._load (node:internal/modules/cjs/loader:822:12)
    \_ Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
    \_ main (/home/jlrocc/Documents/react-ssr-lambda/cdk/node_modules/ts-node/src/bin.ts:227:14)
    \_ Object.<anonymous> (/home/jlrocc/Documents/react-ssr-lambda/cdk/node_modules/ts-node/src/bin.ts:513:3)
    \_ Module._compile (node:internal/modules/cjs/loader:1105:14)
    \_ Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    \_ Module.load (node:internal/modules/cjs/loader:981:32)
    \_ Function.Module._load (node:internal/modules/cjs/loader:822:12)
    \_ Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)

❌ SSRAppStack failed: Error: The stack named SSRAppStack failed creation, it may need to be manually deleted from the AWS console: ROLLBACK_FAILED (The following resource(s) failed to delete: [ssrEdgeHandler443FC458]. ): Resource handler returned message: "The runtime parameter of python3.6 is no longer supported for creating or updating AWS Lambda functions. We recommend you use the new runtime (python3.9) while creating or updating functions. (Service: Lambda, Status Code: 400, Request ID: 0f0508e4-0922-446a-8535-26bc2924cb68)" (RequestToken: eafa215b-5a68-4682-31e0-027450395044, HandlerErrorCode: InvalidRequest), Resource handler returned message: "Lambda was unable to delete arn:aws:lambda:us-east-1:206324621659:function:SSRAppStack-ssrEdgeHandler443FC458-doKJa3827w3e:1 because it is a replicated function. Please see our documentation for Deleting Lambda@Edge Functions and Replicas. (Service: Lambda, Status Code: 400, Request ID: fc3c3d0b-66ff-480e-b68e-a12cdfcdabdb)" (RequestToken: 85513bea-7632-8772-5ce0-b26471ba8ffd, HandlerErrorCode: InvalidRequest)
at prepareAndExecuteChangeSet (/usr/lib/node_modules/aws-cdk/lib/api/deploy-stack.ts:386:13)
at runMicrotasks ()
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at CdkToolkit.deploy (/usr/lib/node_modules/aws-cdk/lib/cdk-toolkit.ts:219:24)
at initCommandLine (/usr/lib/node_modules/aws-cdk/lib/cli.ts:347:12)

NOTICES

19836 AWS CDK v1 has entered maintenance mode

    Overview: AWS CDK v1 has entered maintenance mode on June 1, 2022.
              Migrate to AWS CDK v2 to continue to get the latest features
              and fixes!

    Affected versions: framework: 1.*, cli: 1.*

    More information at: https://github.com/aws/aws-cdk/issues/19836

If you don’t want to see a notice anymore, use "cdk acknowledge ". For example, "cdk acknowledge 19836".
The stack named SSRAppStack failed creation, it may need to be manually deleted from the AWS console: ROLLBACK_FAILED (The following resource(s) failed to delete: [ssrEdgeHandler443FC458]. ): Resource handler returned message: "The runtime parameter of python3.6 is no longer supported for creating or updating AWS Lambda functions. We recommend you use the new runtime (python3.9) while creating or updating functions. (Service: Lambda, Status Code: 400, Request ID: 0f0508e4-0922-446a-8535-26bc2924cb68)" (RequestToken: eafa215b-5a68-4682-31e0-027450395044, HandlerErrorCode: InvalidRequest), Resource handler returned message: "Lambda was unable to delete arn:aws:lambda:us-east-1:206324621659:function:SSRAppStack-ssrEdgeHandler443FC458-doKJa3827w3e:1 because it is a replicated function. Please see our documentation for Deleting Lambda@Edge Functions and Replicas. (Service: Lambda, Status Code: 400, Request ID: fc3c3d0b-66ff-480e-b68e-a12cdfcdabdb)" (RequestToken: 85513bea-7632-8772-5ce0-b26471ba8ffd, HandlerErrorCode: InvalidRequest)

Cannot find asset issue during cdk bootstrap

Hello team!

Encountering the below error during the cdk bootstrap step. Not sure if this is a new issue. Help appreciated. Thanks

cd react-ssr-lambda
cd ./cdk
npm install
npm run build
cdk bootstrap - failed here

Error: Cannot find asset at /home/gss/myprojects/react-ssr-lambda/simple-ssr/build
at new AssetStaging (/home/gss/myprojects/react-ssr-lambda/cdk/node_modules/aws-cdk-lib/core/lib/asset-staging.js:1:1402)
at new Asset (/home/gss/myprojects/react-ssr-lambda/cdk/node_modules/aws-cdk-lib/aws-s3-assets/lib/asset.js:1:736)
at Object.bind (/home/gss/myprojects/react-ssr-lambda/cdk/node_modules/aws-cdk-lib/aws-s3-deployment/lib/source.js:1:1185)
at /home/gss/myprojects/react-ssr-lambda/cdk/node_modules/aws-cdk-lib/aws-s3-deployment/lib/bucket-deployment.js:1:3013
at Array.map ()
at new BucketDeployment (/home/gss/myprojects/react-ssr-lambda/cdk/node_modules/aws-cdk-lib/aws-s3-deployment/lib/bucket-deployment.js:1:2994)
at new SsrStack (/home/gss/myprojects/react-ssr-lambda/cdk/lib/srr-stack.ts:44:5)
at Object. (/home/gss/myprojects/react-ssr-lambda/cdk/bin/cdk.ts:13:1)
at Module._compile (node:internal/modules/cjs/loader:1376:14)
at Module.m._compile (/home/gss/myprojects/react-ssr-lambda/cdk/node_modules/ts-node/src/index.ts:1618:23)

Data is loaded again (unnecessarily) after hydration

Hey,

I'm running a working implementation of a solution based on this stack. However I've now run into a slight issue that the static result hydrated by React is loading the same information again.

react-ssr-lambda/simple-ssr/src/App.js

Line 9 in 8c57f9d

const App = ({ isSSR, ssrData }) => {

In the props there is isSSR and ssrData, but I'm not finding references that it those are used from anywhere. I'm aware that this might not be an issue related strictly to this sample but would be interested in how and if you've solved this somehow.

bash: cdk: command not found

Hi,

I tried to run this tutorial but at step 2, the command cdk is not working.
The error is bash: cdk: command not found

I run the app in a windows docker container based on image "amazonlinux".
I already installed git with comand yum install git, and also nodejs 14 with tutorial at this page: https://linuxize.com/post/how-to-install-node-js-on-centos-7/

Any help is greatly appreciated.

Best regards,
Claudiu

How do you add styles to this implementation?

In the webpack config, css-loader is used, but I haven't been able to actually get styles into the browser. Ideally, CSS modules, but I haven't even gotten a CSS file to the browser without importing it into the head as a string.

Module not found: Can't resolve './config.json'

when i run the npm start inside the simple-ssr
Module not found: Can't resolve './config.json'

npm run build fails because of babel-loader versio mismatch

When I try to run the build, create-react-app complains about babel-loader version

The react-scripts package provided by Create React App requires a dependency:

  "babel-loader": "8.1.0"

Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-loader was detected higher up in the tree:

  /Users/anhnguyen/react-ssr-lambda/simple-ssr/node_modules/babel-loader (version: 8.2.2) 

I think in package.json, the version of babel-loader needs to be fixed to 8.1.0

The source code for lambda functions is not present in simple-ssr/edge-build folder

The lambda code referenced in the cdk part doesn't exist in respective folders

Outdated python runtime is used in this repository

Same as #40

Tried a bunch of solutions. Looks like the runtime is bundled with cdk itself so having problem changing that.

home path and edgessr both got ERROR: The request could not be satisfied

when accessing the following 2
https://.......cloudfront.net
https://.......cloudfront.net/edgessr
I got the error below.
got any idea where is the issue located possibly?

The other paths all work as expected.

<HTML><HEAD><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<TITLE>ERROR: The request could not be satisfied</TITLE>
</HEAD><BODY>
<H1>502 ERROR</H1>
<H2>The request could not be satisfied.</H2>
<HR noshade size="1px">
The Lambda function returned invalid JSON: The JSON output must be an object type.
We can't connect to the server for this app or website at this time. There might be too much traffic or a configuration error. Try again later, or contact the app or website owner.
<BR clear="all">
If you provide content to customers through CloudFront, you can find steps to troubleshoot and help prevent this error by reviewing the CloudFront documentation.
<BR clear="all">
<HR noshade size="1px">
<PRE>