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

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服务器即可为用户提供应用程序。

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

免费获得这本书

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

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