How to make Nuxt generated static spa files in dist hosted on AWS S3

1
votes

How to host Nuxt Static web app in AWS S3?

Firstly, I have tried and known how to generate static static SPA files in ./dist by calling nuxt generate.

Secondly, AWS S3 supports static web hosting, but it seems that the site have to be accessed by visiting the 'index.html' in that bucket.

So, I came to this problem, for example, I got a bucket 'demo2020', and I upload Nuxt/Vue files in the ./dist into that. I have also set the bucket and files in in public. After these, I can visit images in the demo2020 bucket, but the index.html, i.e, http://demo2020.s3-us-west-1.amazonaws.com/index.html could not be visited.

An error page, 200.html was returned, saying:

This page could not be found

Back to the home page

This normally works on standard web server, for example, nginx or http-server/express etc. But no luck on AWS S3 yet.

UPDATE：May 6 2020

This is not problem of aws s3, on the localhost, if index.html from nuxt, same error page. So it seems some configuration incorrect for nuxt.

2
vue.jsamazon-s3routesnuxt.js

2 Answers

1
votes

I get the same issue when using version 2.12.2. Downgrading to 2.11.0 solved the issue for me.

1
votes

The url for AWS S3 as static hosting need specific index file appended, i.e. index.html.

Router need to be adjusted, Nuxt provides config for settings directly to vue-router, by using 'router: {}'.

The following config works for this scenario.

// in nuxt.config.js
mode: 'spa',
router: {
  mode: 'hash',
},