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.
NOTE: You will incur charges to your personal AWS account by using these instructions. If you are using this set up strictly for sandbox testing, the charges should be minimal (~ cents per month). You will also need to buy a custom domain.
We will need our own custom domain so that cookies can be shared across the frontend and backend. Go to godaddy.com or the domain registrar of your choice to purchase your custom domain.
Set Up Custom Domain in Route 53
We will use AWS Route 53 for DNS of our custom domain.
Create a new public Hosted Zone for your custom domain using AWS Route 53.
Create SSL Certificate
Frontend apps redirect users to the LMS login page for authentication. When redirecting to the LMS login page, frontend apps include a "next" query parameter whose value can be a URL which the LMS will use to redirect the user once they have been authenticated. The LMS requires the "next" parameter value to be an HTTPS URL. This requires us to serve our frontend apps over SSL. Luckily, AWS makes it easy to request a certificate that can be used to serve our resources over SSL.
During the request process, choose DNS validation.
The request process will ask you to add a CNAME record to Route 53 in order to confirm your ownership of the domain. Do as instructed.
Once the certificate has been validated by AWS, you will be able to use it to serve resources over SSL.
Proxy Sandbox Requests Using Your Custom Domain
We will want to be able to make requests to our sandbox using our custom domain so that cookies can be shared with the frontend app. We will use AWS Cloudfront to proxy requests to the edX sandbox.
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).
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
You will need to edit the settings of your backend services on the backend sandbox to allow cross domain requests to be made to them.
Add your frontend hostname to the CORS_ORIGIN_WHITELIST setting on each of the services you wish to make API requests to.
In /edx/app/edxapp/lms.env.json, set the value of CROSS_DOMAIN_CSRF_COOKIE_DOMAIN to the hostname you used for the backend proxy Cloudfront distribution created above e.g. douglashall.edxdev.org.
Add your frontend hostname to the LOGIN_REDIRECT_WHITELIST setting in /edx/app/edxapp/lms.env.json.
In /edx/app/edxapp/lms.env.json, set the value of SESSION_COOKIE_DOMAIN to the custom domain you created above e.g. edxdev.org.
Restart each of the services for which you modified settings.