Question:
I have deployed a VueJS app with S3 and CloudFront using Route53. It seemed like everything was working fine. I’m able to visit the site at https://my-domain.com, and I can navigate to different routes that I have set up with Vue router. However, when I try to access https://my-domain.com/about directly, I see the following error:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
This XML file does not appear to have any style information associated with it. The document tree is shown below. NoSuchKey/fQp7V6SuN0eDPgZpTroQrrxmfVQJTjXtroij56OIJONB56048OIaZDa4snkjc/Ygr/oZu0= |
Here are the settings for my AWS resources:
S3 Bucket
Properties
All properties are disabled (I don’t have static website hosting set since I’m using https)
Permissions (Public)
Public Access Settings
All four options are set to false
Access Control List
Public Access: everyone can read and list objects
Bucket Policy
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
{ "Version": "2012-10-17", "Statement": [ { "Sid": "PublicReadForGetBucketObjects", "Effect": "Allow", "Principal": "*", "Action": "s3:GetObject", "Resource": "arn:aws:s3:::mybucketname.com/*" } ] } |
CORS configuration
Nothing is set here
Route53
I have a domain that has a hosted zone with 5 records:
- mydomain.com: A Record; Points to CloudFront distribution
- Default NS and SOA records that I have not changed
- *.mydomain.com: A record; Also point to CloudFront distribution for frontend subdomains
- api.mydomain.com: A record; Points to an ALB for backend API service
CloudFront
Here are the General settings for my CloudFront distribution:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
Distribution ID: 12356OIJSGSU9I ARN: arn:aws:cloudfront::123456789012:distribution/ABCD1234 Log Prefix: - Delivery Method: Web Cookie Logging: Off Distribution Status: Deployed Comment: - Price Class: Use All Edge Locations (Best Performance) AWS WAF Web ACL: - State: Enabled Alternate Domain Names (CNAMEs): *.mydomain.com mydomain.com SSL Certificate: mydomain.com (abc1234-1234-1234-1234-abcd1234) Domain Name: abcd1234.cloudfront.net Custom SSL Client Support: Only Clients that Support Server Name Indication (SNI) Security Policy: TLSv1.1_2016 Supported HTTP Versions: HTTP/2, HTTP/1.1, HTTP/1.0 IPv6: Enabled Default Root Object: index.html Last Modified: 2019-02-19 11:45 UTC-5 Log Bucket: - |
I don’t have any origin groups set up. I’m not sure if I need this but it sounds like it could help solve this issue.
I have also heard of AWS Amplify (https://console.aws.amazon.com/amplify/).
What settings can I change so that I can have non-root requests to my domain be routed to the VueJS app?
Answer:
This is a typical issue with SPAs, because those routes like /dashboard are not real physical routes on the server. To fix this, just open your CloudFront distribution, go to the “Error Pages” tab, and create a Custom Error Response with the following settings:
This is essentially telling CloudFront to ignore a 404 error and just return an HTTP 200 response, and point to /index.html. Your SPA will handle any “page not found” errors internally via Vue Router. This might help with that.