How to host your Portal on your own custom domain using CloudFront and Route53
Prerequisites: a free plan on Amazon Web Services is enough to set up a custom domain for your public Portal with AWS CloudFront, AWS Route 53, and issue a certificate with AWS Certificate manager.
Note: Amazon may charge depending on the use of these services.
To configure your Portal to make it work on SSL you can use AWS Cloudfront which is a CDN that allows you to add a secure certificate to it - certificate can be easily generated with AWS Certificate Manager under one AWS account. In this article, we decided to use AWS Route 53 as a DNS service for a domain that's in use for the Custom domain of our Portal.
⚠️ Warning: Update the NS records with your current DNS service provider to use Route 53 name servers!!
🚨 Important: DNS changes can sometimes take up to 72 hours to take effect, but are typically much faster.
In this article:
- Why do you need to configure SSL?
- Create a CloudFront distribution
- Create a new hosted zone with Route 53
- Create an SSL Certificate
- Point domain to CloudFront distribution
- Use the issued certificate
- Set up a custom domain on your Productboard workspace
- Troubleshooting
- Error 403
Why do you need to configure SSL?
ℹ️ In order to ensure that your website is secure, you must set up your Portal with a custom domain and configure SSL yourself. If you don’t configure SSL, we won’t be able to deploy your Portal with a custom domain. Once this process is complete, any visitor to your Portal will see
https:// when visiting your site, letting them know that it is secured.
It is relatively easy to point your custom domain to your Productboard Portal using a CNAME in your DNS record. Once you’ve set up a custom domain, your public Portal will be hosted on your domain, but on HTTP rather than HTTPS. Your Portal will now appear as ‘Not secure’ on web browsers.
SSL (or TLS) is the most widely used way to secure the connection between your server and your browser. It ensures the connection between the server and browser is encrypted, safe, and appears as HTTPS.
✅ Here’s what an SSL-configured website (with HTTPS) typically looks like on the Chrome browser:
⛔️ This is what it looks like if you’ve visited a website not secured by SSL (without HTTPS):
Create a CloudFront distribution
1. The first step is to create your CloudFront distribution. In AWS services, search for CloudFront. Then click on CloudFront - Global Content Delivery Network.
2. Then, in the CloudFront menu, click on Create Distribution.
3. Under the Origin section, fill the Origin domain with portal.productboard.com and change the Protocol to HTTPS only.
4. This will give you the option to change additional settings. Keep HTTPS port set to 443 and change the Minimum origin SSL protocol setting to TLSv1.
5. Leave the Origin path field blank. Fill the Name field with Custom-portal.productboard.com, select No for Enable Origin Shield, and leave the Additional settings dropdown untouched.
6. Under Default cache behavior, select No to Compress objects automatically, select Redirect HTTP to HTTPS, choose the option GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE, and select No to Restrict viewer access.
7. Under Cache key and origin requests, select the Legacy cache settings and change the Headers setting to All. The remaining settings in this section can be left on default.
Note: Double-check that query strings are set to None vs ALL.
8. Under the Settings section, choose the option to Use all edge locations (best performance)
9. Now we are going to configure the Default Cache Behavior Settings section. The first step is to select Redirect HTTP to HTTPS as your Viewer Protocol Policy.
10. Then, where it says Allowed HTTP Methods, select GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE.
11. Leave the Field-level Encryption Config and Cached HTTP Methods fields as default/empty.
12. Then, where it says Cache and origin request settings, select Use legacy cache settings.
13. Where it says Cache Based on Selected Request Headers, change to All.
14. Leave the next steps as default.
15. Change Query String Forwarding and Caching to Forward all, cached based on all.
16. Leave the rest of the options in the Default Cache Behavior Settings section as default.
17. In the Distribution Settings section, leave everything as default.
18. Then, press the blue Create Distribution button.
Create a new hosted zone with Route 53
1. To create your hosted zone with Route 53, search for Route 53 in AWS services. Then select Route 53.
2. On the Route 53 menu on the left part of the screen, click Hosted zones. Then, click again on Create hosted zones.
3. Now you need to paste your domain, which in our case will be pbcustomdomain.eu. Under Type, make sure that you select Public hosted zone. Then scroll down and click the orange Create hosted zone button.
Note: make sure you have set your domain NS records to the values generated by AWS first.
Create an SSL Certificate
1. In AWS services, search for Certificate Manager.
2. Then click on Get Started under Provision certificates.
3. Now you can import your SSL certificate, if you have one, by pressing the Import a certificate button. But we are going to create a new one by clicking on Request a public certificate and then Request a certificate.
4. For step 1, under Add domain names, write *.yourdomain.com and click Next.
5. For step 2, under Select validation method, select DNS validation and click Next.
6. For step 3, under Add tags, click Review.
7. Make sure that the domain name is correct and click Confirm and request.
8. Then open Domain and click on Create record in Route 53.
9. Now you just need to click Create.
10. Then you need to wait around 30 minutes for the changes to propagate.
Note: If Route 53 is not your DNS provider, contact your provider to find out how to add a record. If the certificate is not issued within 5 minutes, check the troubleshooting section (I'm not getting a certificate issued from AWS. What could be wrong?)
11. Confirm that the SSL certificate is issued.
Note: It can take several hours to validate the domain name and issue the certificate. During this time, ACM shows the validation status as 'Pending validation'.
Point domain to CloudFront distribution
1. Go to your Cloudfront distribution under services and copy the Domain name.
2. Go to Route 53 under services, then click on the Hosted zone, created previously.
3. Select the domain we just created.
4. Click on Create record.
5. Then select Simple routing and click Next.
6. Next, click on Define simple record.
7. Add a Record name by writing portal.
8. For the Record type, select CNAME record.
9. Under Value/Route traffic to, select IP address or another value depending on the record type and paste the Domain name from step 1 into the value field.
10. Confirm by clicking Define simple record and then Create record.
11. You should then get the following confirmation:
Use the issued certificate
1. Go to your Cloudfront distribution under services, select the General tab, and click Edit.
2. Select Custom SSL Certificate, then select your issued certificate in the dropdown below.
3. When you save, you should be able to see your issued certificate under the General tab.
4. Next, click Edit again, and in the Alternate Domain Names (CNAMEs) section, write portal.pbcustomdomain.eu, then press Yes, Edit again.
Set up a custom domain on your Productboard workspace
- Go to your Productboard workspace.
- Go to the Portal tab.
- Click on Share.
4. In the Portal share settings, select Public, toggle on Host Portal on your domain, add the custom domain you've just set in the previous section, and press Save.
Once saved, changes will be deployed on our back-end. It might take up to 30 minutes for changes to take effect. Wait approximately 30 minutes and try to visit the custom domain for your public Portal.
💡 If you can see your public Portal on your custom domain, your Portal is fully secured and ready to go. Users visiting your Portal will see the green lock icon in their browser, letting them know that the site is secure. ✅
Troubleshooting
I'm not getting a certificate issued from AWS. What could be wrong?
After requesting a certificate, you need to create a CNAME record in the DNS configuration. When you add it, you can run
dig +short name_of_CNAME_record.your_domain.com
In the example below, it would be
dig +short _e1831a9c6a25e3e*************.pbtechnicalsupport.fun.
If the command doesn't return anything (null), then something is not set up properly from your side.
It could be the CNAME. Alternatively, please check whether your NS records are properly pointing to the NS records generated from Route 53 (if you use it, check on Route 53 Hosted zone records what the 4 generated NS are, and then compare them with what your domain is set to). If you don't use Route 53, your NS needs to point to the DNS provider you are using.
This is what the console should return when the CNAME and NS are properly set, and from that moment it should take only a couple of seconds up to a few minutes to get the certificate issued.
Error 403
If you see only a white screen when connecting to your new Portal domain, you'll need to complete the following steps:
1. Open the Browser Console in your browser:
- If you are using Chrome:
Click on the View menu, then Developer, and then Developer Tools. Alternatively, you can use the following shortcuts: - Option + ⌘ + J (on macOS).
- Shift + CTRL + J (on Windows/Linux).
2. The Browser Console should now appear on your screen:
3. Click on the Network tab.
4. Then select the XHR filter.
5. Then click on any error on the left-hand side that appears with a red label. Remember, you'll need to click on the Preview tab.
6. You should now be able to see the following error message:
7. This error shows us an issue with the configuration of CloudFront. To solve it, follow the next steps:
- Open your distribution from the CloudFront Console.
- Select the Behaviors tab.
- Select Create Behavior or choose an existing behavior, then select Edit.
- For Allowed HTTP Methods, select GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE.
8. Select Yes, Edit.
Note: CloudFront typically deploys changes to your distribution within five minutes.
9. Refresh your custom Portal domain page. The error should now be resolved.
Comments
Article is closed for comments.