이것이 서버리스에 대한 나의 첫 경험이기 때문에 이 과정을 상기시키기 위해 기록하고 있습니다.
프로젝트를 빌드할 때 내 컴퓨터와 함께 서버를 실행합니다.
“Express”로 서버를 구현하고 “node”로 실행하는 방법.
하지만 이 경우 매번 실행하고 저장해야 하는 번거로움이 있다.
서버리스를 사용하여 이 문제를 해결할 수 있습니다.
“서버리스” 방법이 많이 있지만 여기서는 “AWS Lambda”를 사용합니다.
먼저 “Express”를 설치하고 서버를 배포해야 합니다.
npm i express서버를 구현하는 코드는 다음과 같습니다.
const express = require('express')
const app = express()
app.get('/', function (req, res) {
res.send('Hello World')
})
app.listen(3000)그런 다음 “Serverless”를 설치해야 합니다.
npm i serverless-http그런 다음 AWS Lambda를 생성하고 구성하기만 하면 됩니다.
1. “AWS Lambda”에 접속하여 회원가입을 하고 “AWS Lambda” 서비스의 기능 카테고리로 이동합니다.
2. 기능 이름과 노드 버전을 설정합니다.
3. 함수를 생성하면 다음과 같은 화면이 나타납니다.
4. 코드 소스의 백엔드 폴더를 압축하고 .zip으로 업로드합니다.
5. 위의 단계까지 설정을 완료했으면 AWS에서 CORS(Cross-Origin Resource Sharing) 구성을 허용해야 합니다.
설정으로 이동하여 프런트엔드를 구현하는 URL을 가져오고 입력하여 Cloudflare가 이 URL을 화이트리스트에 추가하도록 허용하기만 하면 됩니다.
6. 그런 다음 방법 방법의 권한을 설정할 수 있습니다.
예를 들어 POST, GET 등에 대한 권한을 설정할 수 있습니다.
7. 그런 다음 트리거를 추가합니다.
REST API 또는 HTTP API와 같은 API 유형을 추가할 수 있는 트리거에 API 게이트웨이를 추가할 수 있습니다.
여기에 REST API로 추가했습니다.
8. 트리거를 추가한 후 API 게이트웨이 범주 설정에서 API 유형을 생성해야 합니다.
API 게이트웨이 설정에서 아래와 같이 REST API 생성 버튼을 클릭합니다.
9. Create REST API 버튼을 클릭하여 아래와 같은 창이 뜨면 아래와 같이 프로토콜 선택, 신규 API 생성, 설정 부분을 선택하여 작성합니다.
원하는 대로 API 이름을 작성할 수 있습니다.
10. 구성이 완료되면 왼쪽 창에 다음과 같이 REST API 구성 정보가 나타납니다.
그런 다음 프록시에 대한 새 리소스를 만듭니다.
11. 리소스 생성 후 프록시 설정에서 아래와 같이 종류와 기능명을 입력합니다.
여기서는 AWS Lambda 함수 프록시를 사용합니다.
12. 프록시 설정을 모두 마쳤으면 이제 API를 제공해야 사용할 수 있습니다.
13. API 배포가 완료되면 왼쪽 메뉴의 스테이지 메뉴로 이동하여 서버 URL로 사용할 부분을 선택합니다.
즉, URL 호출을 복사하여 “localhost:3000″(HTML, React 등) 대신 프런트 엔드에 작성합니다.
여기까지 설정을 마치셨다면 기본 설정은 완료된 것입니다.
그러나 때때로 API 호출이 실패합니다.
실행 중에 CORS와 같은 오류가 발생할 수 있습니다.
오류가 발생하는 경우 API 호출 타임아웃이 짧은 경우일 수 있으므로 호출 타임아웃을 늘리고 다시 확인해야 합니다.
기본값은 3초이며, 15분으로도 설정할 수 있으니 원하는 시간으로 설정하고 확인하세요.
모든 설정이 완료되면 아래와 같이 설정을 확인할 수 있습니다.
“AWS Lambda”는 100만 요청에 대해 무료이므로 개인 미니 프로젝트에서 사용할 수 있습니다.
단, 해킹의 위험이 있을 수 있으니 AWS Google OTP 2차 보안을 꼭 사용하세요!
중단해야 함 잊지 마세요!
2차 보안이 필요합니다.
위와 같이 서버리스 구축을 완료한 후 프론트엔드 코드와 백엔드 코드를 다음과 같이 수정합니다.
- 프런트 엔드
const response = await fetch('~.amazonaws.com/prod/fortune', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
...
})
});
- 백엔드(추가 Cloudflare 설정)
const serverless = require('serverless-http');
const cors = require('cors')
const express = require('express')
const app = express()
// CORS 이슈 해결
let corsOptions = {
origin: 'Cloudflare URL',
credentials: true
}
app.use(cors(corsOptions));
//POST 요청 받을 수 있도록 설정
app.use(express.json())
app.use(express.urlencoded({ extended: true }))
app.post('/fortune', function (req, res) {
...
})
// app.listen(3000)
module.exports.handler = serverless(app);