Adding SSL and custom domain to serverless react application with cloudfront

  • For deploying a server-less react application read my previous blog post.
  • This post explains to setup SSL and custom domain for your react application.
  • Login into AWS Console
  •  Go to services and search ‘cloudfront’ and select the ‘Cloudfront’.8-cf

  • Now click ‘Create Distribution’.
  • You would see two delivery methods and click ‘Get Started’ under Web.9-web
  • Goto S3 bucket where your react application is deployed and copy the URL end point where the react application is serving.
  • In the ‘Origin Domain Name’ field paste the copied url.10-create-distrib
  • Under ‘Default Cache Behavior Settings’ change ‘Viewer Protocol Policy’ to ‘Redirect HTTP to HTTPS’.12-redirect
  • If you don’t have your own domain name and just need SSL choose ‘Default CloudFront Certificate’ for SSL or you can specify your own SSL certificate by requesting or importing from ACM.13-choosedefault
  • In the ‘Alternate Domain Names(CNAMEs)’ box give your domain name.
  • If you already have a certificate click on Custom SSL and see your certificate listed there and select that certificate14-customdomain
  • Use defaults for all other values, In the bottom of the page click on ‘Create Distribution’.16-createdistribution
  • Now you would see the created distribution in the list of distribution17-seeprogress
  • Once the cloudfront distribution is deployed, copy the domain name for the distribution
  • Paste it in a new tab
  • Wow!! you see your react application with SSL.
  • If you have used custom domain name, follow my next blog to setup domain name in route53.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s