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 -y

Express 앱 생성

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 start

URL http://127.0.0.1:8080 또는 http://localhost:8080의 로컬 서버에서 시작합니다.

이 URL을 브라우저에 붙여넣기하면 다음과 같이 표시되어야 합니다.

gsg_build_elb_1

서버를 중단하기 위해 ctrl + c를 사용하여 npm start를 실행한 터미널 내 프로세스를 중단시킵니다. 

결론

이 첫 번째 모듈에서 우리는 가장 기본적인 NodeJS 애플리케이션을 구축하고 이를 로컬에서 실행하여 작동하는지 확인했습니다. 다음 모듈에서 우리는 AWS CDK를 사용하여 인프라를 생성하는 방법을 학습하여 이를 AWS Elastic Beanstalk에서 실행할 것입니다.

다음: 인프라 생성

내용이 마음에 드셨는지요.

피드백을 제공해 주셔서 감사합니다.
이 페이지가 도움이 되어 기쁩니다. 지속적인 개선에 도움이 되는 추가 세부 정보를 공유해 주시겠습니까?
닫기
피드백을 제공해 주셔서 감사합니다.
이 페이지가 도움이 되지 못해 죄송합니다. 지속적인 개선에 도움이 되는 추가 세부 정보를 공유해 주시겠습니까?
닫기