[Vue] 11 - Amplify: CI/CD Pipeline

Ref: [AWS] Amazon Cognito

最终的目的是：Vue结合Cognito，搞一个简单的登录功能。

跟着教程，一步一步来，构建完整的网页开发。

 

构建CI/CD

废话颇多印度口音：Getting started with vuejs + aws-amplify

一、准备项目和Amplify

$ npm install -g @aws-amplify/cli
$ amplify configure

自动打开浏览器网页，登录，进入 AWS Management Console。

 

配置AWS Region, User name。

  

默认点击下去：

User and Access key ID

  

重返终端，输入上图获得的key值。

 

npm install -g @vue/cli

开始创建一个新的vue项目。

  

二、配置Amplify

$ amplify init

在aws上做了一些基本的vue配置。

Some next steps:

"amplify status" will show you what you've added already and if it's locally configured or deployed
"amplify add <category>" will allow you to add features like user login or a backend API
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify console" to open the Amplify Console and view your project status
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

Pro tip:
Try "amplify add api" to create a backend API and then "amplify publish" to deploy everything

 

 

 

$ amplify add hosting

Are you sure you want to continue? Yes.

Updating resources in the cloud. This may take a few minutes...

Vue.js的默认"静态页面"放在了s3上，可通过链接打开。

  

三、配置GIT工程代码

Step 1: Add repository service

Step 2: Add repository branch

Step 3: Configure build settings

 

选择：Create new environment.

点击：Create new role

 

Policy name: AdministratorAccess 

 

创建role后，就可以选了，继续这个流程。

 

In a nutshell, 配置了 repo 和 App settings.

 

四、Pipeline

将整个项目，流程化，形成 pipeline。

CI/CD的过程，提交代码，自动编译，直接看到结果。

 

 

 

Setting Up Custom Domain

没有域名，看上去“不正式”。所以，这里我们解决这个问题。

进入Service: Route 53，注册域名。

 

AWS Amplify --> Domain management

可见，domain与git branch的对应关系。

Add  domain --> 在Domain中配置新的网址访问网页。

 

End.