VSCode, 로컬에서 Lambda 개발 환경 준비 -> 배포 -> AWS URL에서 확인까지의 단계
7840 단어 람다APIGatewayVSCodeNode.jsAWS
자기소개
우선은 간단한 자기 소개하겠습니다.
저는 지금까지 10년간 이상의 Web 개발 경험이 있어, 그 중에 4년간 정도 일본에서 개발해 왔습니다.
일본인이 아니기 때문에, 투고에 일본어의 문법이 이상한 곳이 있을지도 모릅니다.
기술적인 면을 주로 보실 수 있으면 좋을까 생각합니다.
이번 내용에 대한 간략한 설명
● VSCode를 이용하여 로컬로 Lambda(Node.js) 개발 환경 구축
● AWS Lambda에 소스 코드 배포
● AWS API Gateway 생성(프로토콜: HTTP)
● AWS API Gateway를 통해 생성된 URL로 화면 내용 확인
개발 폴더 초기화
절차는 다음과 같습니다.
①VSCode에서 새 폴더 열기
②npm 환경의 초기화(사전에 npm의 인스톨이 필요)
③aws sdk 설치
cd /Users/name/Documents/workspaces/lambda/nodejs/TestProject1/
npm init
npm install aws-sdk
코딩 및 배포를 위한 zip 파일 생성
샘플 소스 코드를 준비했으므로, 전체의 흐름을 체험하기 위해서, 코피페에서도 좋을까라고 생각합니다.
index.js'use strict'
let fs = require('fs')
let path = require('path')
exports.handler = (event, context, callback) => {
let filePath = path.join(__dirname, 'index.html')
let html = fs.readFileSync(filePath).toString()
sendHtmlResponse(context, 200, html)
}
// レスポンス
function sendHtmlResponse(context, statusCode, html) {
let response = {
'statusCode': statusCode,
'headers': {
'Content-Type': 'text/html'
},
'body': html
}
context.succeed(response)
}
HTML 파일 소스 코드
index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>テスト画面</title>
</head>
<body>
<h1>Hello World!</h1>
<p>メイン画面</p>
</body>
</html>
파일이 생성되면 프로젝트 폴더의 구조는 다음과 같아야합니다.
TestProject1/
├ node_modules/
├ index.html
├ index.js
├ package-lock.json
└ package.json
다음 명령으로 프로젝트 폴더를 압축합니다.
zip -r ../TestProjcet1.zip .
생성된 zip 파일은 프로젝트의 상위 폴더에 저장되어야 합니다.
AWS에서 새로운 Lambda 함수 생성 및 배포
처음부터 작성, 런타임(Node.js 12.x)이 기본값으로 유지되고 함수 이름만 입력하여 작성합니다.
만들 수 있으면 다음 화면이 표시됩니다. 업로드 소스 버튼을 클릭하고 zip 파일 선택을 클릭합니다.
그리고 업로드에 앞서 만든 zip 파일을 선택하여 저장합니다.
성공 메시지가 나오면 배포 작업이 완료되었습니다.
AWS API Gateway 생성
HTTP API를 구축합니다.
다음 화면 캡처와 같이 설정합니다. (API 이름을 좋아할 수 있습니다)
루트, 스테이지 설정은 기본값으로 유지됩니다.
만들면 다음과 같은 화면이 나타납니다.
AWS API Gateway에서 생성된 URL로 화면 내용 확인
위의 단계에 문제가 없으면 'URL 호출' 입력란의 링크를 복사하고 URL 끝에 Lambda 함수 이름을 연결하여 브라우저에서 액세스하고 만든 화면을 표시해야합니다.
연결 URL은 다음과 같습니다.
h tps : // / 홉 x. 네, 아빠. 아 p의 r ぇ아 st-1. 아마조나 ws. 코 m / stP 로지 ct1
xxxxxxx는 API Gateway의 API ID에 따라 다릅니다.
ap-northeast-1은 도쿄 지역입니다. AWS 리전에 따라 다릅니다.
이 단계에서는 aws-sdk를 설치하지 않아도 동일한 효과가 있지만, 실제로 개발할 때 AWS의 다른 서비스 사용을 단순화하기 위해 기본적으로 사용됩니다.
이상, 봐 주셔서 감사합니다!
Reference
이 문제에 관하여(VSCode, 로컬에서 Lambda 개발 환경 준비 -> 배포 -> AWS URL에서 확인까지의 단계), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/xingxing/items/a7824d4c987adee834a1
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
● VSCode를 이용하여 로컬로 Lambda(Node.js) 개발 환경 구축
● AWS Lambda에 소스 코드 배포
● AWS API Gateway 생성(프로토콜: HTTP)
● AWS API Gateway를 통해 생성된 URL로 화면 내용 확인
개발 폴더 초기화
절차는 다음과 같습니다.
①VSCode에서 새 폴더 열기
②npm 환경의 초기화(사전에 npm의 인스톨이 필요)
③aws sdk 설치
cd /Users/name/Documents/workspaces/lambda/nodejs/TestProject1/
npm init
npm install aws-sdk
코딩 및 배포를 위한 zip 파일 생성
샘플 소스 코드를 준비했으므로, 전체의 흐름을 체험하기 위해서, 코피페에서도 좋을까라고 생각합니다.
index.js'use strict'
let fs = require('fs')
let path = require('path')
exports.handler = (event, context, callback) => {
let filePath = path.join(__dirname, 'index.html')
let html = fs.readFileSync(filePath).toString()
sendHtmlResponse(context, 200, html)
}
// レスポンス
function sendHtmlResponse(context, statusCode, html) {
let response = {
'statusCode': statusCode,
'headers': {
'Content-Type': 'text/html'
},
'body': html
}
context.succeed(response)
}
HTML 파일 소스 코드
index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>テスト画面</title>
</head>
<body>
<h1>Hello World!</h1>
<p>メイン画面</p>
</body>
</html>
파일이 생성되면 프로젝트 폴더의 구조는 다음과 같아야합니다.
TestProject1/
├ node_modules/
├ index.html
├ index.js
├ package-lock.json
└ package.json
다음 명령으로 프로젝트 폴더를 압축합니다.
zip -r ../TestProjcet1.zip .
생성된 zip 파일은 프로젝트의 상위 폴더에 저장되어야 합니다.
AWS에서 새로운 Lambda 함수 생성 및 배포
처음부터 작성, 런타임(Node.js 12.x)이 기본값으로 유지되고 함수 이름만 입력하여 작성합니다.
만들 수 있으면 다음 화면이 표시됩니다. 업로드 소스 버튼을 클릭하고 zip 파일 선택을 클릭합니다.
그리고 업로드에 앞서 만든 zip 파일을 선택하여 저장합니다.
성공 메시지가 나오면 배포 작업이 완료되었습니다.
AWS API Gateway 생성
HTTP API를 구축합니다.
다음 화면 캡처와 같이 설정합니다. (API 이름을 좋아할 수 있습니다)
루트, 스테이지 설정은 기본값으로 유지됩니다.
만들면 다음과 같은 화면이 나타납니다.
AWS API Gateway에서 생성된 URL로 화면 내용 확인
위의 단계에 문제가 없으면 'URL 호출' 입력란의 링크를 복사하고 URL 끝에 Lambda 함수 이름을 연결하여 브라우저에서 액세스하고 만든 화면을 표시해야합니다.
연결 URL은 다음과 같습니다.
h tps : // / 홉 x. 네, 아빠. 아 p의 r ぇ아 st-1. 아마조나 ws. 코 m / stP 로지 ct1
xxxxxxx는 API Gateway의 API ID에 따라 다릅니다.
ap-northeast-1은 도쿄 지역입니다. AWS 리전에 따라 다릅니다.
이 단계에서는 aws-sdk를 설치하지 않아도 동일한 효과가 있지만, 실제로 개발할 때 AWS의 다른 서비스 사용을 단순화하기 위해 기본적으로 사용됩니다.
이상, 봐 주셔서 감사합니다!
Reference
이 문제에 관하여(VSCode, 로컬에서 Lambda 개발 환경 준비 -> 배포 -> AWS URL에서 확인까지의 단계), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/xingxing/items/a7824d4c987adee834a1
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
cd /Users/name/Documents/workspaces/lambda/nodejs/TestProject1/
npm init
npm install aws-sdk
샘플 소스 코드를 준비했으므로, 전체의 흐름을 체험하기 위해서, 코피페에서도 좋을까라고 생각합니다.
index.js
'use strict'
let fs = require('fs')
let path = require('path')
exports.handler = (event, context, callback) => {
let filePath = path.join(__dirname, 'index.html')
let html = fs.readFileSync(filePath).toString()
sendHtmlResponse(context, 200, html)
}
// レスポンス
function sendHtmlResponse(context, statusCode, html) {
let response = {
'statusCode': statusCode,
'headers': {
'Content-Type': 'text/html'
},
'body': html
}
context.succeed(response)
}
HTML 파일 소스 코드
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>テスト画面</title>
</head>
<body>
<h1>Hello World!</h1>
<p>メイン画面</p>
</body>
</html>
파일이 생성되면 프로젝트 폴더의 구조는 다음과 같아야합니다.
TestProject1/
├ node_modules/
├ index.html
├ index.js
├ package-lock.json
└ package.json
다음 명령으로 프로젝트 폴더를 압축합니다.
zip -r ../TestProjcet1.zip .
생성된 zip 파일은 프로젝트의 상위 폴더에 저장되어야 합니다.
AWS에서 새로운 Lambda 함수 생성 및 배포
처음부터 작성, 런타임(Node.js 12.x)이 기본값으로 유지되고 함수 이름만 입력하여 작성합니다.
만들 수 있으면 다음 화면이 표시됩니다. 업로드 소스 버튼을 클릭하고 zip 파일 선택을 클릭합니다.
그리고 업로드에 앞서 만든 zip 파일을 선택하여 저장합니다.
성공 메시지가 나오면 배포 작업이 완료되었습니다.
AWS API Gateway 생성
HTTP API를 구축합니다.
다음 화면 캡처와 같이 설정합니다. (API 이름을 좋아할 수 있습니다)
루트, 스테이지 설정은 기본값으로 유지됩니다.
만들면 다음과 같은 화면이 나타납니다.
AWS API Gateway에서 생성된 URL로 화면 내용 확인
위의 단계에 문제가 없으면 'URL 호출' 입력란의 링크를 복사하고 URL 끝에 Lambda 함수 이름을 연결하여 브라우저에서 액세스하고 만든 화면을 표시해야합니다.
연결 URL은 다음과 같습니다.
h tps : // / 홉 x. 네, 아빠. 아 p의 r ぇ아 st-1. 아마조나 ws. 코 m / stP 로지 ct1
xxxxxxx는 API Gateway의 API ID에 따라 다릅니다.
ap-northeast-1은 도쿄 지역입니다. AWS 리전에 따라 다릅니다.
이 단계에서는 aws-sdk를 설치하지 않아도 동일한 효과가 있지만, 실제로 개발할 때 AWS의 다른 서비스 사용을 단순화하기 위해 기본적으로 사용됩니다.
이상, 봐 주셔서 감사합니다!
Reference
이 문제에 관하여(VSCode, 로컬에서 Lambda 개발 환경 준비 -> 배포 -> AWS URL에서 확인까지의 단계), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/xingxing/items/a7824d4c987adee834a1
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
위의 단계에 문제가 없으면 'URL 호출' 입력란의 링크를 복사하고 URL 끝에 Lambda 함수 이름을 연결하여 브라우저에서 액세스하고 만든 화면을 표시해야합니다.
연결 URL은 다음과 같습니다.
h tps : // / 홉 x. 네, 아빠. 아 p의 r ぇ아 st-1. 아마조나 ws. 코 m / stP 로지 ct1
xxxxxxx는 API Gateway의 API ID에 따라 다릅니다.
ap-northeast-1은 도쿄 지역입니다. AWS 리전에 따라 다릅니다.
이 단계에서는 aws-sdk를 설치하지 않아도 동일한 효과가 있지만, 실제로 개발할 때 AWS의 다른 서비스 사용을 단순화하기 위해 기본적으로 사용됩니다.
이상, 봐 주셔서 감사합니다!
Reference
이 문제에 관하여(VSCode, 로컬에서 Lambda 개발 환경 준비 -> 배포 -> AWS URL에서 확인까지의 단계), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/xingxing/items/a7824d4c987adee834a1텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
