Deploy Your Secure Vue.js App to AWS

Developer Blog Comments
1

Deploy Your Secure Vue.js App to AWS

This article shows you how to create a secure Vue.js app and deploy it to AWS.

2

Mark

Hello, thank you for this detailed tutorial. I am getting this 502 error after deploying serverless. “Failed to load https://xxx.execute-api.us-… No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘https://xxx.cloudfront.net’ is therefore not allowed access. The response had HTTP status code 502.” Could you point me in the direction to where I might put this header in AWS? Thanks in advcance

3

Doug Richar

Great tutorial, thank you!

4

Pyae Sone

{
“Id”: “Policy1542172630417”,
“Version”: “2012-10-17”,
“Statement”: [
{
“Sid”: “Stmt1542172625538”,
“Action”: [
“s3:GetObject”
],
“Effect”: “Allow”,
“Resource”: “arn:aws:s3:::YOUR-BUCKET-NAME/",
“Principal”: "”
}
]
}

// Updated aws style
It can be generated from here.

https://awspolicygen.s3.ama…

5

Rares Pop

Nice guide.
Wondering if is possible to deploy a static vue to Cloudfront while supporting vue-cli-3 multi-page mode (and history mode routing).
This mode essentially produces multiple html files. Each html file is basically a vue app entry with its own multiple routes. This is quite convenient for splitting complex vue sites and ensuring quick loading times.

6

Matt Raible

There’s only one way to find out! Give it a try and let us know if it works. :wink:

7

Matt Raible

Hey Mark - sorry for missing this comment and not replying. Did you figure out what the problem was?

8

Rares Pop

Actually there is.
The trick is to create a redirection rule in S3.
Fortunately these rules can be conditional based on a prefix. (https://docs.aws.amazon.com…

In my case I have
when 404 and prefix is /gate I redirect to gate.html
when 404 and prefix is /admin I redirect to admin.html
and so on …

9

Matt Raible

Cool! Thanks for the tip. :+1:

10

Rukidnao Merchant

Thanks Brandon, this is a really fantastic guide. Much appreciated.

11

William Schulte

The secure page is not receiving Data from GET /secure-data. I am continually getting a 500 error message. The console is pointing to Secure.vue as the source of the error.

12

Harpreet Singh

Hi William, Did you get the resolution on your issue?

13

Chris H

Hey Matt,

I’m experiencing the same issue. Is there any way you could help?

Thanks!

14

Matt Raible

In secure-app-server/serverless.yml, there should be a cors: true setting makes it so CORS works. If you already have that setting, I’m not sure how to fix it.

15

Alexander Schaffer

I followed this guide,
locally it works perfect, but once deployed on S3 I cannot access the site (403 on /implicit/callback)

16

Matt Raible

I recently wrote a blog post on how to deploy an Angular app to S3. It should be similar for Vue. Did you configure your S3 bucket for static hosting?

17

Marc

Thanks for the guide. I’m new to Vue and was wondering if the CloudFront configuration (having index.html handle all 403 and 404 responses) will cause actual/unintended 403/404 errors to go unhandled. Does the Vue Router just take care of that, and are the HTTP response codes preserved?

18

Matt Raible

It should be OK since you want all requests to go to your app at index.html. You might want to add some error handling to display 404s to routes that don’t exist in your app. This Stack Overflow answer has a good solution:


router.map({
  ‘/’: { name: ‘home’, component: HomePage },
  ‘/foo/:id’: {name: ‘foo-show’, component: FooShowPage},
  ‘/404’: {name: ‘not-found’, component: NotFound}
})

router.redirect({
    ‘*’: ‘/404’
})

All routes that are NOT listed in the map will then be redirected to /404.

19

Marc

Thanks for the quick response and example solution.

20

Pallaviigave

Hey Alexander! I am getting same issue, did you get it resolved?