|
| 1 | +# react-apig-lambda |
| 2 | + |
| 3 | +> Render React.js on-demand with CDN caching. |
| 4 | +
|
| 5 | +> Minimal example on how to render React & React Router v4 with Amazon API Gateway, AWS Lambda and CloudFront. |
| 6 | +
|
| 7 | +## Online demo |
| 8 | +[https://test.es6.fi](https://test.es6.fi) |
| 9 | + |
| 10 | +Basic example app from [React Router documentation](https://react-router.now.sh/basic). Initial server-side render and acts as SPA from there. |
| 11 | + |
| 12 | +## Dependencies |
| 13 | + |
| 14 | +* [AWS CLI](https://aws.amazon.com/cli/) for S3 deployment |
| 15 | +* [Apex](https://github.com/apex/apex) for Lambda deployment |
| 16 | + |
| 17 | +## Deploying to AWS |
| 18 | + |
| 19 | +1) Edit `project.json` and set proper lamdba execution `role`. |
| 20 | + |
| 21 | +2) Replace `s3://test.es6.fi/assets/` in `package.json` with your S3 bucket, e.g. `s3://your-bucket/assets/`. |
| 22 | + |
| 23 | +3) `npm run build` to build front-end code |
| 24 | + |
| 25 | +4) `npm run deploy` to deploy lambda and upload front build to S3 |
| 26 | + |
| 27 | +## Setting up API Gateway |
| 28 | + |
| 29 | +1) In API Gateway home, click `Create API` |
| 30 | + |
| 31 | +2) Choose `New API` and enter some `API name`, click `Create API`. |
| 32 | + |
| 33 | +2) Choose `Actions -> Create resource` |
| 34 | + |
| 35 | +3) Check `Configure as proxy resource` and click `Create resource` |
| 36 | + |
| 37 | +4) In `/{proxy+} - ANY - Setup`, choose `Integration type` as `Lambda Function Proxy`, select your lambda's AWS region and enter name of your uploaded lambda function (`react-apig-lambda_render-react` if you didn't change name in `project.json`). Click `Save`. |
| 38 | + |
| 39 | +5) Choose `Actions -> Deploy API`, set `Deployment stage` as `[New Stage]`, enter stage name and click `Deploy` |
| 40 | + |
| 41 | +6) Now you should be able to invoke the lambda renderer by navigating to `https://your-invoke-url/your-stage-name/index` |
| 42 | + |
| 43 | +## Setting up CloudFront |
| 44 | + |
| 45 | +1) Create distribution, paste your API Gateway url as `Origin domain name`, e.g. `https://your-invoke-url/your-stage-name/index`. Make sure to include `/index`. |
| 46 | + |
| 47 | +2) Set your custom domain in `Alternate Domain Names |
| 48 | +(CNAMEs)` |
| 49 | + |
| 50 | +3) You can leave other settings as they are if you don't want to customize anything, click `Create distribution`. |
| 51 | + |
| 52 | +4) Go to your distribution, navigate to `Origins`, click `Create origin` |
| 53 | + |
| 54 | +5) Choose your S3 bucket (you should create it now if you haven't already. Make sure there's `assets` directory). Click `Create`. |
| 55 | + |
| 56 | +6) Go to your distribution, navigate to `Behaviors`, click `Create Behavior`. |
| 57 | + |
| 58 | +7) Set `Path Pattern` as `assets/*`, choose your S3 origin and click `Create`. |
| 59 | + |
| 60 | +8) In your domain's DNS management interface, point your domain's `CNAME` to your CloudFront distribution. |
0 commit comments