erui _ eruie 003如何将安全Vue.js应用程序部署到AWS

本文最初发表于Okta开发人员博客。 感谢您支持使SitePoint成为可能的合作伙伴。

Amazon Web Services（AWS）是一个云平台，可提供大量按需云服务。 这些服务包括云计算，文件存储，关系数据库，内容分发网络等等。 AWS并不是作为零售产品而出现的，而是亚马逊对内部基础结构日益复杂的内部答案，该基础结构为推动Amazon.com及其电子商务运营提供了动力。 亚马逊很快意识到其基于云的基础架构是一种引人注目的，具有成本效益的解决方案，并于2006年向公众开放。

在撰写本文时，AWS值得估算$ 250B（是的，这是B表示B的金额），并且被全球数千家公司和开发人员使用。

我觉得最好的学习方法就是实践。 我将指导您使用Express REST服务器构建一个小型Vue应用。 您将使用Okta的OpenID Connect（OIDC）只需几行代码即可实现用户身份验证和授权。

您将首先构建Vue前端并将其部署到Amazon S3。 然后，您将利用Amazon CloudFront将您的Vue前端分发到世界各地的边缘服务器。 最后，您将创建一个Express API服务器并使用无服务器。 该API服务器将包含一种用于获取“安全数据”（只是一些伪数据）的方法，该方法需要从客户端获取有效的访问令牌才能进行检索。

• 认证和授权您的用户Store data about您的用户Perform password-based和社交登录使用以下方法保护您的应用程序安全多因素认证以及更多！ 看看我们的产品文件

注册免费的开​​发者帐户，完成后再回来，这样我们就可以了解更多有关将Vue应用程序部署到AWS的信息。

您将首先在安全应用程序中构建Vue前端，然后将其部署到Amazon S3和Amazon CloudFront。 Amazon S3（简单存储服务）是高度冗余的基于对象的文件存储，功能强大且功能强大。特色的。 在本文的范围内，我们将重点介绍S3提供的最佳功能之一：静态网站托管。

为了快速上手，您可以使用以下的脚手架功能Vue-Cli使您的应用程序快速启动并运行。 对于本文，您可以使用Webpack模板其中包括热重载，CSS提取，棉绒和集成的构建工具。

To install vue-cli run:

npm install -g [email protected]

Next up is to initialize your project. When you run the following vue init command, accept all the default values.

vue init webpack secure-app-client
cd ./secure-app-client
npm run dev

The init method should also install your app’s dependencies. If for some reason it doesn’t, you can install them via npm install. Finally, open your favorite browser and navigate to http://localhost:8080. You should see the frontend come alive!

Vue has an official router that is aptly named vue-router. Since you used the vue-cli bootstrap, your app has this dependency and a router file defined (./src/router/index.js). Before we can define additional routes, we need to create the pages (or components) that you want the router to render. Create the following files in your project:

Homepage: ./src/components/home.vue

<template>
  <div>
    <h1>Home</h1>
    <div>
      <router-link to="/secure">Go to secure page</router-link>
    </div>
  </div>
</template>

Secure Page (not secured… yet!) ./src/components/secure.vue

<template>
  <div>
    <h1>Secure Page</h1>
    <div>
      <router-link to="/">Go back</router-link>
    </div>
  </div>
</template>

使用Vue路由器，您可以通知应用程序根据路径呈现每个页面。

Modify ./src/router/index.js to match the following code snippet:

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/home'
import Secure from '@/components/secure'

Vue.use(Router)

let router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/secure',
      name: 'Secure',
      component: Secure
    }
  ]
})

export default router

http://localhost:8080/#/ and http://localhost:8080/#/secure

该网址看起来像是因为vue-router的默认模式是哈希模式。 哈希模式可模拟新的URL更改，而无需指示浏览器重新加载页面。 这种行为使SPA可以导航页面，而不必强迫浏览器发出任何其他HTTP请求。 Vue-router侦听URL的哈希部分中的更改（“＃”之后的所有内容），并根据配置的路由做出相应的响应。

您可以更改vue-router的模式以利用历史模式这将为您的应用提供“漂亮的网址”，例如：

http://localhost:8080/secure

But, this comes with a significant drawback — especially when you are deploying. Since your SPA compiles to a static assets, there is just one single entry point index.html. If you try to access a page direction that is not index.html page (i.e.; http://localhost:8080/secure) the web server will return a 404 error. Why? The browser is sending a GET /secure request to the server and trying to resolve to the filesystem “/secure” (and the file doesn’t exist). It does work when you navigate to /secure from the homepage because vue-router prevents the default behavior of the browsers and instructs the router instance to fire in any mode.

通过使用历史记录模式，您必须采取其他步骤来确保页面刷新正常工作。 您可以阅读更多有关HTML5历史记录模式。 为使事情变得简单，我将向您展示一个简单的技巧，以确保您的刷新可用于AWS CloudFront。

Enable history mode by modifying ./router/index.js with the following setting.

let router = new Router({
  mode: 'history',
})

Note: The dev server (npm run dev) automatically rewrites the URL to index.html for you. So the behavior you see locally is how it should work in production.

Because you used vue-cli scaffolding, a single call to the included build script is all you need. From your project root, run npm run build and webpack will build your application into the target ./dist directory. If the dev server is still running in your console, you can press CTRL+C.

If you open the ./dist folder and you should see the results of the build process:

• ./index.html – This is the entry point of your SPA. It’s a minified HTML document with links to the apps CSS and JS.
• ./static – This folder contains all your compiled static assets (JS and CSS)

During the build, you might have noticed the following notification: Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won’t work. If you want to test your newly compiled application locally, you can use serve (install via npm install -g serve). Run serve ./dist and it will output a URL for you to load into your browser.

This also gives you to have a hands-on experience with the major caveat of history mode with vue-router. After running serve ./dist, click on the “Go to secure page”. You should see a 404 error.

• 导航到Amazon Web Services主页单击注册（或者如果您最近已登录到AWS，请选择登录控制台）。如果出现提示，您可以选择“个人”作为帐户类型填写必填信息，添加付款方式，并验证您的电话号码创建帐户后，您应该会收到一封确认电子邮件登录！

注意：亚马逊要求您输入一种付款方式，然后才能创建您的帐户。 本文讨论的所有服务都包含在AWS免费套餐这使您有12个月的免费时间。

• Click “Create Bucket” and enter a Bucket name. Important: Bucket names are unique across the entire AWS platform. I chose bparise-secure-app-client for this article, but you might need to be creative with your naming!
• Click “Create” in the bottom left.

• 点击您的存储桶名称，然后选择“属性”标签。点击“静态网站托管”框选择“使用此存储桶托管网站”，然后添加“ index.html”作为索引文档。 点击“保存”。

是的，您应该看到403禁止错误！ 默认情况下，S3存储桶权限为全部拒绝。 要访问存储桶中的内容，您必须明确定义哪些人可以访问存储桶。 这些存储桶权限称为存储桶策略。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadAccess",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::YOUR-BUCKET-NAME/*"
        }
    ]
}

• "Effect": "Allow"
• "Principal": "*" – Who the policy covers (“*” implies everyone)
• "Action": "s3:GetObject" – The action allowed (s3:GetObject allows read-only access to all objects in your bucket)
• "Resource": "arn:aws:s3:::YOUR-BUCKET-NAME/*" – Which bucket and objects the policy is about.

现在您已经创建了存储分区并正确设置了权限，现在该上传您的静态资产了。 尽管您可以使用“上传”按钮通过界面手动执行此操作，但我还是觉得aws-cli更有效率。

Installing asw-cli is different based on your OS. Choose one:

• Windows: https://aws.amazon.com/cli/
• Mac/linux run pip install awscli

After you’ve installed aws-cli, you will need to generate keys within AWS so you can perform actions via the CLI.

• Choose your account name in the navigation bar, and then choose My Security Credentials. (If you see a warning about accessing the security credentials for your AWS account, choose Continue to Security Credentials.)
• Expand the Access keys (access key ID and secret access key) section.
• Choose Create New Access Key. A warning explains that you have only this one opportunity to view or download the secret access key. It cannot be retrieved later.
• If you choose Show Access Key, you can copy the access key ID and secret key from your browser window and paste it somewhere else.
• If you choose Download Key File, you receive a file named rootkey.csv that contains the access key ID and the secret key. Save the file somewhere safe.

Now that you have your Access Key and Secret Access Key, you need to configure the cli. In your console run aws configure and paste in your keys.

$ aws configure
AWS Access Key ID [None]: YOUR KEY
AWS Secret Access Key [None]: YOUR SECRET
Default region name [None]: us-east-1
Default output format [None]: ENTER

Now, you can use the aws-cli to sync your ./dist folder to your new bucket. Syncing will diff what’s in your ./dist folder with what’s in the bucket and only upload the required changes.

aws s3 sync ./dist s3://your-bucket-name

For convenience, add the following script entry to package.json so you can run npm run deploy when you want to sync your files.

"scripts": {
  "deploy": "aws s3 sync ./dist s3://your-bucket-name"
}

• 去CloudFront主页单击“创建分发”，然后在“ Web”设置下选择“入门”。在“原始域名”中，您应该在下拉列表中看到您的存储桶名称。 选择该存储桶并进行以下更改：查看器协议策略：“将HTTP重定向到HTTPS”。 （这是一个安全的应用程序，对！！）对象缓存：“自定义”。 并将“最小TTL”和“默认TTL”都设置为“ 0”。 您可以稍后对其进行调整以最大化缓存。 但是，将其设置为“ 0”将使我们能够部署更改并快速查看它们。默认根对象：“ index.html”单击创建分发

These error page configurations will instruct CloudFront to respond to any 404/403 with ./index.html. Voila!

要使用Okta，您必须首先具有Okta开发人员帐户。 如果没有人，可以创建一个免费帐户。 登录后，在导航栏中单击“应用程序”，然后单击“添加应用程序”按钮。 确保选择“单页应用程序”作为平台，然后单击“下一步”。

npm i @okta/[email protected]

Open src/router/index.js and modify it to look like the following code. Also, make sure to change {clientId} and {yourOktaDomain} to yours!

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/home'
import Secure from '@/components/secure'
import Auth from '@okta/okta-vue'

Vue.use(Auth, {
  issuer: 'https://{yourOktaDomain}/oauth2/default',
  client_id: '{clientId}',
  redirect_uri: window.location.origin + '/implicit/callback',
  scope: 'openid profile email'
})

Vue.use(Router)

let router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/implicit/callback',
      component: Auth.handleCallback()
    },
    {
      path: '/secure',
      name: 'Secure',
      component: Secure,
      meta: {
        requiresAuth: true
      }
    }
  ]
})

router.beforeEach(Vue.prototype.$auth.authRedirectGuard())

export default router

Next is to lock down the /secure route to only authenticated users. Okta’s Vue SDK comes with the method auth.authRedirectGuard() that inspects your routes metadata for the key requiresAuth and redirects unauthenticated users to Okta’s authentication flow.

Finally, make some style changes to App.vue

<template>
  <div id="app">
    <div>
      <a href="#" v-if="!activeUser" @click.prevent="login">Login</a>
      <div v-else>
        Welcome {{ activeUser.email }} - <a href="#" @click.prevent="logout">Logout</a>
      </div>
    </div>
    <router-view/>
  </div>
</template>

<script>
  export default {
    name: 'app',
    data () {
      return {
        activeUser: null
      }
    },
    async created () {
      await this.refreshActiveUser()
    },
    watch: {
      // everytime a route is changed refresh the activeUser
      '$route': 'refreshActiveUser'
    },
    methods: {
      login () {
        this.$auth.loginRedirect()
      },
      async refreshActiveUser () {
        this.activeUser = await this.$auth.getUser()
      },
      async logout () {
        await this.$auth.logout()
        await this.refreshActiveUser()
        this.$router.push('/')
      }
    }
  }
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

In your terminal, restart the dev server via npm run dev. Tab to your browser and open http://localhost:8080. If you click “Login” or “Go to secure page” (the protected /secure route), you should get Okta’s authentication flow.

Finally, we are going to build an Express server to respond to /hello and /secure-data requests. The /secure-data will be protected and require an authentication token from the frontend. This token is available via $auth.getUser() thanks to Okta’s Vue SDK.

mkdir secure-app-server
cd secure-app-server
npm init -y

npm install -s express cors body-parser @okta/jwt-verifier aws-serverless-express

Next is to create a file that will define the application. Copy the following code into app.js and change {clientId} and {yourOktaDomain} to yours.

const express = require('express')
const cors = require('cors')
const bodyParser = require('body-parser')
const OktaJwtVerifier = require('@okta/jwt-verifier')

const oktaJwtVerifier = new OktaJwtVerifier({
  clientId: '{clientId}',
  issuer: 'https://{yourOktaDomain}/oauth2/default'
})

let app = express()
app.use(cors())
app.use(bodyParser.json())

// verify JWT token middleware
const authRequired = () => {
  return (req, res, next) => {
    // require request to have an authorization header
    if (!req.headers.authorization) {
      return next(new Error('Authorization header is required'))
    }
    let parts = req.headers.authorization.trim().split(' ')
    let accessToken = parts.pop()
    oktaJwtVerifier.verifyAccessToken(accessToken)
      .then(jwt => {
        req.user = {
          uid: jwt.claims.uid,
          email: jwt.claims.sub
        }
        next()
      })
      .catch(next) // jwt did not verify!
  }
}

// public route that anyone can access
app.get('/hello', (req, res) => {
  return res.json({
    message: 'Hello world!'
  })
})

// route uses authRequired middleware to secure it
app.get('/secure-data', authRequired(), (req, res) => {
  return res.json({
    secret: 'The answer is always "A"!'
  })
})

module.exports = app

Create one last file that loads up the app and listens on port 8081. Create ./index.js and copy the following code.

const app = require('./app')

app.listen(8081, () => {
  console.log('listening on 8081')
})

Start the server by running node ./ in your console. Tab to your browser and open http://localhost:8081/hello. You should see our JSON payload. But, loading http://localhost:8081/secure-data should result in an error.

With your secure Express REST server still running, navigate back to your client and install axios so you can call the /secure-data endpoint.

npm i axios

Modify ./src/components/secure.vue so that it will get the access token from the Okta Vue SDK and send the request to the API.

<template>
  <div>
    <h1>Secure Page</h1>
    <h5>Data from GET /secure-data:</h5>
    <div class="results">
      <pre>{{ data }}</pre>
    </div>
    <div>
      <router-link to="/">Go back</router-link>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      data: null
    }
  },
  async mounted () {
    let accessToken = await this.$auth.getAccessToken()
    const client = axios.create({
      baseURL: 'http://localhost:8081',
      headers: {
        Authorization: `Bearer ${accessToken}`
      }
    })
    let { data } = await client.get('/secure-data')
    this.data = data
  }
}
</script>

<style>
  .results {
    width: 300px;
    margin: 0 auto;
    text-align: left;
    background: #eee;
    padding: 10px;
  }
</style>

Tab back to your browser and reload your web app. Navigate to the http://localhost:8080/secure, and you should see the results from the API call.

无服务器 is an open-source AWS Lambda and API Gateway automation framework that allows you to deploy your app into a serverless infrastructure on AWS. The term “serverless” (not to be confused with the software 无服务器) is used to describe an app running in the cloud that doesn’t require the developer to provision dedicated servers to run the code.

无服务器使用AWS Lambda和AWS API网关 to run your express API 100% in the cloud using only managed services. AWS Lambda is a service that lets you run code in the cloud without provisioning or managing servers. And, AWS API网关 is a service that makes it easy for developers to create, publish, update, monitor,和secure API’s at scale. Combining both of these services give you a robust platform to host a secure API.

npm install -g serverless

Next, you need to create a Serverless configuration in your server app. Use the following command from within your ./secure-app-server project.

serverless create --template aws-nodejs --name secure-app-server

Open up serverless.yml and modify it to look like the file below. When you create a Serverless configuration, it contains a lot of boilerplate code and comments. The following structure is all you need to get the app deployed.

service: secure-app-server

provider:
  name: aws
  runtime: nodejs8.10
  stage: dev

functions:
  api:
    handler: handler.handler
    events:
      - http:
          path: "{proxy+}"
          method: ANY
          cors: true

The provider spec informs Serverless that your app runs NodeJS and targets deployment on AWS. The functions outlines a single handler that should handle ANY HTTP requests and forward them your app.

To finish up Serverless configuration, modify handler.js to the following code. It uses aws-serverless-express which is a neat little package that proxies ALL API requests to a local express app.

'use strict';

const awsServerlessExpress = require('aws-serverless-express')
const app = require('./app')
const server = awsServerlessExpress.createServer(app)
exports.handler = (event, context) => { awsServerlessExpress.proxy(server, event, context) }

serverless deploy

This process will take a few minutes to provision the stack initially., Once completed, you should see an endpoints entry under “Service Information” (your URL will be slightly different than mine).

endpoints:
  ANY - https://YOUR_END_POINT.amazonaws.com/dev/{proxy+}

To test it out, navigate to https://YOUR_END_POINT.amazonaws.com/dev/hello and you should see our hello world message. Attempting to go to https://YOUR_END_POINT.amazonaws.com/dev/secure should result in an error.

Up until this point, your frontend app has been configured to call the API hosted locally on http://localhost:8081. For production, you need this to be your Serverless Endpoint. Open ./src/components/secure.vue and replace baseURL with your endpoint within mounted().

baseURL: 'https://YOUR_END_POINT.amazonaws.com/dev',

npm run build
npm run deploy

您可以在以下位置找到本教程的完整源代码：https://github。com/oktadeveloper/okta-secure-vue-aws-client-example和https://github。com/oktadeveloper/okta-secure-vue-aws-server-example。

• 使用Vue.js和Node构建基本的CRUD应用在20分钟内向您的Vanilla JavaScript应用添加身份验证在15分钟内使用用户身份验证构建React应用程序在15分钟内使用Okta的登录小部件构建Angular应用

请务必在Twitter上关注@oktadev在发布更多此类文章时获得通知。

from: https://www.sitepoint.com//deploy-your-secure-vue-js-app-to-aws/