Clever Geek Handbook

Vue.js Router: History Mode and AWS S3 (RoutingRules)

I have a Vue.js app working with Amazon S3 and Cloudflare.

When I open the index and view / dashboard everything works fine. But when I open a route, like a dashboard, right in a new tab, or refresh the page, I get the following error from S3:

404 Not Found

Code: NoSuchKey
Message: The specified key does not exist.
Key: unternehmen
RequestId: 6514F8A1F4C29235
HostId: +BVrPLJSGdzSYogzWZ4GMBXkgkdSJWRVJVhcSs4EI/lmMUR422aCtCxpBGU6AMe5VkS1UbEn/Lc=

Just read that the problem is in Vue.js history mode: https://router.vuejs.org/de/essentials/history-mode.html

I would like to solve a problem with a routing rule in my Amazon S3 Bucket. What would Apache RewriteRule look like for S3?

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Tried the following but it doesn't work:

<RoutingRules>
  <RoutingRule>
    <Condition>
      <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
    </Condition>
    <Redirect>
      <HostName>domain.com</HostName>
      <ReplaceKeyWith>index.html</ReplaceKeyWith>
    </Redirect>
  </RoutingRule>
</RoutingRules>

If I do this, I just get the header and footer, but nothing more.

Thank!

+8


source to share


2 answers


I know this answer comes late, but if someone is looking for another way to solve this problem in the cloud, there is no need to create custom pages to redirect s3 users in case the page is not found. Instead, custom error responses can be generated in the cloud for distribution.

Custom errors



This will always redirect to /index.html

in case the file is not found, and the application route trigger will do that.

+18


source


I think this problem has two components:

1.

If the request is made directly (outside of the Javascript application) to an additional path such as / jobs, then S3 returns 404 because the path / object does not exist. The easiest way to fix this is from S3 itself, where you redirect all error pages back to index.html.

However, this does not work with CDNs like Cloudfront and presumably Cloudflare.

A good trick is to use files inside S3 that redirect users like this:

jobs / -> /index.html jobs → /index.html

For example, if someone makes a request to the site /, they will receive the following html file:

"redirect":"<html><head><meta http-equiv=\"refresh\" content=\"0; url=http://example.com/site/index.html\" /></head>
<body>Redirecting to <a href=\"http://example.com/site/index.html\">Home</a></body></html>"


Secondly...

If I do this, I just get my header and footer, but nothing else.

This is an issue I was working with where the router view does not initialize properly even though the component containing the router view has loaded.

What I have done now is redirecting my router when creating the main "App" component:

created () {
console.log('route', this.$route.path)
this.$router.replace(this.$route.query.redirect || '/')
}

This has the added bonus of removing index.html from your path (which was put there by your new redirects), causing your router view to render ...

My #app component is a parent component, with a navbar, footer and router view that renders all sub pages / components.

+3


source






More articles:


All Articles