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:
This XML file does not appear to have any style information associated with it. The document tree is shown below.
<Error>
<link type="text/css" id="dark-mode" rel="stylesheet" href=""/>
<style type="text/css" id="dark-mode-custom-style"/>
<Code>NoSuchKey</Code>
<Message>The specified key does not exist.</Message>
<Key>about</Key>
<RequestId>8371CJFJ48JM68239</RequestId>
<HostId>
/fQp7V6SuN0eDPgZpTroQrrxmfVQJTjXtroij56OIJONB56048OIaZDa4snkjc/Ygr/oZu0=
</HostId>
</Error>
Here are the settings for my AWS resources:
All properties are disabled (I don't have static website hosting set since I'm using https)
All four options are set to false
Access Control ListPublic Access: everyone can read and list objects
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadForGetBucketObjects",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::mybucketname.com/*"
}
]
}
Nothing is set here
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
Here are the General
settings for my CloudFront distribution:
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?
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.
I got this issue fixed by simply adding index.html in error document section in your s3 bucket -> edit static website hosting -> error document
check here
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With