[AWS nodejs 웹서버 배포] 3분이면 ec2 한대에 mySQL, express, vuejs 배포

로컬에서 웹개발을 하다보면 배포를 할 상황이 반드시 온다.
실제 웹사이트처럼 배포하면 좋겠지만 DB를 붙이고, 프론트엔드와 백엔드의 통신을 확인하고 nginx 서버를 구성하는 일은 매우 복잡하다.

 

또 편리한 클라우드 플랫폼이 매우 많이 생기기는 했지만 내가 로컬에서 테스트 해보던 환경을 그대로 가지고 가려면

그에 맞게 프로젝트를 변경해야 할수도있고 초보자가 감당하기는 쉽지 않은 일들이다.

 

오늘은 아주아주 간단하게 리눅스 ec2 한대에, 프론트엔드 백엔드 mySQL을 모두 배포하는 방법을 소개하겠다.

준비물은 리눅스 ec2 한대, 그에 연결할 SSH 접속 툴, 배포하고싶은 프로젝트 정도이다.

 

이마저도 없다면 내가 준비해놓은 자료들을 이용하도록 하자.

 

 

무료로 ec2 생성하기 ->

[AWS nodejs 웹서버 배포] Aws 프리티어 ec2 생성 (tistory.com)

[AWS nodejs 웹서버 배포] Aws 프리티어 ec2 생성

 

Xshell를 통해 ec2 연결 하는법 ->

[AWS nodejs 웹서버 배포] Aws ec2에 Xshell 연결하기 (tistory.com)

[AWS nodejs 웹서버 배포] Aws ec2에 Xshell 연결하기

 

간단한 express, vue.js 로그인 프로젝트 ->

express-vue.js-login-template/backend/app/src/config/db.js at main · tmddnr5410/express-vue.js-login-template (github.com)

GitHub - tmddnr5410/express-vue.js-login-template: AWS EC2 deploy practice with express vue.js login template

 

먼저 준비된 ec2의 터미널로 들어간다.

이제부터 할 설치들을 안정적으로 하기 위해 OS를 업데이트 해준다.

sudo apt-get update

 

nodejs 를 실행하기 위해 npm을 설치해준다. 

sudo apt-get install npm -y

기다리다 보면 npm이 설치가 되며, node까지 자동으로 설치해준다.

중간에 연보라색 화면 뜨는데 그냥 enter눌러주면 된다.

설치가 다되었으면 npm 과 node의 버전을 확인해준다.

node -v
npm -v

 

 

이제, mysql을 설치해줄 차례이다.

sudo apt-get install mysql-server -y

 

이것도 마찬가지로 연보라색 창 나오는데 enter누르고 넘어가면 된다.

다되면 잘 깔렸는지 확인해준다. active (running)이면 잘 설치 된것이다.

sudo systemctl status mysql

 

 

설치후 바로 실행하려고 하면, 비밀번호를 입력하라고 한다. 근데 나는 처음 설치했는데???

 

mysql 8.0 부터는 첫 설치시 초기 비밀번호가 자동으로 설정되서 바꿔 줘야한다.

sudo 권한으로 mysql을 실행해주자.

sudo mysql -u root -p

 

 

보면 정상적으로 실행이 되었다. 이제 root권한의 비밀번호를 바꿔주도록 하자!

ALTER user 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '변경 비밀번호';
FLUSH PRIVILEGES;

'변경할 비밀번호' 자리에 바꾸고 싶은 비밀번호를 넣으면 된다.

(FLUSH PRIVILEGES; 는 변경사항을 저장하는 명령이다)

내 깃헙 프로젝트를 이용하고 있다면 1234를 입력하자!

 

이제 다시 mysql에 root로 접속해서, 설정한 비밀번호를 입력하면 잘들어가지는것을 확인할수 있다.

 

mysql을 실행한김에 데이터베이스를 생성하자.

각자 프로젝트에서 관리하는 sql 문을 사용해서 데이터베이스를 채워주면 된다.

내 프로젝트를 이용한다면 깃헙링크에 있는 bas.sql 파일을 모두 실행해주자.

CREATE DATABASE node;
use node;


CREATE TABLE users(
    id int NOT NULL AUTO_INCREMENT,
    uid varchar(30) NOT NULL,
    name varchar(30) ,
    psword varchar(30) NOT NULL,
    age varchar(30) ,
    gen varchar(30) ,
    country varchar(30) ,
    email varchar(30) ,
    in_date datetime DEFAULT current_timestamp,

    PRIMARY KEY (id)
);


INSERT INTO users(uid,name,psword,age,gen,country,email)
    values("lls","steve","123",42,"여","uzbekistan","lsdf@google.co.kr"),
    ("asd","alice","123",33,"여","USA","lvvcdf@google.co.kr"),
    ("ees","billy","1234",67,"남","korea","lsaaaf@google.co.kr"),
    ("abv","mike","1w3",19,"여","japan","lsasdsdf@google.co.kr");
    
 select * from users;

 

마지막 출력이 다음과 같다면 잘 된것이다.

 

 

이제 배포할 프로젝트의 github 폴더를 clone해준다. 이때 본인 프로젝트의 백엔드, 프론트엔드 레포지토리가 나눠져있는 경우 따로 클론해서 실행해주어야한다.

git clone https://github.com/tmddnr5410/express-vue.js-login-template.git

 

 

 

clone이 완료되면 해당 폴더로 들어가 백엔드, 프론트엔드 폴더에 모두 npm install명령을 실행해야 한다.

터미널을 하나 더 열고, 각 폴더에 npm install을 해주자.

 

 

 

먼저 express-vue.js-login-template/backend/app 경로 에서 npm install을 실행하자.

cd express-vue.js-login-template/backend/app
# 혹은 자신의 백엔드 디렉토리로 이동
npm install

설치가 완료되었으면 백엔드 서버를 먼저 켜놓는다. 

각자 서버 실행 명령어를 실행시키면 된다.

npm start

 

혹시라도 이런 오류가 나온다면

 

/home/ubuntu/express-vue.js-login-template/backend/app/node_modules/lru-cache/dist/cjs/index.js:359
    #initializeTTLTracking() {
                          ^

SyntaxError: Unexpected token '('

/home/ubuntu/express-vue.js-login-template/backend/app/node_modules/lru-cache/dist/cjs/index.js:359
    #initializeTTLTracking() {
                          ^

SyntaxError: Unexpected token '('

 

mysql2 의 버전이 안맞아  그런것이다.

다음 명령어로 해결해주자.

 

npm uninstall mysql2
npm install mysql2@3.0.0

다시 npm start를 실행하면 정상적으로 작동하는것을 확인할수 있다.

 

 

 

 

 

다음으로 frontend 경로에서 npm install 명령어를 실행한다.

꼭 새 터미널을 열어서 해줘야 서버를 실행시에 불편함이 없다.

내프로젝트는 yarn도 설치해야해서 yarn 설치 명령어까지 들어가있다.

 

cd express-vue.js-login-template/frontend/
# 혹은 자신의 프론트엔드 디렉토리로 이동
npm install
npm install yarn

다됐으면 프론트엔드 서버도 마찬가지로 실행한다.

npm run serve

 

 

혹시라도 이런 에러가 나면

 INFO  Starting development server...
 ERROR  Error: @vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compiler-sfc to be present in the dependency tree.
Error: @vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compiler-sfc to be present in the dependency tree.
    at Object.<anonymous> (/home/ubuntu/express-vue.js-login-template/frontend/node_modules/vue-loader/dist/compiler.js:14:15)

 

 

vue버전이 낮아서 그런것이니 다음 명령어로 vue버전을 업그레이드 한다.

npm i vue@3.2.26

 

 

모두 완료하고 서버를 실행하면

정상적으로 실행된것을 확인할수 있다.

 

이제 백엔드 , 프론트엔드 서버가 모두 실행되었고, 마지막으로 ec2 인스턴스의 포트를 열어주기만 하면 외부에서 얼마든지 접속이 가능하다!!!

 

 

 

다시 aws 웹사이트로 돌아와서 

Security groups 의 파란색글씨를 클릭해준다.

 

 

inbound rules에 이런식으로 되어있을텐데 이는 

SSH / TCP 연결로 22번 포트에서 통신하는, 우리가 터미널 접속할때 쓰는 포트가 이미 열려있음을 의미한다.

 

Edit inbound rules를 눌러 8080번 포트를 열어보자 !!!

 

 

이런 화면이 나오면, TCP, 8080번포트, 모든 IP주소에서 통신할수있도록 규칙을 정해주고 저장한다.

 

 

 

 

 

이제 다시 인스턴스 정보창으로 돌아와 Public IPv4 address 를 복사해 ip주소:포트번호 식으로 URL에 입력한다!

예를 들어 내 Public IP주소는 44.204.68.90이고 프론트엔드 포트가 8080이니 

44.204.68.90:8080 을 입력하면 접속이 가능하다

 

브라우저로 접속하면 배포가 잘된것을 확인할수 있다 !!!

핸드폰이나 테블릿 다른 PC에서도 정상적으로 접속이 가능하다 !!!

 

이제 로그인 창으로 가서 DB연결이 잘 되었는지도 확인해보자!!!!

일반 로그인창

 

ID : lls , psword : 1234 입력

 

ID : lls , psword : 123 입력

 

 

ID에 lls를 입력한상태로 비밀번호를 틀리거나 맞게 입력하면 그에 따라 알맞은 alert 페이지가 띄워진다.

프론트엔드에서 준 로그인 요청이 백엔드에 잘 전달이 되었고, DB에서 처리후 알맞은 응답이 오는것을 확인한셈이다.

 

 

 

이처럼 nodejs 를 EC2 한대에 모두 때려박는 배포법을 알아보았다. 

급하게 테스트를 하거나 배포할일이 있다면 이런 방법도 나쁘지는 않지만,

DB의 연결성이나 부하 분산 측면에서 보면 절대 좋은 방법은 아닐것이다.

 

 

 

- vue invalid host 해결 -

 

 

DNS 에 ip할당 값에 집어넣으면됨

 

 

 

- 포트번호 숨기기

 

따라서 이런 불편이 없도록 사용자가 80 포트로 접근하는 두가지 해결방법이 있다. 첫번째는 Tomcat 포트를 80 포트로 변경하는 방법, 두번째는 80 포트로 접근하게 하고 CentOS 에서 80 포트 접속시 8080 포트로 리다이렉트 해주는 방법​. 첫번째 방법은 매우 간단하지만 CentOS 포트 권한 문제가 있어서 두번째 방법을 시도한다.

 

 

추가 : [root@localhost~]# sudo iptables -A PREROUTING -t nat -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 8080

삭제 : [root@localhost~]# sudo iptables -D PREROUTING -t nat -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 8080

​

iptables 저장 : [root@localhost~]# service iptables save

iptables 확인 : [root@localhost~]# iptables -t nat -L

​

iptables 재시작 : [root@localhost~]# service iptables restart

 

 

nvm 버전의 default가 8이라 매번 바꿔줘야 하는 불편한 상황이 있었다.

1

nvm use v12

cs

 

아래와 같이 설정하면, 이제 매번 v12 로 바꿀 필요가 없다.

1	nvm alias default 12

 

 

2. forever 실행

$ cd 프로젝트 경로
$ forever start -c "npm start" ./

 

3. forever 실행 리스트 확인

$ forever list

4. forever 중지

- forever list 에서 확인되는 pid 값을 이용하여 중단 (위의 예제의 경우 foever stop 10366

$ forever stop <pi d값>

 

5. forever log 보기

- 위의 예제의 경우 0번째 실행문임으로 아래와 같이 조회

forever logs 0

 

 

 

nohup npm run serve &

 

# 로그 조회 $ cat nohup.out

 

 

ps aux | grep "npm run serve"

 

1. ps -ef

ps -ef 명령어를 실행하면 현재 실행중인 프로세스가 쭉 뜬다.
그 중 내가 내린 명령어릴 찾아

 

2. kill -9 processID
-9 : 강제 종료를 의미하는 인자
여기서는 kill -9 22192를 입력하면 된다. 주면된다