Amplify CLI를 사용하여 로컬에서 AWS 추출

Amplify CLI를 사용하여 REST API 및 정적 컨텐트 서버를 시작합니다.
로컬 환경에서 실행, 디버깅 확인 후 AWS에서 디버깅을 수행합니다.
로컬 환경의 디버깅에서, node.js 및 Visual Studio Code를 사용합니다.
AWS에는 API Gateway, Lambda, S3이 사용됩니다.
위의 다리는 Amplify CLI를 사용합니다.
이번에는 Amplify 가 아닌 Amplify CLI 를 사용합니다.
왜냐면 앰플리파이는 자동화하는 방법이 많지만 뭘 하는지 몰라서 장기간 유지보수가 어렵고 버그가 발생할 수도 있어요.
따라서 Amplify CLI를 사용해 API Gateway, Lambda, S3를 하나씩 제작한다.
또 앰플리파이로 구축하면 지금까지 S3, API Gateway, 람다에 흩어져 있던 부품군이 앰플리파이에 집중돼 있어 취합이 용이한 편이다.
목표 형식은 다음과 같다.

AWS 측은 HTML, CSS, 자바스크립트 등 정적 콘텐츠를 S3에 구성해 공개하는 전형적인 구성으로, 웹API는 API Gateway를 통해 램바다로 처리하는 구조다.
앞에서 클라우드 Front를 설정하면 비이실성 데이터용 다이나마이드를 설정할 수도 있지만 이번에는 가장 간단한 구성으로 생략할 것을 구상했다.
AWS Lambda에서의 디버깅은 상당히 번거롭기 때문에 로컬 PC에 설치된 Node입니다.디버깅을 위해 js 및 Visual Studio Code를 사용하여 중단점을 삽입할 수 있습니다.
AWS 측과 로컬 실행 환경이 연결되도록 도구 종류를 GiitHub로 향상시켰습니다.이후 이를 토대로 설명할 예정이다.
poruruba/amplify_template
차리다
이것은 아래의 준비를 잘 하는 전제 조건이다.기사에 공개되는 자원봉사자가 많아 참고로 시행한다.
· AWS 계정 보유
• AWS CLI가 설치되어 있습니다.
• AWS의 신용등급 설정 (aws configure 실행)
· 로컬 컴퓨터 노드.js 설치
• Amplify CLI 설치됨(npm install-g@aws-amplify/cli의 실행임)
그나저나 앞으로는 노드입니다.js v12.22.5가 실시되었다.
환경 구조
우선 프로젝트로서의 환경을 구축한다.
아래 GiitHub에서 ZIP를 다운로드하여 해당 이름의 폴더로 확장합니다.예를 들면 "amplify sample"같은 거요.

> unzip amplify_template-main.zip
> mv amplify_template-main amplify_sample
> cd amplify_sample
> npm install

일단, 그것뿐이야, Node.js 서버를 시작할 수 있습니다.

> npm run start

포트 번호는 기본적으로 20080입니다.env 파일을 생성합니다. 아래와 같이 수정할 수 있습니다.

PORT=80

브라우저에서 열면 공공 폴더의 내용을 표시합니다.
　 http://localhost:20080
이제 Amplify를 활용할 수 있도록 준비하십시오.
amplify init 입니다.

> amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project amplifysample
The following configuration will be applied:

Project information
| Name: amplifysample
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: none
| Source Directory Path: src
| Distribution Directory Path: dist
| Build Command: npm.cmd run-script build
| Start Command: npm.cmd run-script start

? Initialize the project with the above configuration? Yes
Using default provider  awscloudformation
? Select the authentication method you want to use: AWS profile
? Please choose the profile you want to use default
Adding backend environment dev to AWS Amplify app: d2le0i19kwl1xp
- Initializing project in the cloud...
√ Successfully created initial AWS cloud resources for deployments.
√ Initialized provider successfully.
Initialized your environment successfully.

Your project has been successfully initialized and connected to the cloud!

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 push" to deploy everything

이렇게 되면 src,amplify라는 폴더가 추가됩니다.중요한 것은 후자다.
※.gitignore도 고칠 수 있으니 주의하세요.
AWS의 웹 관리 콘솔도 Amplify 애플리케이션을 제작했습니다.
이번 상황은 amplify sample이 아닐까 싶습니다.
　 https://ap-northeast-1.console.aws.amazon.com/amplify/home?region=ap-northeast-1#/
api와function 만들기
Amplify로 api와 function을 만듭니다.
api는 API Gateway, function은 Lambda를 말합니다.
REST냐 GraphiQL이냐는 질문에 익숙한 REST를 선택한다.
이번엔/sample-get이라는 이름의 HTTP Get을 만들어 보자.
amplify add api 입니다.

> amplify add api
? Select from one of the below mentioned services: REST
√ Provide a friendly name for your resource to be used as a label for this category in the project: · apiXXXXXXXX
√ Provide a path (e.g., /book/{isbn}): · /sample-get
Only one option for [Choose a Lambda source]. Selecting [Create a new Lambda function].
? Provide an AWS Lambda function name: amplifysamplefXXXXXXXX
? Choose the runtime that you want to use: NodeJS
? Choose the function template that you want to use: Hello World

Available advanced settings:
- Resource access permissions
- Scheduled recurring invocation
- Lambda layers configuration
- Environment variables configuration
- Secret values configuration

? Do you want to configure advanced settings? No
? Do you want to edit the local lambda function now? No
Successfully added resource amplifysampleXXXXXXXX locally.

Next steps:
Check out sample function code generated in <project-dir>/amplify/backend/function/amplifysampleXXXXXXXX/src
"amplify function build" builds all of your functions currently in the project
"amplify mock function <functionName>" runs your function locally
To access AWS resources outside of this Amplify app, edit the C:\Users\XXXXX\Documents\Node_Projects\amplify_sample\amplify\backend\function\amplifysampleXXXXXX\custom-policies.json
"amplify push" builds all of your local backend resources and provisions them in the cloud
"amplify publish" builds all of your local backend and front-end resources (if you added hosting category) and provisions them in the cloud
✅ Succesfully added the Lambda function locally
√ Restrict API access? (Y/n) · no
√ Do you want to add another path? (y/N) · no
✅ Successfully added resource apie7e19083 locally

✅ Some next steps:
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

앰플리파이의 이름을 물었지만 묵인 제안의 이름을 먼저 썼다.
위에서 설명한 대로 API Gateway와 Lambda가 로컬 폴더에 준비되어 있지만 AWS에서는 아직 확장되지 않았습니다.
또한 종단점을 추가하거나 기존 Lambda를 새로 추가한 종단점에 추가하려면 "amplify add api"를 사용할 수 있습니다.
로컬 환경에서 디버깅 수행
AWS에 들어가기 전에 먼저 로컬 환경에서 작업을 확인합니다.
Visual Studio Code를 사용하여 열어 보십시오.

그런 다음 실행 및 디버그 버튼, Node 를 누릅니다.js를 선택하면 Node입니다.js 서버가 시작됩니다.

그러면 방금 만든 로컬 폴더의 람다는 amplify\backend\function라는 폴더 아래에 설정됩니다.적당한 이름의 폴더가 있어야 한다.
끝점/sample-get의 Lambda입니다.amplify\backend\api\[api名]\cli-inputs.json를 통해 어느 폴더가 어느 노드에 해당하는지 확인할 수 있습니다.
Lambda 폴더의 src 폴더에서 swagger.만들다AWS에 업로드할 때는 필요하지 않지만 로컬 실행 시 끝점 정보를 참조하십시오.
amplify\backend\function\XXXXX\src\swagger.yaml

paths:
  /sample-post:
    get:
      responses:
        200:
          description: Success
          schema:
            type: string

다시 시작하면 컨트롤러에 단점이 추가된 것을 발견할 수 있다.

> [email protected] start C:\Users\XXXXX\Documents\Node_Projects\amplify_sample
> node app.js

THIS_BASE_PATH: C:\Users\XXXXX\Documents\Node_Projects\amplify_sample
/swagger get handler {"operationId":"endpoints","func_type":"normal","content_type":"application/json","handler":"handler","files":[],"method":"get"}
/cron get handler {"operationId":"endpoints","func_type":"normal","content_type":"application/json","handler":"handler","files":[],"method":"get"}
/mqtt get handler {"operationId":"endpoints","func_type":"normal","content_type":"application/json","handler":"handler","files":[],"method":"get"}
/sample-get get handler {"operationId":"amplifysampleXXXXXXXX","func_type":"normal","content_type":"application/json","handler":"handler","files":[],"method":"get"}
BasePath: /
can not load mqtt
can not load https
http PORT=20080

브라우저에서 http://localhost:20080/sample-get를 열면 다음 문자열이 반환됩니다.

"Hello from Lambda!"

물론 Visual Studio Code에서 실행하면 중단점을 켜도 중지됩니다.
AWS에서 디버깅
그럼 드디어 AWS에서 디버깅을 진행하겠습니다.
"amplify push"만 실행합니다.

> amplify push
√ Successfully pulled backend environment dev from the cloud.

    Current Environment: dev

┌──────────┬───────────────────────┬───────────┬───────────────────┐
│ Category │ Resource name         │ Operation │ Provider plugin   │
├──────────┼───────────────────────┼───────────┼───────────────────┤
│ Function │ amplifysampleXXXXxXXX │ Create    │ awscloudformation │
├──────────┼───────────────────────┼───────────┼───────────────────┤
│ Api      │ apiXXXXXXXX           │ Create    │ awscloudformation │
└──────────┴───────────────────────┴───────────┴───────────────────┘
? Are you sure you want to continue? Yes
- Updating resources in the cloud. This may take a few minutes...
・・・
√ All resources are updated in the cloud

REST API endpoint: https://XXXXXXXXXX.execute-api.ap-northeast-1.amazonaws.com/dev

마지막으로 구축된 API Gateway의 URL이 표시됩니다.브라우저에서 아래를 열면 같은 대답을 할 것입니다.
　 https://XXXXXXXXXX.execute-api.ap-northeast-1.amazonaws.com/dev/sample-get
추가된 람바다는 관리 콘솔의 암플리파이 페이지와 람바다 페이지에서 확인할 수 있다.
람바다는 앱으로 관리되기 때문에 관리가 용이하다.
정적 컨텐츠 증가
그런 다음 S3에 HTML 같은 정적 내용을 업로드합니다.
다음을 수행하여 정적 컨텐트 향상을 위한 기기 S3을 준비할 수 있습니다.
amplify add hosting 입니다.

> amplify add hosting
? Select the plugin module to execute Amazon CloudFront and S3
? Select the environment setup: DEV (S3 only with HTTP)
? hosting bucket name amplifysample-XXXXXXXXXXXXXX-hostingbucket
? index doc for the website index.html
? error doc for the website index.html

You can now publish your app using the following command:
Command: amplify publish

Amplify Constore로 했느냐는 질문에 이렇게 하면 AWS 내부에서 무엇을 하고 있는지 알 수 없기 때문에 Amazon CloudFront and S3를 선택했다.
그리고 S3only냐, S3with CloudFront냐는 질문에 이번에는 단순한 S3만 선택했다.그나저나 추가할 수 있는 hosting은 하나밖에 없어요.
실제 내용은 dist 폴더에 넣은 것이 업로드되기 때문에 npm 스크립트 'npm run build' 로 공공 폴더의 내용을 dist 폴더로 복사합니다.
그러면 다음 Amplify 명령을 실행하면 그 스크립트를 호출한 후 디스트 폴더의 내용을 S3로 올립니다.
amplify publish입니다.

> amplify publish
√ Successfully pulled backend environment dev from the cloud.

    Current Environment: dev

┌──────────┬───────────────────────┬───────────┬───────────────────┐
│ Category │ Resource name         │ Operation │ Provider plugin   │
├──────────┼───────────────────────┼───────────┼───────────────────┤
│ Hosting  │ S3AndCloudFront       │ Create    │ awscloudformation │
├──────────┼───────────────────────┼───────────┼───────────────────┤
│ Function │ amplifysampleXXXXXXXX │ No Change │ awscloudformation │
├──────────┼───────────────────────┼───────────┼───────────────────┤
│ Api      │ apiXXXXXXXX           │ No Change │ awscloudformation │
└──────────┴───────────────────────┴───────────┴───────────────────┘
? Are you sure you want to continue? Yes
・・・
√ All resources are updated in the cloud

Hosting endpoint: http://amplifysample-XXXXXXXXXXXXXX-hostingbucket-dev.s3-website-ap-northeast-1.amazonaws.com

>[email protected] build C:\Users\XXXXX\Documents\Node_Projects\amplify_sample
> node scripts/copyall.js

copy /public to /dist
frontend build command exited with code 0
Publish started for S3AndCloudFront
√ Uploaded files successfully.
Your app is published successfully.
http://amplifysample-XXXXXXXXXXXXXX-hostingbucket-dev.s3-website-ap-northeast-1.amazonaws.com

완료되면 마지막으로 URL이 표시되고 브라우저에서 열립니다.
공공 폴더의 내용을 표시합니다.다만, 이 URL은 HTTP이므로 HTTPS에서 열려고 합니다.
이 경우 다음 내용으로 바꿔 주세요.(미묘한 호스트 이름이 다르다)
　 https://amplifysample-XXXXXXXXXXXXXX-hostingbucket-dev.s3.ap-northeast-1.amazonaws.com/index.html
주요 Amplify CLI 명령
지금까지 발표된 Amplify CLI 명령을 요약합니다.
amplify init
• Amplify 준비.우선 집행하다.
amplify add api
・ API Gateway에 끝점을 생성하고 Lambda와 연결합니다.상황에 따라 기존 API Gateway에 끝점을 추가하거나 기존 람바다와 연결합니다.
amplify update api
・ 끝점을 추가하거나 제거합니다.
amplify remove api
· API Gateway 삭제
amplify add function
· 램바다 추가.
amplify remove function
· Lambda를 삭제합니다.
amplify add hosting
・정적 콘텐츠를 추가할 수 있는 S3 설정.
amplify remove hosting
· 정적 내용에 대한 S3 설정을 삭제합니다.
amplify push
・AWS에는 api, function, hosting의 조작 결과가 반영되어 있다.
amplify publish
· S3에 정적 내용을 올립니다.
끝맺다
다음은 DynamoDB와 맞춤형 트리거를 시도해 보고 싶습니다.
이상