嘿,wassup,欢迎!我是罗修斯

在本博客系列中,我将向您展示如何构建无服务器报纸 Web 应用程序并将其托管到具有完整持续集成/持续部署管道的云中。

我们将使用 AWS 服务,例如 Amplify、CDK(云开发工具包)和 VueJs/NuxtJs Web 框架。

AWS Amplify 控制台提供了一个基于 Git 的工作流程,用于部署和托管全栈无服务器 Web 应用程序。全栈无服务器应用程序由使用云资源(如 GraphQL 或 REST API、文件和数据存储)构建的后端和使用单页应用程序框架(如 React、Angular、Vue 或 Gatsby)构建的前端组成。

先决条件

我假设您了解 Amplify、CDK 和 Vue 的基础知识。

这是我提供的一些教程,它们将帮助您启动并运行上述技术

• 使用 Amplify、VueJs/NuxtJs 和 GraphQL 构建无服务器应用程序

• CDK 管道:AWS CDK 应用程序的持续交付

• 在 AWS 上使用 CDK、Python、AppSync 和 DynamoDB 构建 GraphQL API

• 节点包管理器(NPM),这里按照的说明进行安装。

• AWS CLI安装和配置具有管理员权限

安装 AWS CDK 工具包

AWS CDK 工具包和 CLI 是与您的 AWS CDK 应用程序交互的主要工具。它将用于将 CDK 代码部署到目标 AWS 环境。要安装,请使用以下命令。

npm install -g aws-cdk

以下是托管应用程序的屏幕截图,以便您准确了解最终产品的外观。

测试

我无法在此处共享实时应用程序链接,因为我在完成并测试应用程序后删除了堆栈。

在为使用过的资源付费时,亚马逊不参与,这是完全正常的。即使我已将我的计费门槛设置为 1 美元😂,是的.. 我就是这么便宜,但我仍然删除了该应用程序。

但这是成功部署 CI/CD 的屏幕截图。

简介

此应用程序可以在 AWS Amplify 上构建和托管,而无需使用 AWS 云开发工具包 (CDK)。但是,我们将使用 AWS CDK 开发在 Amplify 上托管应用程序所需的基础设施和配置。

使用 AWS CDK 部署基础设施使开发运营团队能够: - 标准化基础设施组件; - 以可重复的方式部署并使用熟悉的编程语言进行开发。提供网站托管服务的托管服务提供商也将受益于跨不同客户的多个 Amplify 应用程序的自动部署和管理。

应用架构

上图显示了 AWS 服务以及使用 Amplify 和 CDK 部署应用程序所涉及的步骤。

• 第一步是将我们的应用程序提交到代码存储库,如 Gitlab、Github (1a) 或 AWS CodeCommit (1b)

注意:目前不支持使用 CDK 从 BitBucket 中的源代码创建 Amplify 应用程序。要连接到 BitBucket 存储库,请使用 Amplify 控制台。

• 使用 python 设置 AWS CDK。构建 CDK 代码并将其部署到目标 AWS 区域以创建 Amplify 应用程序。

• CDK 代码将转换为 CloudFormation 模板,该模板将部署在目标区域以创建 Amplify 应用程序。

• 任何后续提交都将触发 Amplify 持续部署管道,该管道将从 Github (4a) 分叉代码。

• 我们将使用 AWS Secrets Manager 存储个人访问令牌 (4b),该令牌提供 Amplify 访问存储库的权限。

• Amplify 将生成一个可共享的 URL,可用于从 Internet 访问应用程序。它还提供了使用 Amplify 颁发的 SSL 证书配置自定义域的灵活性。

创建 Nuxt 应用

让我们从创建一个 nuxt 应用开始。

npx create-nuxt-app newspaperApp

我将我的项目命名为报纸应用程序。当脚本完成运行并且您设置了所有默认值时,从应用程序根目录运行它

npm run dev

使用 AWS CDK 构建基础设施

在报纸应用程序文件夹中创建一个名为 amplify-infra 的文件夹。

在该文件夹中初始化 cdk (amplify-infra)

我们将使用 python 构建 cdk 应用程序。

cdk init --language python

cdk 应用程序的 python 代码存储在 amplify-infra-stack.py

当你用 CDK 初始化一个 python 应用程序时,它带有一个虚拟环境。虚拟环境充当应用程序所有依赖项的主机。这可以防止您的应用程序与系统上的其他应用程序之间的依赖关系冲突。

为了安装 CDK 放大结构,我们需要激活虚拟环境。

从 amplify-infra 的根目录运行以下命令。

对于 MacOS

source .venv/bin/activate

对于 Windows

% .venv\Scripts\activate.bat

激活后,通过运行以下命令安装放大 CDK 结构

pip install aws-cdk.aws-amplify

另外,运行以下命令安装setup.py文件中的所有依赖项

python -m pip install -r requirements.txt

在 requirements.txt 中冻结您的依赖项

对于 MacOs

python -m pip freeze | grep -v '^[-#]' > requirements.txt

对于 Windows

python -m pip freeze | findstr /R /B /V "[-#]" > requirements.txt

在 IDE 中打开项目并导航到 amplify_infra_stack.py 文件。

输入以下代码

from aws_cdk import core as cdk

import aws_cdk.aws_codebuild as codebuild
import aws_cdk.aws_amplify as amplify



# For consistency with other languages, `cdk` is the preferred import name for
# the CDK's core module.  The following line also imports it as `core` for use
# with examples from the CDK Developer's Guide, which are in the process of
# being updated to use `cdk`.  You may delete this import if you don't need it.
from aws_cdk import core


class AmplifyInfraStack(cdk.Stack):

    def __init__(self, scope: cdk.Construct, construct_id: str, **kwargs) -> None:
        super().__init__(scope, construct_id, **kwargs)

        amplify_app = amplify.App(self, "newspaper-app",
           source_code_provider=amplify.GitHubSourceCodeProvider(
        owner=<GITHUB-USER-NAME>,
        repository=<GITHUB-REPO>,
        oauth_token=cdk.SecretValue.secrets_manager(<personal access token>)),


            )
        amplify_app.add_branch("master")

这段代码的作用是,它总是会从 GitHub 获取应用程序的最新提交,从中创建云形成模板并将其发送到放大控制台以进行 CI/CD 部署。我假设你已经在 Github 上创建了一个存储库,请用你的字符串替换,Github repo 用你的和你的。它们都应该是字符串。

如果您不知道如何创建密钥,请不要担心,我知道了。在下面的文章中很详细。

• CDK 管道:AWS CDK 应用程序的持续交付

通过运行构建应用程序并将其部署到放大控制台

npm run build 
cdk synth
cdk deploy

我假设您仍然激活了虚拟环境。

创建放大应用程序

在 newspaperApp 目录中创建一个名为 amplify.yml 的文件并输入以下配置。 Amplify 需要此文件中的命令,才能成功构建和部署我们的应用程序。

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:

        - npm run generate
        - npm run build
  artifacts:
    baseDirectory: dist
    files:
      - "**/*"
  cache:
    paths:
      - node_modules/**/*

下面的这两个命令将构建并生成包含我们可部署应用程序的文件夹 dist。

  - npm run generate
  - npm run build

在 amplify-infra 目录中,使用已激活的虚拟环境,运行以下命令

npm run build
cdk synth
cdk deploy

测试

对存储库的新提交将自动触发 Amplify 持续部署管道以将更改部署到应用程序。要使用应用程序对此进行测试,请通过修改“pages”文件夹下的“index.vue”文件在 Nuxt 应用程序的登录页面中添加文本。

之后提交您的代码,并在放大控制台中观察它的自动构建和部署。 单击提供的链接以查看您的实时应用程序。

如果您遇到任何问题,请复制日志并进行谷歌搜索。

结论

在这篇博文中,我们介绍了开始使用 AWS CDK 部署 Amplify 应用程序的步骤,我们将扩展它以使用 Amplify CLI 和 Amplify Libraries 构建一个全栈应用程序。

我真的希望我足够清晰和简洁,请让我知道您对此的看法。

第 2 部分见。

保持安全✌🏿

参考文献:

aws.amazon.com/blogs/mobile/deploying-a-sta..docs.aws.amazon.com/cdk/latest/guide/cdk_pi..