[NodeJS] Cafe24 NodeJS호스팅 :: 서버연결

포트폴리오 사이트를 만들기 위해서  cafe24 nodeJS호스팅을 신청했다.

근데 아직 개발을 시작한지 얼마 안 되기도 했고, cafe24자체 메뉴얼이 부족한 관계로 삽질을 오지게했다.

특히 mySQL 데이터베이스 연결은 구글링을 아무리해도 잘 나와있는 곳이 없어서 더 애먹었다. 

cafe24 호스팅으로 해볼 수 있는 삽질은 다 해본 것 같다.(진심)

혹시 삽질하고 있는 사람이라면 도움이 되기를 바란다.

 

 

 

1. nodeJS , git,sourcetree 설치

nodeJS호스팅을 신청했으니 제일먼저 nodeJS홈페이지에 들어가 다운로드를 받아준다.  nodeJS는 서버사이드 Javascript로 구글의 자바스크립트 엔진 V8이 빌트인되어있다. 자바스크립트를 다룰 줄 안다면 별 다른 학습없이 사용가능.

 

카페24  nodejs호스팅은 서버에 파일을 push하는 git 방식을 사용한다. (왜 인지는 모름. 아는사람은 댓글 달아주시길)

그렇기 때문에 로컬에 git과 git client인 sourcetree를 깔아준다.

sourcetree는 git 클라이언트로, 나의 git 저장소(repository)로 올라가는 파일들을 직관적이게 시각화하여 볼 수 있다.

깃 클라이언트 설치 없이 터미널에서도 할 수 있다고 하는데 처음 하는 사람은 클라이언트를 사용하는 편이 더 나을 것 같다.

 

2. express - generator 설치 , 프로젝트파일 구조 조정

 

nodeJS에는 기본적으로 http모듈이 있다. express는 http와 connect가 내장된 웹어플리케이션 미들웨어다. nodeJS자체로도 서버 연결이 가능하지만 코드가 복잡하고 시간이 좀 걸린다. express를 사용하면 좀 더 간결하게 서버를 만들 수 있다. 

커맨드 라인에서 express를 설치해준다. 

[ npm install express ]

다음으론 전역으로 express generator를 설치해준다.

[ npm install -g express express-generator ]

그 다음엔 프로젝트 파일을 생성한다.

[express test]

 

express -generator로 프로젝트를 생성하면 이런 구조의 폴더가 생긴다. 여기서 구조조정을 좀 해줘야 한다.

bin폴더에 들어가면 www라는 파일이 있는데, 이 파일을 web.js로 바꿔줘야한다.

왜냐하면  카페24 nodeJS 앱 기본실행 파일명은 web.js이기 때문이다. 그리고 해당 파일을 열어서 포트를 수정해준다.

[ var port = normalizePort(process.env.PORT || '8001'); ]

 

이제 bin폴더는 삭제해도 된다. web.js 파일을 밖으로 꺼낸 다음 bin폴더는 삭제하도록 하자. 카페24호스팅을 하면서 느낀 것인데 이것저것 

짜잘한 부분에서 카페24가 인식을 못하는 부분이 있다. 근데 메뉴얼에는 잘 안쓰여 있어서 삽질하게 만듦. 개빡침

이와 같은 경우도 카페24가 bin/www.js를 인식하기 못하기 때문에 저렇게 바꿔줘야 하는 것이다. 

 

bin폴더 밖으로 꺼냈으니 web.js 첫번째 코드의 디렉토리 경로도 바꿔줘야 한다.(난 정말 개촙이어서 디렉토리 개념도 없었음 왠만하면 다 알 것이라고 생각하지만..혹시 나처럼 몰랐을 사람 있을까봐...)

[ var app = require('./app'); ]

 

다음으론 view Engine을 세팅해준다. 본래는 jade로 되어있지만 나는 html템플릿을 적용시키고 싶었음. 그래서 ejs 템플릿 엔진을 사용하기로 했다. ejs는 Embedded JavaScript의 약자로 자바스크립트가 내장되어있는 html파일이다. 다만 nodejs에서 ejs를 사용하려면 

npm으로 노드모듈을 다운받아줘야 한다.

 

여기서 잠깐...

 

나중에 안 사실이지만 프로젝트 파일자체에 노드모듈을 다운받아줘야 한다. 로컬에만 다운받았는데, 서버에 푸쉬하니 자꾸 모듈을 못 찾겠다고 로그가 찍히길래 삽질 오지게 했음. git 저장소에 푸쉬할때 노드모듈까지 다 올려줘야 함. 프로젝트 파일에 모듈을 다운받으려면 터미널에서 다운 받아주면 된다.

[ cd Test(프로젝트폴더 이름) ]

[ npm install ]

 

이렇게 모듈을 다운받아주면 프로젝트 폴더에 node_modules라는 폴더가 생긴다. 앞으로 다운받는 npm(node package modules) 은 프로젝트 노드모듈 파일로 들어간다. (다운받을 때 터미널로 프로젝트파일에 들어가서 받아준다.) 

 

다시 돌아가서 이제 ejs를 다운받도록 하자. 

[ npm install ejs ]

그리고 app.js파일을 열어서 view engine setup 부분을 아래와 같이 바꿔준다. 이제 html파일을 내 카페24서버에 띄울 수 있다.

 

+ 노드모듈을 다운 받게 되면 노드모듈 폴더에 pug라는 템플릿엔진이 다운받아진다. 근데 ejs를 쓰면 굳이 pug를 쓸 필요가 없으니 

지워주도록 하자. 

[ npm uninstall pug ]

 

 

3. public key설정

 

카페24 호스팅을 이용하려면 public key를 발급받아야 한다. 터미널로 들어가서 아래 명령어를 입력한다. 

[ ssh-keygen ]

ssh는 public key 와 private key를 대조해 서로 한 쌍인지 아닌지 확인하는 보안 방법이다.

위 명령어를 입력하면 /Users/사용자/.ssh/ 이 경로로 키를 저장할 것이라면 엔터를 누르라고 하는데 그냥 엔터누름 됨 

그 다음에는 비밀번호를 입력하라고 하는데 이건 잘 기억해야된다. git에서 서버로 푸쉬할 때 이 비밀번호가 필요하기 때문에 잘 기억해야 됨

 

키를 생성했다면 해당키를 카페24에 등록해줘야 한다. /Users/사용자/.ssh/ 경로(윈도우의 경우 C:\Users\사용자\.ssh )로 들어가서id_rsa.pub 파일을 메모장이나 텍스트편집기에 모두 복사해 둔다. 

 

카페24 호스팅관리 > public key관리에 들어간다.

그리고 복사해둔 id_rsa.pub 파일을 public key입력란에 복붙해주고 이름을 붙여준다.

public key를 등록했다면 이제 앱을 생성해서 만들어진 키를 할당해주도록 하자. 

 

호스팅관리 >앱 생성/관리 로 들어가서 앱을 생성해준다. 앱이 생성되었으면 메뉴에 public key할당 버튼을 클릭해 키를 할당해준다.

 

 

 

4. 원격 저장소 연결

 

이제 코드를 업로드할 차례다. 소스트리를 키고 New > 그리고 위에 만든 프로젝트 파일을 지정한다. 다음은

상단 메뉴에 저장소 > 저장소설정 > 원격 에 들어간다. 

 

그러면 이런 박스가 뜨는데 원격 이름은 걍 아무거나 입력하면 된다.

경로는 앱 생성/관리에 들어가면 저장소라고 쓰여있는 저 부분이다. 저기서 git부분을 제외한 나머지 부분을 복사해서 붙여넣으면 된다. 

 

다음은 소스트리 설정 > 계정 에 들어가서 계정추가를 해준다. key를 어떻게 주는지 몰랐는데 계정에 키를 할당해주는 것 같다. 계정은 

github나 Bitbucket 계정을 사용할 수 있다. 나는 Bitbucket을 사용했다. 계정을 추가하기 전에 Bitbucket사이트에 들어가준다. 

들어가서 Bitbucket Setting > SSH keys

 

 

ADD key

 

 

여기서 카페24에 올렸던 것과 동일한 id_rsa.pub 파일을 복붙해서 추가해준다.

 

그럼 이제 서버에 커밋할 준비가 끝났다. 커밋메시지는 그냥 아무거나 입력해도 된다.  commit > push 해주면 준비완료.

 그리고 서버에 뭔가 푸쉬했을 때는 카페24 앱 생성/관리에 들어가서 앱을 중지 시킨다음에 다시 실행시켜야 제대로 작동한다.

 

이제 로컬 프로젝트 파일에 뭔가 추가하고 git으로 푸쉬하면 내 서버에 있는 저장소로 들어가게 된다. 

 

다음 포스팅은 nodeJS + express + mysql 로 만든 게시판을 cafe24 mysql 서버에 연결시키는 방법에 대해 업로드 할 예정이다.

 

 

+ 위 포스팅의 카페24 서버연결은 https://honeystorage.tistory.com/36 << 이 분 블로그를 참고해서 했다. (감사합니다. 진심으로ㅠ)