NODEJS]client, server 기본 틀 만들어 보기
Nodejs를 이용해서 개발을 시작한지 1주일이 되었다.
지금까지는 누군가 만들어 놓은 화면을 수정하는 작업이 주로 이루어 졌다.
기본적으로 node.js가 설치되어 있는 환경에서 진행 된다. node 서버쪽 설정을 해보자 node 서버는 express-generator 를 이용한다.
# express-generator 설치
$> npm install express-generator -g
# express 기본 디렉터리 생성
$> express <디렉터리 명>
생성된 디렉토리는 다음과 같은 구조를 가진다.
|-bin # express 실행 관련
|-node_modules # node modules 설치되는 위치
|-public # 정적 파일의 위치 (client source 외 정적 파일)
|-views # view 관련 위치(.ejs, .html 등)
|-routes # route 설정된 js 모음
실행을 하기 전에 먼저 모듈을 설치 한다.
$> npm install
이후 express 서버를 기동한다.
$> npm run start
vue.js를 사용하기 위해서 vue-cli를 이용하여 client 화면의 구성을 생성한다.
# vue-cli install
$> npm install -g @vue/cli
# client project create
# $> vue create <생성 프로젝트 명>
$> vue create client
생성을 할때 여러 옵션이 있지만 기본으로 생성한다.
생성된 프로젝트 디렉토리로 들어가면, 다음의 구조로 되어 있다.
|-node_modules # node modules 설치되는 위치
|-public # 정적 파일(html)
|-src # 실제 소스 위치
|-components # vue components
|-assets # 정적 파일(image, js, css ETC)
생성된 프로젝트를 기동하는 방법은 다음과 같다.
# client server running command
$> npm run serve
# build client source
$> npm run build
빌드를 할때, server 소스 쪽으로 빌드를 하면 clinet 서버를 띄우지 않고 server 쪽의 서버로 함께 기동하도록 할 수 있다. 위치는 일반적으로 server 의 public(정적 위치)으로 build 되도록 수정한다. client 쪽에 vue.config.js 파일을 추가하여 다음과 같은 내용을 작성하자 중요 한 것은 outputDir을 서버의 public으로 설정 하는 것이다.
$> vi vue.config.js
###
module.exports = {
outputDir: '../server/public', # build 시 소스 저장 위치
devServer: {
proxy: 'http://localhost:3000' # server 의 접속 주소
}
}
###
$> npm run build
client의 소스를 빌드 하고 server를 실행하면 server에서 client의 소스를 확인 할 수 있다.