이번 포스팅에서는 직접 간단한 express 웹서버를 구축하여 코드를 AWS에 업로드, 업데이트 배포하는 법을 알아보겠습니다.
터미널에 다음과 같은 명령어를 쳐 환경 구성을 해줍니다.
$ mkdir hello-beanstalk
$ cd hello-beanstalk
$ npm init -y
$ npm i -S express
$ touch index.js
후에 index.js
파일에 다음과 같은 코드를 적어줍니다.
const express = require("express");
const app = express();
app.get("/", (req, res) => {
res.send("Hello Beanstalk!");
});
app.listen(80);
그리고 package.json
에 start
스크립트를 적어줍니다.
{
"name": "hello-beanstalk",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node index.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.17.1"
}
}
자 이제 코드 작성은 끝났습니다! 너무 쉽죠?
먼저 서버 루트 폴더에 들어가 index.js
와 package.json
파일 두개를 선택하여 압축해줍니다.
이렇게 압축해줍니다! (파일명은 원하시는 명으로 해주세요🙂)
그리곤 우리가 만들었던 Beanstalk 콘솔에 들어가줍니다.
가운데에 업로드 및 배포 버튼이 보이시나요? 버튼을 눌러 애플리케이션 업로드 - 파일 선택으로 압축한 파일을 업로드해서 배포해주세요!
그러면 다음과 같이 AWS에서 열심히 여러분이 작성하신 코드를 업로드하고 있는 상태를 보실 수 있습니다.
빈스톡에서 자체적으로 업로드 된 코드의 압축을 풀고, npm install 후에 npm start를 하여 코드를 실행합니다.
업데이트가 완료된 후에 다시 링크를 클릭하여 들어가주세요. Hello Beanstalk!
이라는 문구가 잘 보이시나요?
아마 원하는 결과가 나오지 않고 502 Bad Gateway를 보실겁니다. 당황하지 마세요.
배포 업데이트중에 에러가 났을 때 빈스톡에서 어떻게 대처해야할 지 알아보겠습니다.
왼쪽 사이드 메뉴에서 HelloBeanstalk-env - 로그 메뉴를 들어가봅시다.
로그 메뉴에서 오른쪽 상단에 로그 요청 - 마지막 100줄 버튼을 눌러 인스턴스에 일어난 사고를 조회해 볼까요? 빈스톡에서 Nginx, Stdout Console 등 트러블 슈팅에 용이한 로그들의 마지막 100줄씩 가져와줍니다. 다운로드
버튼을 눌러 확인해봅니다.
이런! node.js.log
를 살펴보니 80번 포트를 사용할 권한이 없다고 하네요. 실제로 리눅스 서버에서는 루트 권한을 가진 유저만이 Well-known 포트(0~1023)에 접근 가능합니다.
따라서 보통 NodeJs는 3000 포트에서 웹 서버를 열고 프록시 서버를 이용하여 80번 포트 접근 시 포트포워딩을 통해 3000번 포트로 이동시킵니다. 이를 해결하기 위해 nginx 포트포워딩 설정을 해주어야겠습니다.
빈스톡의 구성 설정을 코드 상에서 컨트롤해줄 수 있는 방법이 있습니다.
루트 폴더에 .ebextensions
폴더를 만들고 해당 폴더 안에 config 파일을 정의해주는 겁니다. 실습으로 이해해볼까요?
hello-beanstalk
루트 폴더에서 터미널을 열고 다음 명령어를 입력합니다.
$ mkdir .ebextensions
$ cd .ebextensions
$ touch proxy.config
그리고 proxy.config
파일에 다음과 같은 내용을 복사하여 붙여넣습니다. (사실 파일명은 상관 없고 확장자가 config
이면 다 인식합니다.)
files:
/etc/nginx/conf.d/proxy.conf:
mode: "000644"
owner: root
group: root
content: |
upstream nodejs {
server 127.0.0.1:3000;
keepalive 256;
}
server {
listen 8080;
if ($time_iso8601 ~ "^(\d{4})-(\d{2})-(\d{2})T(\d{2})") {
set $year $1;
set $month $2;
set $day $3;
set $hour $4;
}
access_log /var/log/nginx/healthd/application.log.$year-$month-$day-$hour healthd;
access_log /var/log/nginx/access.log main;
location / {
proxy_pass http://nodejs;
proxy_set_header Connection "";
proxy_http_version 1.1;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
gzip on;
gzip_comp_level 4;
gzip_types text/html text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
location /static {
alias /var/app/current/static;
}
}
/opt/elasticbeanstalk/hooks/configdeploy/post/99_kill_default_nginx.sh:
mode: "000755"
owner: root
group: root
content: |
#!/bin/bash -xe
rm -f /etc/nginx/conf.d/00_elastic_beanstalk_proxy.conf
service nginx stop
service nginx start
container_commands:
removeconfig:
command: "rm -f /tmp/deployment/config/#etc#nginx#conf.d#00_elastic_beanstalk_proxy.conf /etc/nginx/conf.d/00_elastic_beanstalk_proxy.conf"
80번 포트를 3000번 포트로 포워딩하는 코드입니다. 출처는 AWS 공식 도큐먼트입니다. 제가 작성한거 아니에요.
자 그리고 index.js
파일에 들어가 3000번 포트로 웹서버를 열어봅시다.
const express = require("express");
const app = express();
app.get("/", (req, res) => {
res.send("Hello Beanstalk!");
});
app.listen(3000); // 80 => 3000번 포트로!
자 이제 다시 배포를 해봅시다. index.js
, .ebextensions
, package.json
파일 세개를 선택해 압축해주시고, 다시 한 번 업로드해주세요.
자 이제는 Hello Beanstalk!
이 잘 나오시나요? 여기까지 오시면 배포까지 완벽하게 해내신 겁니다. 빈스톡 유저가 되신 것을 환영합니다.
배포가 불편하다구요? 실제로 압축을 해서 수동으로 AWS 콘솔에 들어가 파일을 업로드하는 것은 섹시해보이지 않습니다. 다음 포스팅에서는 좀 더 빠르고 편하게 코드를 업로드하는 방법에 대해 다뤄보도록 하겠습니다.
여러분의 댓글은 작성자의 힘이 되고 포스팅의 퀄리티가 높아집니다 ❤️
너무나도 잘보고 배워갑니다. 정말로 감사합니다!
실례가 안된다면 하나만 도움을 요청하고싶습니다.
다른게 아니라 프로젝트가 eb환경에서 다시금 환경구축(npm install)이 되게되는데
그래프ql같은 친구는 npm install할때 추가적인 옵션을 적어주어야 설치가 되더라구요..
해당하는 옵션을 넣어주고픈데 (ex. npm install --save --legacy-peer-deps)
이러한 작업은 어떻게 설정을 해줄수있을까요?
eb 로그를 참조하니 그래프ql이 설치가 안된다고 뜨네요 ㅠ