express와 express-generator 설치

*express란?

node.js에서 web project를 간편하고 쉽게 만들기 위하여 만들어진 프레임워크

 

*express-generator란?

web project의 구조(MVC) 를 간편하게 생성해주는 도구

 

설치구조 

myapp 폴더 안에 

backend(express 설치) 폴더와

frontend(vue 설치) 폴더를 생성해서

backend와 frontend를 분리한다.

 

설치순서 (nodejs와 npm까지 설치가 되어있다는 가정)

1. myapp 폴더 초기화

#mkdir myapp 

#cd myapp 

#npm init

 

2. express, express-generator 설치

// myapp에 express 설치

// --save 옵션을 통해 설치된 node 모듈은 package.json 파일 내의 dependencies 목록에 추가된다.

// 이후 myapp디렉토리에서 npm install 을 실행하면 종속 항목 목록 내의 모듈들이 자동으로 설치됨

// express를 임시로 설치하고 종속 항목 목록에 추가하지 않으려면 --save 옵션을 생략하면 됨

#npm install express --save

 

//express-generator 설치

#npm install express-generator -g

 

3. backend 폴더에 express 골격 생성하기

//backend 폴더 생성

#mkdir backend

 

// backend 폴더에 express 골격 생성

// --view 옵션에는 ejs 와 pug 가 있음. view 템플릿 이라고 알아두면 됨

#express --view=ejs backend

 

// 위 명령을 실행하게 되면 아래 이미지처럼 작업 내용들이 나오고, 이후 작업들을 가이드 해준다.

// 가이드대로 따라서 실행 해주면 됨

 

//backend 폴더 내에서 express 종속모듈 설치

//설치하면 package-lock.json 파일이 생성됨

#cd backend

#npm install

 

//서버 시작

#DEBUG=backend:* npm start

그럼 자신의 서버 ip와 포트를 적고 접속한다. (기본포트 3000)

예 ) http://123.41.232.13:3000

정상적으로 접속된다면 위처럼 Express 를 표시해줄것이다.

만약 서버에서 접속을 허용하지 않는다고 나오면 방화벽에 3000포트를 열어주면 됨

 

//방화벽 3000번 포트 추가

#firewall-cmd --permanent --zone=public --add-port=3000/tcp

 

//방화벽 업데이트 후 아래 두 명령어로 리스타트를 모두 실행해야 적용됨

#firewall-cmd --reload

#systemctl restart firewalld