65.9K
CodeProject 正在变化。 阅读更多。
Home

如何将Ionic Angular应用程序连接到AWS

Nikola Breznjak
starIconstarIconstarIconstarIconstarIcon

5.00/5 (2投票s)

2017年12月26日

CPOL

7分钟阅读

viewsIcon

26464

将Angular应用程序连接到AWS Mobile Hub。

简而言之

由于 Ionic 由 Angular 提供支持，因此这对于任何 Angular 应用程序都适用，并且您可以在几乎不进行任何更改的情况下将此知识应用于任何 Angular Web 应用程序。

技术栈

以便我们清除所有未知信息，为那些可能在过去（好吧，永远）都与世隔绝的人。🙈

AWS

Amazon Web Services (AWS) 是一个灵活、经济高效、易于使用的云计算平台。

Ionic 框架

如果您一直关注我的博客，那么我不必对 Ionic 框架做任何特别介绍。但为了简洁起见，他们的网站是这么说的：

Ionic 框架是一款精美、免费且开源的移动 SDK，可轻松开发原生和渐进式 Web 应用。

如果您正在寻找 Ionic 框架的入门介绍，可以查看本系列的第一篇文章

Ionic + AWS = ❤️

Ionic 与 AWS Mobile Team合作，共同构建了官方 Ionic AWS 入门项目。该项目生成了一个 Ionic 应用，并附带一个预配置的AWS Mobile Hub 项目，已准备就绪，同时还预配置了用于用户身份管理的 Amazon Cognito、用于应用程序数据的 DynamoDB、用于文件存储的 S3 以及用于分析的 Pinpoint 的页面和实用程序。

演示项目

您可以查看我根据上述官方 Ionic AWS 入门项目在Github 上制作的演示代码。

您甚至可以在此处查看该项目实际运行的网站演示。是的，我喜欢 Ionic 的“一次编写，随处部署”的超级能力。💪

分步指南

在这篇文章中，我将首先向您展示如何设置这个 Ionic AWS 入门项目。如果您想了解更多关于 AWS 上所有存储选项的信息，可以查看本教程：探索 AWS 上的存储选项

安装必需的先决条件

首先，请确保您已安装最新版本的 Ionic（在撰写本文时，当前最新版本为 3.19.0）

npm install -g ionic@latest

要安装 AWS CLI（命令行界面），您需要安装 Python3。如果您使用的是 Mac，很可能已经安装了。如果没有，这里是安装详细信息。如果您在 Mac 上使用 brew，那么一个简单的 brew install python3 就足够了，因为它也会为您安装 pip。

pip 是 Python（如 Node 项目的 npm）包的包管理器。

⚠️ 老实说，安装 AWS CLI 对我来说是个麻烦。最后，一个简单的 brew install awscli（如StackOverflow 回答中所述）完美解决了问题。我保留下面的说明，以防您遇到类似问题而卡住，这样您就不必去 Google 搜索了。如果以上所有解决方案都无效，您仍然卡住，请在评论区告诉我，我会尽力提供帮助。💪

如果您遇到类似这样的错误

An unexpected error occurred during the `brew link` step 
The formula built, but is not symlinked into /usr/local Permission denied @ d
ir_s_mkdir - /usr/local/Frameworks Error: Permission denied @ dir_s_mkdir 
- /usr/local/Frameworks

那么首先运行 brew doctor，然后运行 sudo chown -R $(whoami) $(brew --prefix)/*，如此 StackOverflow 帖子中所述。

如果您收到如下输出

Warning: python3 3.6.3 is already installed, it's just not linked. 
You can use `brew link python3` to link this version.

然后在运行 brew link python3 后，您收到类似这样的错误

Linking /usr/local/Cellar/python3/3.6.3... 
Error: Permission denied @ dir_s_mkdir - /usr/local/Frameworks

您可以通过以下两个命令解决此问题，如此处所述

sudo mkdir /usr/local/Frameworks
sudo chown $(whoami):admin /usr/local/Frameworks

完成此操作后，链接应该可以正常工作。

要安装 AWS CLI，请运行

pip install awscli --user -U

⚠️ 请注意 --user -U。如果您查看官方 Github 仓库，他们的命令会因此 StackOverflow 回答中解释的原因而失败。使用这些标志可以解决问题。

为确认您已正确安装 AWS CLI，请运行 aws --version，您应该会看到类似以下内容：

aws-cli/1.11.190 Python/3.6.3 Darwin/17.2.0 botocore/1.7.48

创建新的 Ionic 项目

要使用此 AWS Mobile Hub 入门项目创建新的 Ionic 项目，请运行

ionic start IonicAWS aws

命令的输出将如下所示（如果您在平台上选择“否”）

✔ Creating directory ./IonicAWS - done!
✔ Downloading and extracting aws starter - done!

? Would you like to integrate your new app with Cordova to target native iOS 
and Android? No
✔ Personalizing ionic.config.json and package.json - done!

Installing dependencies may take several minutes.

  ✨   IONIC  DEVAPP  ✨

 Speed up development with the Ionic DevApp, our fast, on-device testing mobile app

  -  🔑   Test on iOS and Android without Native SDKs
  -  🚀   LiveReload for instant style and JS updates

 ️-->    Install DevApp: https://bit.ly/ionic-dev-app    <--

> npm i
✔ Running command - done!
> git init
> git add -A
> git commit -m "Initial commit" --no-gpg-sign

♬ ♫ ♬ ♫  Your Ionic app is ready to go! ♬ ♫ ♬ ♫

Run your app in the browser (great for initial development):
   ionic serve

Install the DevApp to easily test on iOS and Android
   https://bit.ly/ionic-dev-app

Run on a device or simulator:
   ionic cordova run ios

Test and share your app on a device with the Ionic View app:
   https://ionicframework.cn/products/view

Next Steps:
* Go to your newly created project: cd ./IonicAWS
* Get Ionic DevApp for easy device testing: https://bit.ly/ionic-dev-app

您可能已经在上面的输出中注意到了 Ionic Dev App。如果您想了解更多关于它的信息，请访问官方教程。

创建 AWS 账户

AWS 免费套餐包括在注册后 12 个月内过期的优惠以及永久有效的优惠。您可以在此处创建一个免费账户：https://aws.amazon.com/free/。注册非常快速简便。

但是，请注意，您还需要提供您的地址、联系信息以及信用卡。不用担心，所有功能在 12 个月内都是免费的，而且，您可以随时取消。

配置 AWS CLI

要从命令行配置 AWS，我们首先需要获取访问凭证。如果您进入 AWS 帐户并单击“我的安全凭证”，您会看到指示您创建所谓的 IAM 用户的说明。

有关更深入的指南，请查阅官方文档。

为了符合安全要求，让我们创建一个新用户

选择“编程访问”

接下来，为您的用户选择一个合适的组。作为最佳实践，不要为从不需要该类型访问权限的用户创建该类型的凭证。例如，对于仅需要通过 AWS 管理控制台访问的用户，请勿创建访问密钥。

老实说，您需要花一些时间来阅读和了解这里的所有选项（因为它们非常多）。我选择了 PowerUser 组，但您的用例可能会有所不同。

这是您将能够复制访问密钥和密钥的最终屏幕。

现在，在控制台中，运行 aws configure 并输入您的 AWS 访问密钥 ID 和 AWS 秘密访问密钥。

aws configure
AWS Access Key ID [None]: AKIAJKQH56VFYCQOYILQ
AWS Secret Access Key [None]: FdKaRaPadjwuy548asfa927
Default region name [None]: 
Default output format [None]:

设置 AWS Mobile Hub

创建 AWS 帐户并配置 AWS CLI 后，请访问 https://aws.amazon.com/mobile/，然后点击右上角的黄色按钮“登录到控制台”。

在 Mobile Hub 控制台中，点击“导入您的项目”按钮。

接下来，找到此入门项目中包含的 mobile-hub-project.zip，然后将其拖放到导入模态框中。

设置项目名称，确保勾选“允许 AWS Mobile Hub 代表我管理资源”复选框，然后点击“导入项目”。

项目导入后，您将被重定向到该 Mobile Hub 项目的控制台。

要继续配置应用，您需要找到通过 App Content Delivery 系统自动生成的 Amazon S3 存储桶的名称。为此，请点击 Mobile Hub 项目控制台右侧的“资源”按钮，找到“Amazon S3 存储桶”卡片，然后复制包含 hosting-mobilehub 的存储桶名称。

接下来，在终端中，进入 IonicAWS 文件夹，运行

aws s3 cp s3://BUCKET_NAME/aws-config.js src/assets

将 BUCKET_NAME 替换为上面找到的 S3 存储桶的完整名称。在我的例子中，它看起来像这样：

aws s3 cp s3://ionicaws-hosting-mobilehub-1643446370/aws-config.js src/assets

这将把自动生成的 aws-config.js 文件复制到 Ionic 应用的 src/assets 文件夹中，从而自动预配置所有 AWS 设置。

启用文件上传

演示应用程序有一个将照片或文件上传到 userfiles S3 存储桶的示例。要从 Web 启用上传，我们必须编辑 S3 存储桶的 CORS 策略。为此，请使用 userfiles 打开存储桶。

并选择“CORS 配置”选项。

一个可行的、虽然比较宽松的 CORS 配置如下所示：

<!-- Sample policy -->
<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

运行应用程序

现在应用程序已配置并连接到 AWS Mobile Hub 和 AWS 服务。要在浏览器中运行应用程序，请运行：

ionic serve

您应该会看到类似以下的输出：

Starting app-scripts server: --address 0.0.0.0 --port 8100 
--livereload-port 35729 --dev-logger-port 53703 --nobrowser - 
Ctrl+C to cancel
[11:12:04]  watch started ... 
[11:12:04]  build dev started ... 
[11:12:04]  clean started ... 
[11:12:04]  clean finished in 1 ms 
[11:12:04]  copy started ... 
[11:12:04]  deeplinks started ... 
[11:12:04]  deeplinks finished in 49 ms 
[11:12:04]  transpile started ... 
[11:12:07]  transpile finished in 2.39 s 
[11:12:07]  preprocess started ... 
[11:12:07]  preprocess finished in less than 1 ms 
[11:12:07]  webpack started ... 
[11:12:07]  copy finished in 3.11 s 
[11:12:11]  webpack finished in 4.74 s 
[11:12:11]  sass started ... 
[11:12:12]  sass finished in 953 ms 
[11:12:12]  postprocess started ... 
[11:12:12]  postprocess finished in 6 ms 
[11:12:12]  lint started ... 
[11:12:12]  build dev finished in 8.20 s 
[11:12:12]  watch ready in 8.24 s 
[11:12:12]  dev server running: https://:8100/ 

[OK] Development server running!
     Local: https://:8100
     External: http://192.168.1.20:8100
     DevApp: IonicAWS@8100 on Nikolas-MBP

[11:12:15]  tslint: src/providers/user.ts, line: 10 
            'aws_user_pools_web_client_id' is declared but never used. 

       L9:  declare const aws_user_pools_id;
      L10:  declare const aws_user_pools_web_client_id;

[11:12:15]  lint finished in 2.49 s

您的浏览器应该会打开，您应该会看到以下内容：

如果您创建一个帐户，您还需要输入发送到您提供的电子邮件地址的确认码。

现在应用程序已添加了一些任务，应该看起来像这样：

在“设置”->“帐户”中，您还可以更改您的个人资料图片。

将应用程序托管在 Amazon S3 上

由于我们的 Ionic 应用只是一个 Web 应用，因此可以将其作为静态网站托管在 Amazon S3 存储桶中。为此，请将 Web 资产复制到 S3 存储桶。

npm run build
aws s3 cp --recursive ./www s3://ionicaws-hosting-mobilehub-1643446370

您可以在控制台中找到指向您的应用程序的链接，该链接位于“Endpoint”下。

在我的例子中，该应用程序现已上线，网址为 http://ionicaws-hosting-mobilehub-1643446370.s3-website-us-east-1.amazonaws.com/。

如果您需要将大量数据同步到 S3，请查看本教程。

结论

在本教程中，我们学习了如何轻松创建使用 Ionic 框架且已连接到 AWS Mobile Hub 的入门项目。

历史

  • 2017年12月26日：初始版本
© . All rights reserved.