AWS Elastic Beanstalk에서 웹 앱 배포
시작 안내서
모듈 1: 웹 애플리케이션 구축
이 모듈에서는 NodeJS 웹 애플리케이션을 생성하고 로컬에서 실행합니다.
소개
비컨테이너식 애플리케이션을 생성하고 클라우드에 배포합니다. 이 예제에서는 웹 애플리케이션을 구축하기 위해 NodeJS를 사용합니다.
해당 웹 애플리케이션은 정적 HTML 파일을 서비스하며 REST API 엔드포인트를 포함하는 단순한 웹 앱 서버입니다. 이 안내서는 웹 애플리케이션 구축 방법을 교육하는 데에 중점을 두는 대신, 예제 애플리케이션을 자유롭게 사용하거나 스스로 구축하기를 권장합니다. 이 안내서는 NodeJS 사용에 집중하지만 사용자는 Elastic Beanstalk가 지원하는 다른 프로그래밍 언어(Java, .NET, NodeJS, PHP, Ruby, Python, Go 및 Docker 등)를 사용하는 유사 웹 앱 또한 구축할 수 있습니다.
로컬 컴퓨터 또는 AWS Cloud9 환경에서 구현할 수 있습니다.
배우게 될 내용
- HTML 파일을 서비스하는 단순한 REST API를 포함하는 단순한 NodeJS 웹 앱 개발
- 애플리케이션을 로컬에서 실행
완료 시간
10분
모듈 선행 조건
- 관리자 수준의 액세스 권한이 있는 AWS 계정**
- 권장 브라우저: 최신 버전의 Chrome 또는 Firefox
[**]생성된 지 24시간이 지나지 않은 계정은 이 자습서를 완료하는 데 필요한 서비스에 액세스할 권한이 아직 없을 수 있습니다.
구현
클라이언트 앱 생성
첫 번째 단계는 애플리케이션에 대한 새 디렉터리를 생성하는 것입니다.
mkdir my_webapp
cd my_webapp그런 다음 NodeJS 프로젝트를 초기화할 수 있습니다. 이 단계는 NodeJS 애플리케이션의 모든 정의를 포함하는 package.json 파일을 생성합니다.
npm init -yExpress 앱 생성
Express를 웹 애플리케이션 프레임워크로 사용합니다. 이를 사용하기 위해 Express를 NodeJS 프로젝트에 종속 항목으로서 설치해야 합니다.
npm install express이 명령을 실행한 후에 package.json 파일에 종속 항목이 나타나는 것을 볼 수 있습니다. 또한 node_modules 디렉터리와 package-lock.json 파일이 생성됩니다.
이제 app.js라는 이름의 새 파일을 생성할 수 있습니다. 이 파일은 NodeJS Express 서버가 상주할 비즈니스 로직을 포함합니다.
이제 몇 개의 코드를 추가할 준비가 되었습니다. 추가해야 하는 첫 번째 요소는 앱에 대한 종속 항목으로, 이 경우에 Express는 이전에 설치한 모듈을 사용할 수 있도록 허용한 다음 코드를 추가하여 웹 서버를 시작합니다. 포트 8080을 사용하는 웹 서버를 지정할 것이며, 이 서버는 Elastic Beanstalk를 기본값으로 사용합니다.
var express = require('express');
var app = express();
var fs = require('fs');
var port = 8080;
app.listen(port, function() {
console.log('Server running at http://127.0.0.1:', port);
});이제 애플리케이션을 시작할 수 있으나, 요청을 처리하기 위한 어떤 코드도 정의하지 않았으므로 아직 아무 것도 하지 않습니다.
REST API 생성
이제 HTTP REST API 호출에 대한 응답을 서비스할 코드를 추가합니다. 첫 API 호출을 생성하기 위해 다음 코드를 포트 정의와 서버 시작 지점 사이에 추가합니다.
var express = require('express');
var app = express();
var fs = require('fs');
var port = 8080;
// New code
app.get('/test', function (req, res) {
res.send('the REST endpoint test run!');
});
app.listen(port, function() {
console.log('Server running at http://127.0.0.1:%s', port);
});이는 단순히 /test 엔드포인트를 코드에 연결하는 방법을 설명합니다. 다른 응답 또는 특정 작업을 수행하는 코드를 추가할 수 있으나 해당 항목은 이 안내서가 다루는 범위를 벗어납니다.
HTML 콘텐츠 서비스
우리의 Express NodeJS 애플리케이션은 정적 웹 페이지도 서비스합니다. 예제로 사용하기 위해 HTML 페이지를 생성해야 하므로 index.html.라는 이름의 파일을 생성합니다.
이 파일에는 다음의 REST 엔드포인트에 대한 링크를 포함하는 HTML을 추가합니다. 이 항목은 백엔드 연결 방법을 보기 위해 앞서 생성했습니다.
<html>
<head>
<title>Elastic Beanstalk App</title>
</head>
<body>
<h1>Welcome to the demo for ElasticBeanstalk</h1>
<a href="/test">Call the test API</a>
</body>
</html>이 HTML 페이지를 Express 서버에서 서비스하기 위해 호출 시 /path를 렌더링할 코드를 몇 가지 추가해야 합니다. 이를 위해 /test 호출 위에 다음 코드를 추가합니다.
app.get('/', function (req, res) {
html = fs.readFileSync('index.html');
res.writeHead(200);
res.write(html);
res.end();
});이 코드는 앱의 루트(/)에 대한 요청이 생성된 시기와 상관없이 index.html 파일을 서비스합니다.
코드를 로컬에서 실행
애플리케이션을 실행하고 로컬에서 작동하는지 확인할 준비가 되었습니다. 이를 위해 package.json와 스크립트를 업데이트하여 실행하기 용이하게 할 것입니다. package.json 파일에서 스크립트 섹션을 다음으로 교체합니다.
"scripts": {
"start": "node app.js"
},이제 터미널로 이동하여 다음을 실행할 수 있습니다.
npm startURL http://127.0.0.1:8080 또는 http://localhost:8080의 로컬 서버에서 시작합니다.
이 URL을 브라우저에 붙여넣기하면 다음과 같이 표시되어야 합니다.
서버를 중단하기 위해 ctrl + c를 사용하여 npm start를 실행한 터미널 내 프로세스를 중단시킵니다.