vue.js部署

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

编写Vue应用程序直观，直接，快捷。 Vue具有较低的进入门槛，基于组件的方法以及诸如热重载和Webpack之类的内置功能，因此您可以专注于开发应用程序，而不必担心开发环境和构建过程。 但是，当您准备将应用程序部署到生产环境中时会发生什么？ 选择可能是无止境的，有时甚至是直觉的。

作为AWS认证解决方案架构师，我经常被问到如何将Vue应用程序部署到AWS。 在本教程中，我将引导您构建一个安全的小型Vue应用并将其部署到Amazon Web Services（AWS）。 如果您从未使用过AWS，请不要担心！ 我将引导您完成创建AWS账户的各个步骤。

关于AWS

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

在撰写本文时，AWS的价值估计为250B美元 （是的，这代表BILLION的价值为B亿美元 ），并且被全球数千家公司和开发人员使用。

你会建立什么

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

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

本文的目的是向您展示如何利用多个AWS服务，而不仅仅是分解单个EC2实例来为您的应用程序提供服务。 使用这种基于服务的方法，您可以无限扩展，零维护，并且具有在云中部署应用程序的经济高效方式。

什么是Okta？

Okta是一项云服务，允许开发人员管理用户身份验证并将其与一个或多个应用程序连接。 Okta API使您能够：

• 验证和授权您的用户
• 存储有关您的用户的数据
• 执行基于密码的社交登录
• 通过多因素身份验证保护您的应用程序
• 以及更多！ 查看我们的产品文档

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

引导程序前端

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

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

要安装vue-cli运行：

npm install -g vue-cli@2.9.6

接下来是初始化您的项目。 运行以下vue init命令时，请接受所有默认值。

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

init方法还应该安装应用程序的依赖项。 如果由于某种原因而不是，您可以通过npm install安装它们。 最后，打开您喜欢的浏览器并导航到http://localhost:8080 。 您应该看到前端活跃起来！

关于单页应用程序

使用Vue创建应用程序时，您正在开发单页应用程序（或“ SPA”）。 与传统的多页服务器呈现的应用程序相比，SPA具有许多优势。 了解SPA和多页Web应用程序之间的区别非常重要，尤其是在部署时。

SPA应用程序通常被称为“静态应用程序”或“静态网站”。 在这种情况下，静态意味着您的应用程序将其所有代码编译为静态资产（HTML，JS和CSS）。 使用这些静态资产，不需要专门的Web服务器即可为用户提供应用程序。

传统的Web应用程序需要专用的Web服务器来将每个请求呈现给客户端。 对于这些请求中的每一个，页面的整个有效负载（包括静态资产）都将被传输。

相反，在SPA内，仅存在对静态文件的初始请求，然后JavaScript动态重写当前页面。 当您的用户浏览您的应用程序时，对后续页面的请求将在本地解析，并且不需要对服务器的HTTP调用。

Vue-router和创建其他路由

动态重写当前页面所需的SPA组件通常称为“路由器”。 路由器会根据URL中的路径以编程方式计算页面的哪些部分应发生突变。

Vue有一个官方路由器，恰当地命名为vue-router 。 由于使用了vue-cli引导程序，因此您的应用程序具有此依赖关系，并定义了一个路由器文件（ ./src/router/index.js ）。 在定义其他路由之前，我们需要创建您要路由器渲染的页面（或组件）。 在您的项目中创建以下文件：

主页： ./src/components/home.vue

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

安全页（尚未受保护…！） ./src/components/secure.vue

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

使用vue-router ，您可以通知应用程序根据路径呈现每个页面。

修改./src/router/index.js以匹配以下代码片段：

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

试试看！ 跳回到浏览器，您应该会看到新的主屏幕。 如果单击“转到安全页面”链接，您将注意到页面（和URL）已更改，但是没有请求发送到服务器！

了解哈希历史

在上面的两个页面之间导航时，您可能已经看到URL看起来与预期的不同（您是否注意到路径开头的“＃/”？）

http://localhost:8080/#/和http://localhost:8080/#/secure

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

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

http://localhost:8080/secure

但是，这有一个很大的缺点-尤其是在部署时。 由于您的SPA可以编译为静态资产，因此只有一个入口点index.html 。 如果您尝试访问不是index.html页面的页面方向（即http://localhost:8080/secure ），则Web服务器将返回404错误。 为什么呢 浏览器正在向服务器发送GET /secure请求，并尝试解析为文件系统“ / secure”（并且文件不存在）。 当您从主页导航到/secure时，它确实起作用，因为vue-router阻止了浏览器的默认行为，并指示路由器实例以任何方式触发。

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

通过使用以下设置修改./router/index.js来启用历史记录模式。

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

注意：开发服务器（ npm run dev ）会自动为您将URL重写为index.html 。 因此，您在本地看到的行为是它在生产中应如何工作。

构建您的单页应用程序

现在，您已经在本地工作了一个简单的两页前端，现在该构建您的应用并将其部署到AWS了！

因为您使用了vue-cli脚手架，所以只需要一次调用包含的构建脚本。 从项目根目录运行npm run build然后webpack将您的应用程序构建到目标./dist目录中。 如果开发服务器仍在控制台中运行，则可以按CTRL + C。

如果打开./dist文件夹，则应该看到生成过程的结果：

• ./index.html –这是您的SPA的入口点。 这是一个缩小HTML文档，带有指向应用程序CSS和JS的链接。
• ./static –此文件夹包含所有已编译的静态资产（JS和CSS）

在生成期间，您可能已经注意到以下通知： 提示：生成的文件旨在通过HTTP服务器提供。 在file：//上打开index.html无效 。 如果要在本地测试新编译的应用程序，则可以使用serve （通过npm install -g serve ）。 运行serve ./dist ，它将输出一个URL，供您加载到浏览器中。

这也使您可以通过vue-router体验历史记录模式的主要警告。 运行serve ./dist ，单击“转到安全页面”。 您应该看到404错误。

AWS入门

您将需要一个AWS账户才能继续进行此操作。 如果您已经有一个AWS账户，则可以跳过。 如果不这样做，这是一个简单的过程，只需几分钟。

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

注意： Amazon要求您输入一种付款方式，然后才能创建您的帐户。 AWS Free Tier涵盖了本文中讨论的所有服务，使您可以免费使用12个月。

在Amazon S3上托管您的应用

由于您的SPA仅由静态资产组成，因此我们可以利用Amazon S3（简单存储服务）来存储和提供文件。

首先，您需要创建一个存储桶。 存储桶是S3中的逻辑存储单元，默认情况下，每个AWS账户最多可以有100个存储桶（如果您正在学习AWS Certified Solutions Architect考试，则应该知道这一点！）。 每个存储桶可以有自己的配置，并且可以包含无限个文件和嵌套文件夹。

登录到AWS控制台后，导航到S3控制台（您可以在AWS服务搜索“ S3”下执行此操作）。

• 点击“创建存储桶”，然后输入存储桶名称。 重要提示 ：桶名称在整个AWS平台上都是唯一的。 我在本文中选择了bparise-secure-app-client ，但您可能需要在命名方面发挥创意！
• 点击左下方的“创建”。

现在，您应该看到您的存储桶已列出。 接下来，让我们为静态网站托管配置它。

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

在“静态网站托管”框的顶部，您应该看到“端点”的URL。 这是可公开访问的URL，用于查看您的静态网站。 在新的浏览器窗口中打开链接，您应该看到以下内容：

拒绝访问和S3存储桶策略

是的，您应该看到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": "*" –政策涵盖的对象（“ *”表示所有人）
• "Action": "s3:GetObject" –允许的操作（s3：GetObject允许对存储桶中的所有对象进行只读访问）
• "Resource": "arn:aws:s3:::YOUR-BUCKET-NAME/*"桶"Resource": "arn:aws:s3:::YOUR-BUCKET-NAME/*" –策略涉及哪个桶和对象。

在存储桶策略编辑器上单击“保存”。 如果正确设置策略，您应该注意到显示了一个新错误：

对于所有S3存储桶，此警告都是很好的建议和经验法则。 但是，由于我们的存储桶专门用于托管静态网站，因此我们不必担心任何人都不应访问存储桶中的文件。

跳回到浏览器并刷新端点。 现在，您应该会看到404 Not Found错误。 此错误更容易解决，因为您的存储桶中还没有任何文件。

使用aws-cli部署到AWS

现在您已经创建了存储桶并正确设置了权限，是时候上传静态资产了。 尽管您可以使用“上载”按钮通过界面手动完成此操作，但我觉得使用aws-cli效率更高。

根据您的操作系统，安装asw-cli会有所不同。 选一个：

• Windows：https：//aws.amazon.com/cli/
• Mac / Linux运行pip install awscli

安装aws-cli ，您将需要在AWS内生成密钥，以便可以通过CLI执行操作。

• 在导航栏中选择您的帐户名，然后选择“我的安全证书”。 （如果您看到有关访问您的AWS账户安全证书的警告，请选择继续使用安全证书。）
• 展开访问密钥（访问密钥ID和秘密访问密钥）部分。
• 选择创建新的访问密钥。 警告说明您只有一次机会查看或下载秘密访问密钥。 以后无法检索。
• 如果选择显示访问密钥，则可以从浏览器窗口复制访问密钥ID和秘密密钥，并将其粘贴到其他位置。
• 如果选择“下载密钥文件”，则会收到名为rootkey.csv的文件，其中包含访问密钥ID和秘密密钥。 将文件保存在安全的地方。

注意：如果您拥有现有的AWS账户或未使用root凭证。 您可以在IAM中查看并生成密钥。

现在您已经具有访问密钥和秘密访问密钥，您需要配置cli。 在控制台中，运行aws configure并粘贴您的密钥。

$ 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

现在，您可以使用aws-cli将./dist文件夹同步到新存储桶。 同步会将./dist文件夹中的内容与存储桶中的内容进行比较，并且仅上传所需的更改。

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

跳回到S3存储桶端点，您应该看到您的网站托管在S3上！

为了方便起见，将以下脚本条目添加到package.json以便在要同步文件时可以运行npm run deploy 。

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

使用Amazon CloudFront CDN分发您的应用

如果您在地理位置上接近存储桶所在的区域，则Amazon S3静态Web托管的延迟非常低。但是，您想确保所有用户都可以快速访问您的站点，而无论他们位于何处。 为了加快网站交付速度，您可以使用AWS CloudFront CDN。

CloudFront是一个全球内容交付网络（CDN），可以安全地向全球用户交付内容（网站，文件，视频等）。 在撰写本文时，CloudFront支持超过50个边缘位置：

现在，您的文件存储在S3中，设置CloudFront分发仅需几分钟。

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

该过程可能需要5到15分钟才能完全配置您的分发。

等待期间，您需要配置分发以处理vue-router的历史记录模式。 单击新发行版的ID，然后单击“错误页面”标签。 添加以下错误页面。

这些错误页面配置将指示CloudFront使用./index.html响应任何./index.html 。 瞧！

单击“常规”选项卡，您应该看到“域名”条目。 域名是您分发的可公开访问的URL。 在新发行版的状态为Deployed之后，将URL粘贴到浏览器中。

通过导航到安全页面并刷新浏览器进行测试，以确保历史记录模式有效。

使用Okta添加身份验证

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

您将需要将CloudFront URL添加到基本URI以及登录重定向URI，否则Okta将不允许您进行身份验证。 您的应用程序设置应与此相似（CloudFront URL除外）。

注意：输入CloudFront URL时，请确保使用HTTPS。

记下“常规”选项卡底部的“客户端ID”，因为您将需要它来配置应用程序。

向您的应用添加安全身份验证

Okta有一个方便的Vue组件，可以处理与服务集成的所有繁重工作。 要安装Okta Vue SDK，请运行以下命令：

npm i @okta/okta-vue@1.0.1

打开src/router/index.js并对其进行修改，使其类似于以下代码。 另外，请确保将{clientId}和{yourOktaDomain}更改为您的！

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

接下来是将/secure路由锁定为仅通过身份验证的用户。 1563的Vue的SDK自带的方法auth.authRedirectGuard()是检查你的路由的元数据关键requiresAuth并重定向未授权的用户1563的认证流程。

最后，对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>

在您的终端中，通过npm run dev重新启动dev服务器。 跳至浏览器并打开http://localhost:8080 。 如果单击“登录”或“转到安全页面”（受保护的/secure路线），则应获得Okta的身份验证流程。

单击其中任何一个都应显示您已登录，并且您应该能够访问“安全页面”。

构建安全Express REST服务器

最后，我们将构建一个Express服务器来响应/hello和/secure-data请求。 /secure-data将受到保护，并且需要前端提供身份验证令牌。 由于Okta的Vue SDK，可以通过$auth.getUser()使用此令牌。

首先，为您的服务器创建一个新目录。

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

然后安装所需的依赖项。

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

接下来是创建一个将定义应用程序的文件。 将以下代码复制到app.js ，并将{clientId}和{yourOktaDomain}更改为您的。

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

创建最后一个加载应用程序并在端口8081上侦听的文件。创建./index.js并复制以下代码。

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

通过在控制台中运行node ./来启动服务器。 跳至浏览器并打开http://localhost:8081/hello 。 您应该看到我们的JSON有效负载。 但是，加载http://localhost:8081/secure-data应该会导致错误。

从Vue.js前端调用Secure API端点

在安全Express REST服务器仍在运行的情况下，导航回客户端并安装axios，以便可以调用/secure-data端点。

npm i axios

修改./src/components/secure.vue以便它将从Okta Vue SDK获取访问令牌并将请求发送到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>

跳回到浏览器并重新加载Web应用。 导航到http://localhost:8080/secure ，您应该看到API调用的结果。

配置无服务器并部署Express API

Serverless是开源的AWS Lambda和API网关自动化框架，可让您将应用程序部署到AWS上的无服务器基础架构中。 术语“无服务器”（不要与无服务器软件混淆）用于描述在云中运行的应用，该应用不需要开发人员提供专用服务器来运行代码。

Serverless仅使用托管服务使用AWS Lambda和AWS API Gateway在云中100％运行快速API。 AWS Lambda是一项服务，可让您在云中运行代码而无需置备或管理服务器。 而且，AWS API Gateway是一项服务，使开发人员可以轻松地大规模创建，发布，更新，监控和保护API。 将这两种服务结合在一起，可以为您提供一个强大的平台来托管安全的API。

要开始使用无服务器，请在全局安装它。

npm install -g serverless

接下来，您需要在服务器应用程序中创建无服务器配置。 从./secure-app-server项目中使用以下命令。

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

打开serverless.yml并将其修改为以下文件。 创建无服务器配置时，它包含许多样板代码和注释。 以下是部署应用程序所需的全部结构。

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

provider规范通知Serverless，您的应用程序运行NodeJS并以AWS上的部署为目标。 这些functions概述了一个应处理任何HTTP请求并将其转发给您的应用的处理程序。

要完成无服务器配置，请将handler.js修改为以下代码。 它使用aws-serverless-express这是一个简洁的小程序包，它将所有API请求代理到本地Express应用程序。

'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

此过程最初需要花费几分钟来配置堆栈。完成后，您应该在“服务信息”下看到一个endpoints条目（您的URL与我的URL会略有不同）。

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

要对其进行测试，请导航至https://YOUR_END_POINT.amazonaws.com/dev/hello ，您应该会看到我们的问候世界消息。 尝试访问https://YOUR_END_POINT.amazonaws.com/dev/secure应该会导致错误。

更改前端Vue以使用Production API

到目前为止，您的前端应用程序已配置为调用本地托管在http://localhost:8081上的API。 对于生产，您需要将其用作无服务器端点。 打开./src/components/secure.vue并将./src/components/secure.vue替换为baseURL mounted()端点。

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

最后，构建您的应用程序并将其部署到CloudFront。

npm run build
npm run deploy

导航到您的CloudFront URL，您应该有一个正常运行的应用程序！ 恭喜，活干得漂亮！

如果您的CloudFront URL无法提取最新版本的Web应用程序，则可能需要使CDN缓存无效。 转到您的发行版，单击“ 无效”选项卡。 单击创建无效并使路径“ / *”无效。 这将需要几分钟，但是一旦完成，您就可以提取最新版本。

最后的想法

Amazon Web Services是一个强大的平台，几乎可以执行任何操作。 但是，它的学习曲线比较陡峭，可能并不适合所有云初学者。 尽管如此，我还是鼓励您深入研究AWS提供的内容，并找到满足您的开发需求的适当平衡。

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

我建议您参阅其他几篇文章，以了解有关使用常见SPA框架进行用户身份验证的更多信息。

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

请确保在Twitter上关注@oktadev，以便在发布更多此类文章时得到通知。

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

vue.js部署