amazon-web-servicesnuxt.jsaws-amplifyvue-storefront

AWS Amplify redirect middleware NuxtJs requests not working


I tried to deploy vuestorefront (nuxtjs app) into AWS Amplify according https://docs.amplify.aws/guides/hosting/nuxt/q/platform/js/

My amplify.yml contains:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - yarn install
    build:
      commands:
        - yarn run generate
  artifacts:
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

And I set next data into redirect & rewrites section:

[
    {
        "source": "/<*>",
        "target": "/index.html",
        "status": "404-200",
        "condition": null
    },
    {
        "source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>",
        "target": "/index.html",
        "status": "200",
        "condition": null
    }
]

However, Requests sent to Middlerware generate a "301" with "cancelled" like next example: Redirect error

I have a form into page.vue with middleware call:

import oauthToken from '~/api/getToken';
...
  methods: {
    singIn(e) {
      oauthToken(this.email, this.password);

File ~/api/getToken have an axios to call middleware:

import axios from 'axios';

const oauthToken = (email, password) => {
  let result;
  axios({
    method: 'GET', url: '/oauth2.js',
    headers: { email, password, },
  })
    .then((res) => {
      console.log(JSON.parse(JSON.stringify(res.data.access_token)));
    })
    .catch((err) => console.log(err));

  return result;
};

export default oauthToken;

/oauth2.js GET (in server-middleware/custom-features.js):

app.get('/oauth2.js', (req, res) => {
...
      res.status(200).send(response.data);
}


Solution

  • Vue Storefront requires an active node server, and it's not yet supported to do Lambda deployment yet. We are working on bringing this solution to the framework.