cafe24 node.js호스팅 (완벽정리. 장담.) - 업데이트됨

정말 귀찮아서 포스팅 안하려고했는데

저 처럼 쓸데없이 시간을 보낼지도 모르는 여러분을위해 포스팅합니다.

내용은 cafe24 node.js호스팅의 및 push, 실행까지 모든내용입니다.

캡쳐는 귀찮아서 생략합니다.

text로 자세히 설명하겠습니다.

[ 2019. 01 .23 - 포스팅 이용자가 많아 글을 업데이트 하였습니다. ]

1. cafe24 회원가입

https://www.cafe24.com/

2. cafe24 로그인

계정이 없다면 회원가입을 하도록 하자

https://user.cafe24.com/join/hosting/

3. cafe24 node.js 호스팅 신청하기

호스팅시에 등록하는 아이디 패스워드 ftp암호 등은 잘적어두자.

FTP접속을 위해서는 서버의 주소가 필요하다. 

하지만, 필자가 이용할때 기준으로 nodejs호스팅은 서버IP를 별도로 표기해두지 않았다.

tip을 주자면 고객센터에 타당한 이유를 제시하며 IP를 알려달라고하면 알려준다.

4. 로컬환경에 git 및 source tree설치

개발자라면 대부분 설치되어 있겠지만 혹시 없다면 설치하자.

https://git-scm.com/downloads

git을 다루는데 능숙하다면 Source tree는 필요 없을수 있다.

아니라면 설치하도록 하자.

https://www.sourcetreeapp.com/

5. 로컬환경에 node.js설치

windows 이용자라면 아래의 링크에서 설치할 수 있다.

https://nodejs.org/ko/

linux 계열의 os 이용자라면 아래의 링크를 참고하자.

https://github.com/nodesource/distributions/blob/master/README.md

위의 링크는 설치 가이드라인이다.

6. express-generator

이는 필수는 아니며 본 예제에서 사용할 nodejs with express 개발환경이다.

간단히, 웹서버를 만들어 올리는것도 상관없다.

아주 간단히 웹서버를 생성해 nodejs 호스팅을 테스트해보고자 한다면 아래의 코드를 복붙하고 아래 단계들을 뛰어넘도록 하자.

(9번으로 이동)

express 정도는 설치해주자.

[ npm install express ] 

const express= require('express');

const app = express();

app.listen(8001, () => {

console.log('server is runnin on port 3000');

});

다시 본론으로 들어와 express-generator를 이용해보자.

터미널(명령프롬프트, git-bash, power shell 등)을 아무거나 킨다.

express와 express-generator를 전역으로 설치해준다.

[ npm install -g express express-generator ]

express-generator를 통해 기초적인 환경을 한번에 세팅해버리자. 

view template으로로써 pug(jade의 최신버전)를 지정합니다.

[ express abc-view==pug ]

여기서 abc는 폴더명(프로젝트명)이 됩니다. 아무거나 해주세요.

7. 프로젝트 구조조정

생성된 프로젝트를 조금 손봐야한다. 잘 확인해두도록 하자.

아직까지도 왜이런 현상이 발생했는지는 의문이다.

다만, 나는 오랜시간 삽질을 했기에 그런일을 하는건 나만으로 끝냈으면 싶다.

express-generator로 프로젝트를 생성했다면 bin폴더 아래의 www가 보일것이다..

해당파일에서 var port = normalizePort(8001); 다음과 같이 포트를 잡아주세요.

개인별로 할당받은 포트는 다를수있으니 한번 확인해보도록 하자. 

cafe24 나의 서비스현황>앱생성관리에서 볼 수 있다.

www의 파일명을 web.js으로 바꿔준다. 

이것은 cafe24가 기본 서버실행파일을 web.js만 인식하기에 불가피한 부분이다.

이름을 바꿧다면 bin폴더 밖으로 파일을 꺼낸다. 즉 ,루트디렉토리 바로 아래로 위치를 바꾸란 얘기다.

쓸데없는 bin폴더는 지워버리자.

pakage.json에서 start 부분을 node ./web.js로 바꿔준다.

이런 번거로운 수고를 하는이유는 호스팅서버에서 bin/www.js를 인식하지 못하여 자꾸 에러를 반환했기 때문이다.

삽질끝에 이러한 방법으로 해결을 하였다.

8. View template 설정 재확인

터미널에서 npm install을 한번 해주자. package.json에 정의되어있는 의존성 모듈들을 업데이트 및 설치할 수 있다.

혹시 generator를 쓸때 pug가 아니라 jade가 설치되었다면 pug를 설치해주자. (npm install pug)

이유는 없다. 필자 마음이다.

필요없어진 jade는 지워준다. (npm uninstall jade)

view폴더의 .jade는 모두 .pug로 확장자도 바꿔주자.

마지막으로 template설정을 한다.

app.js에서 app.set('view engine', 'pug'); 으로 변경

9. Public Key 발급

cafe의 Nodejs호스팅을 이용하기 위해서는 Public Key가 필요하다.

터미널에서 ssh key-gen 명령어를 입력하자.

입력표시가 나오면 처음에는 그냥 enter!

다음 입력표시가나오면 비밀번호를 설정하는것이니 잘 기록해두도록 하자. 연필로.

다음 입력표시는 비밀번호 확인창이니 다시 같은 비밀번호를 입력.

생성된 Public Key는 윈도우 기준으로 C:\Users\사용자\.ssh 경로에 있다.

텍스트편집기를 통해 id_rsa.pub의 모든 내용을 복사해둔다.

10. Cafe24의 Nodejs 호스팅에 Public Key 등록하기

Nodejs호스팅 내 서비스의 Public-Key관리에서 입력란에 복사한 놈을 붙여넣어주고 key이름으로 적절한 네이밍을 해준다.

저장하고 앱생성관리로 이동.

앱생성관리에서 해당 프로젝트에 키를 부여합니다.

11. 대망의 소스코드 업로드 차례

소스트리를 켜고 New tab > create

아까전에 생성된 프로젝트를 지정

상단 제목표시줄에서 저장소 > 저장소설정으로 이동

cafe24의 앱생성관리에서 [저장소]부분을 쭉 복사해다가 저장소설정에 붙여넣어준다. 

'git '여기 부분은 뺴고

이름은 대충 origin정도로 붙여서 저장

상단 제목표시줄에서 도구 > ssh-key추가에서 C:\Users\사용자\.ssh 경로의 id_rsa (.pub 아님, 주의)를 추가한다.

도구 > 옵션에서 ssh클라이언트가 opensssh로 되어있어야한다. 주의하세요.

이 때 주의할점이 있다. 우리가 git으로 프로젝트를 관리할 떄, .gitignore를 통해 node_modules를 빼고 업로드 하곤 한다.

하지만, Nodejs호스팅을 이용할때는 그러면 안된다. (필자가 확인한 바로는)

이유는 SSH접속을 통해 npm install과 같은 명령어로 서버에서 직접 의존성모듈을 설치하는것이 불가능하기 때문이다.

SSH접속이 되는지 안되는지는 불확실하니, 고객센터를 통해 확인하자.

따라서, node_modules도 함께 아래의 단계를 진행하자.

12. 커밋 + push

프로젝트의 모든 내용을 커밋하자. 메시지로는 initial commit정도가 적당할 것으로 생각된다.

됐다면 Push.

이 때, 시간이 상당히 소요된다. node_modules의 모듈들을 같이 업로드해버리는 엄청난 행위를 하기 때문이다.

13. 호스팅서버 재실행

cafe24로 이동하여 실행할 차례이다. 

혹시 서비스를 실행중이셨다면 중지 후 재실행 하고, 아니라면 바로 실행해준다.

14. 지정된 도메인을 통해 접속

Cafe24의 지정도메인 말고 자신의 도메인을 등록하고 싶다면 서버의 IP를 알아야한다.

그때는 Cafe24 고객센터에 문의하여 자신의 호스팅서버 IP를 알아내어 등록하도록 하자.

짜짠

잘되죠? 안되면 제 손에 장을지지겠습니다. 연락주세요. 삽질 정말 많이했습니다.