# Deploy Your Secure Vue.js App to AWS **URL:** \ **Category:** Developer Blog Comments\ **Created:** [July 3, 2018, 12:08am UTC](https://devforum.okta.com/t/deploy-your-secure-vue-js-app-to-aws/16893 "2018-07-03T00:08:41Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [July 3, 2018, 12:08am UTC](https://devforum.okta.com/t/deploy-your-secure-vue-js-app-to-aws/16893/1 "2018-07-03T00:08:41Z")
[Deploy Your Secure Vue.js App to AWS](https://developer.okta.com/blog/2018/07/03/deploy-vue-app-aws) This article shows you how to create a secure Vue.js app and deploy it to AWS. ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [October 9, 2018, 9:15pm UTC](https://devforum.okta.com/t/deploy-your-secure-vue-js-app-to-aws/16893/2 "2018-10-09T21:15:49Z")
**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-…](https://xxx.execute-api.us-east-1.amazonaws.com/dev/xxx/xxx_json: "https://xxx.execute-api.us-east-1.amazonaws.com/dev/xxx/xxx\_json:") No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘[https://xxx.cloudfront.net](https://xxx.cloudfront.net "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 ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [October 10, 2018, 2:23am UTC](https://devforum.okta.com/t/deploy-your-secure-vue-js-app-to-aws/16893/3 "2018-10-10T02:23:09Z")
**Doug Richar** Great tutorial, thank you! ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [November 14, 2018, 5:21am UTC](https://devforum.okta.com/t/deploy-your-secure-vue-js-app-to-aws/16893/4 "2018-11-14T05:21:34Z")
**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…](https://awspolicygen.s3.amazonaws.com/policygen.html "https://awspolicygen.s3.amazonaws.com/policygen.html") ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [February 19, 2019, 4:28pm UTC](https://devforum.okta.com/t/deploy-your-secure-vue-js-app-to-aws/16893/5 "2019-02-19T16:28:21Z")
**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. ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [February 19, 2019, 4:30pm UTC](https://devforum.okta.com/t/deploy-your-secure-vue-js-app-to-aws/16893/6 "2019-02-19T16:30:53Z")
**Matt Raible** There’s only one way to find out! Give it a try and let us know if it works. 😉 ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [February 19, 2019, 4:31pm UTC](https://devforum.okta.com/t/deploy-your-secure-vue-js-app-to-aws/16893/7 "2019-02-19T16:31:47Z")
**Matt Raible** Hey Mark - sorry for missing this comment and not replying. Did you figure out what the problem was? ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [February 19, 2019, 4:50pm UTC](https://devforum.okta.com/t/deploy-your-secure-vue-js-app-to-aws/16893/8 "2019-02-19T16:50:38Z")
**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…](https://docs.aws.amazon.com/AmazonS3/latest/dev/how-to-page-redirect.html#advanced-conditional-redirects) "https://docs.aws.amazon.com/AmazonS3/latest/dev/how-to-page-redirect.html#advanced-conditional-redirects)") 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 … ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [February 19, 2019, 4:52pm UTC](https://devforum.okta.com/t/deploy-your-secure-vue-js-app-to-aws/16893/9 "2019-02-19T16:52:44Z")
**Matt Raible** Cool! Thanks for the tip. 👍 ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [April 6, 2019, 4:48am UTC](https://devforum.okta.com/t/deploy-your-secure-vue-js-app-to-aws/16893/10 "2019-04-06T04:48:44Z")
**Rukidnao Merchant** Thanks Brandon, this is a really fantastic guide. Much appreciated. ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [October 14, 2019, 6:43am UTC](https://devforum.okta.com/t/deploy-your-secure-vue-js-app-to-aws/16893/11 "2019-10-14T06:43:55Z")
**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. ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [January 30, 2020, 11:01pm UTC](https://devforum.okta.com/t/deploy-your-secure-vue-js-app-to-aws/16893/12 "2020-01-30T23:01:53Z")
**Harpreet Singh** Hi William, Did you get the resolution on your issue? ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [March 26, 2020, 11:48pm UTC](https://devforum.okta.com/t/deploy-your-secure-vue-js-app-to-aws/16893/13 "2020-03-26T23:48:30Z")
**Chris H** Hey Matt, I’m experiencing the same issue. Is there any way you could help? Thanks! ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [March 30, 2020, 6:28pm UTC](https://devforum.okta.com/t/deploy-your-secure-vue-js-app-to-aws/16893/14 "2020-03-30T18:28:08Z")
**Matt Raible** In `secure-app-server/serverless.yml`, there should be a [cors: true](https://github.com/oktadeveloper/okta-secure-vue-aws-server-example/blob/master/serverless.yml#L15 "https://github.com/oktadeveloper/okta-secure-vue-aws-server-example/blob/master/serverless.yml#L15") setting makes it so CORS works. If you already have that setting, I’m not sure how to fix it. ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [August 10, 2020, 11:14am UTC](https://devforum.okta.com/t/deploy-your-secure-vue-js-app-to-aws/16893/15 "2020-08-10T11:14:25Z")
**Alexander Schaffer** I followed this guide, locally it works perfect, but once deployed on S3 I cannot access the site (403 on /implicit/callback) ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [August 10, 2020, 2:38pm UTC](https://devforum.okta.com/t/deploy-your-secure-vue-js-app-to-aws/16893/16 "2020-08-10T14:38:25Z")
**Matt Raible** I recently wrote a blog post on [how to deploy an Angular app to S3](https://developer.okta.com/blog/2020/05/29/angular-deployment#angular-deployment-to-aws-s3 "https://developer.okta.com/blog/2020/05/29/angular-deployment#angular-deployment-to-aws-s3"). It should be similar for Vue. Did you configure your S3 bucket for static hosting? ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [August 12, 2020, 8:19pm UTC](https://devforum.okta.com/t/deploy-your-secure-vue-js-app-to-aws/16893/17 "2020-08-12T20:19:31Z")
**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? ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [August 12, 2020, 10:33pm UTC](https://devforum.okta.com/t/deploy-your-secure-vue-js-app-to-aws/16893/18 "2020-08-12T22:33:05Z")
**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](https://stackoverflow.com/a/38376832/65681 "https://stackoverflow.com/a/38376832/65681") 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`.` ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [August 12, 2020, 10:47pm UTC](https://devforum.okta.com/t/deploy-your-secure-vue-js-app-to-aws/16893/19 "2020-08-12T22:47:53Z")
**Marc** Thanks for the quick response and example solution. ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [September 17, 2020, 8:08pm UTC](https://devforum.okta.com/t/deploy-your-secure-vue-js-app-to-aws/16893/20 "2020-09-17T20:08:27Z")
**Pallaviigave** Hey Alexander! I am getting same issue, did you get it resolved? [Next page](https://devforum.okta.com/t/deploy-your-secure-vue-js-app-to-aws/16893.md?page=2)