...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
| Warning |
|---|
This is out of date. See How To Add an MFE to a Sandbox for more current information |
This how-to describes how to serve your frontend app from an AWS S3 bucket and configure it to use an edX sandbox as it's backend. The instructions here assume that you already have a personal AWS account created with credentials configured for the AWS CLI.
...
- Create a new web distribution using AWS Cloudfront in the AWS console.
- Set Origin Domain Name to the hostname of the sandbox you created e.g. douglashall.sandbox.edx.org.
- Set Origin Protocol Policy to HTTPS Only.
- Set Viewer Protocol Policy to Redirect HTTP to HTTPS.
- Set Allowed HTTP Methods to GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE.
- Set Forward Cookies to All.
- Set Query String Forwarding and Caching to Forward all, cache based on all.
- Set Alternate Domain Names to the desired subdomain of your custom domain e.g. lms.edxdev.org where edxdev.org is the custom domain you registered.
- Set SSL Certificate to Custom SSL Certificate and select the certificate that you created above.
- Click Create Distribution and wait for it to be deployed (this may take awhile).
- Go to AWS Route 53 in the AWS console.
- Edit the Hosted Zone you created above.
- Create a new Record Set for the subdomain you wish to use for the Cloudfront distribution created above.
- Set name to the subdomain you used above in the Alternate Domain Names field e.g lms.exdev.org.
- Set Alias to Yes.
- Set Alias Target to the Cloudfront distribution created above.
- You will now be able to access your sandbox using the custom subdomain you specified e.g. lms.edxdev.org.
Create S3 Bucket
We will sync our built frontend app with an S3 bucket from which it will be served to end users.
- Create a new S3 bucket using the AWS console.
- The bucket name should match the subdomain you which to use to server your frontend app e.g. gradebook.goodtimes.org.
- You want to allow public access to the bucket, so uncheck all the options under "Public access settings for this bucket".
- Click Create Bucket.
- Edit the bucket properties.
- Set up Static Website Hosting.
- Enter index.html for both the Index document and Error document.
- Edit the bucket permissions.
- Create a bucket policy using the AWS Policy Generator.
- Choose S3 Bucket Policy from
- Set Principal to *.
- Select GetObject from Actions.
- Set Amazon Resource Name to your bucket's ARN with a /* at the end e.g. arn:aws:s3:::gradebook.edxdev.org/*
- Click Add Statement.
- Click Generate Policy.
- Copy and paste the generated policy to the bucket policy editor.
- Click Save.
- Create a bucket policy using the AWS Policy Generator.
Deploy Frontend App
Use the AWS CLI to sync your built frontend app to your new S3 bucket.
| Code Block |
|---|
$ aws s3 sync dist/ s3://gradebook.edxdev.org |
Create Cloudfront Distribution for S3 Bucket
We will create a Cloudfront distribution in order to server our frontend app from the S3 bucket over SSL.
- Create a new web distribution using AWS Cloudfront in the AWS console.
- Set Origin Domain Name to the S3 bucket you created above.
- Set Origin Protocol Policy to HTTPS Only.
- Set Viewer Protocol Policy to Redirect HTTP to HTTPS.
- Set Alternate Domain Names to the custom subdomain for your frontend app e.g. gradebook.edxdev.org.
- Set SSL Certificate to Custom SSL Certificate and select the certificate that you created above.
- Set Default Root Object to index.html.
- Click Create Distribution.
- Edit the distribution and to to the Error Pages tab.
- Click Create Custom Error Response.
- Set HTTP Error Code to 404: Not Found.
- Set Customize Error Response to Yes.
- Set Response Page Path to /index.html.
- Set HTTP Response Code to 200: OK.
- Click Yes, Edit.
- Wait for the distribution to be deployed (this may take awhile).
- Once the distribution has been deployed you can continue with setting up DNS for your frontend app's subdomain below.
Set Up DNS for Frontend App
Finally, we will set up DNS for the custom subdomain we wish to use for our frontend app.
- Go to AWS Route 53 in the AWS console.
- Edit the Hosted Zone you created above.
- Create a new Record Set for the subdomain you wish to use for your frontend app.
- Set name to the subdomain you used above in the Alternate Domain Names field of the Cloudfront distribution created for your frontend app above e.g gradebook.exdev.org.
- Set Alias to Yes.
- Set Alias Target to the Cloudfront distribution created above.
- You will now be able to access your frontend app using the custom subdomain you specified e.g. gradebook.edxdev.org.
Add Frontend Hostname to Configuration on Backend Sandbox
...