Published on

카페24 node.js 호스팅에 React 프로젝트 배포하기

Authors
  • avatar
    Name
    hwahyeon
    Twitter

클라이언트가 요구하는 조건은 카페 24를 통해 홈페이지를 배포해달라는 것이었다. 카페24를 통해 도메인을 구매했으니 통합해서 관리하고 싶다는 것이 그 이유였다. 나는 리액트로 정적 홈페이지를 구현했고, 이를 카페24에 올려야했으나 자료가 많이 부족했다. 이 포스트는 그것에 대한 내 경험글이며, 방법이기도 하다.

아래는 이 글을 읽기 전, 참고할 만한 사항이다.

  1. 카페24에서 제공하는 node.js 호스팅은 HTTPS를 사용하려면 반드시 필요한 SSL 인증서 설치를 지원하지 않는다. 즉, HTTPS를 사용할 수 없다.

  2. 클라이언트는 로그인 기능 등을 굳이 원하지 않았고, 간단한 회사 소개 홈페이지를 원했다. 그래서 백엔드를 빼버리고, 프론트엔드만 구현하기로 했다.

카페24를 써서 프론트엔드를 배포해야하는 상황이라면, 이 글이 도움이 되리라 믿는다.

1. 결제하기

바로 가기 기본 탭은 Tomcat JSP로 설정되어 있으니, node.js 탭으로 변경한 후 구매해야 한다. 웹 용량, 트래픽 용량, 메모리 등을 고려해 적절한 옵션을 선택하자.

2. 앱 생성하기

카페24 웹사이트 > 나의 서비스 관리 > 앱 생성/관리 > node.js 앱 생성

원하는 이름.cafe24app.com

node.js 앱 이름 항목에 원하는 이름을 적고, node.js 앱 만들기 버튼을 클릭하여 앱을 생성한다.

3. Git 설치

카페24 호스팅은 Git으로 소통하므로 Git을 설치한다.

4. SSH Public Key 생성

Git 설치 후 Git Bash를 실행하여 아래 명령어로 SSH 키를 생성한다.

ssh-keygen -t rsa -C "키 명칭"

카페24에선 "키 명칭" 부분에 이메일을 권하고 있으나 아무거나 상관없다.

키 경로를 확인하고,

Enter file in which to save the key (경로):

비밀번호를 입력하라는 문구가 나오면, 비밀번호를 한 번 입력하고 엔터 후, 다시 한번 입력해준다.

Enter passphrase (empty for no passphrase):

5. SSH 키 확인

아까 확인한 경로로 가면 두 개의 파일이 존재할 것이다. id_rsa는 개인키 파일이며, id_rsa.pub가 바로 Public key 파일이다. id_rsa.pub을 메모장 위에 드래그 앤 드롭하면 내용을 볼 수 있다. 내용을 복사해두자.

6. Public Key 등록

카페24 웹사이트에서 나의 서비스 관리로 돌아와 호스팅 관리 > Public key 관리로 이동하면, Public Key 이름, Public Key 입력 이렇게 두 항목으로 된 Public Key 등록 섹션을 볼 수 있다. Public Key 이름에는 아까 4번에서 지정한 ssh-key 키 명칭을 입력해주면 되고, Public Key 입력에는 5번에서 복사해뒀던 id_rsa.pub의 값을 붙여넣기 해주면 된다.

7. Key 할당

앱 생성/관리로 이동하여, Key 할당을 누르면 사용 가능한 Public Key가 왼쪽에 목차로 뜬다. 6번에서 생성한 Public key를 사용중인 Public Key로 옮겨주자.

8. web.js 파일 생성

보통 웹 프로젝트에서는 app.js나 index.js를 사용하는 편이지만, 카페24 node.js 호스팅에서는 web.js 파일이 앱 기본 실행파일로 설정되어 있다. 프로젝트 최상위에 web.js파일을 생성하자.

9. React 프로젝트 빌드

npm run build

위 명령어로 React 프로젝트를 빌드한다.

10. Express에 React 파일 라우팅

8번에서 생성한 web.js파일에 아래 코드를 넣는다.

const express = require('express')
const path = require('path')

const app = express()

app.use(express.static(path.join(__dirname, 'build')))

const port = process.env.PORT || 8001

app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname, 'build/index.html'))
})

app.get('*', function (req, res) {
  res.sendFile(path.join(__dirname, 'build/index.html'))
})

app.listen(port, () => {
  console.log(`Server is running on port ${port}`)
})

라우팅을 서버 측에서 하려면 web.js에서 라우팅 처리할 수 있지만, React Router로 클라이언트 측 라우팅을 하고 있다면 app.get("*")으로 모든 경로에 대해 index.html을 반환하게 하면 된다.

만약 다른 도메인 또는 포트에서 요청을 받을 가능성이 있다면 CORS를 사용하여 외부 요청을 허용할 수도 있다. 애플리케이션이 같은 도메인에서만 요청을 받을 것이라면, CORS 설정은 생략해도 된다. 추가하려면 아래 코드도 함께 넣어주면 된다.

const cors = require('cors')

app.use(cors())

11. package.json 설정

React의 기본 start 명령어는 react-scripts start이다. 이를 node ./web.js로 변경한다.

12. Git으로 Push하기

카페24 앱 생성/관리에서 앞에 git 부분은 제외하고 저장소 주소를 복사한다. 그 후, 프로젝트 폴더에서 다음의 명령어를 입력하자.

git init
git add .
git commit -m "deploy"
git remote add origin 복사한 저장소 주소
git branch -M master
git push origin master

위 명령어는 모든 파일을 추가git add .한 후, 현재 브랜치 이름을 강제로 master로 변경하는 작업이다. 카페24는 main이 아니라 master를 사용한다. .gitignore, .env 등을 사용하고 있다면, git add . 대신 특정 패턴에 맞는 파일만 추가하는 명령어인 git add *를 사용하자. 여기서는 확실히 하고자 git add .를 사용했다.

push가 완료되면 앱 생성/관리에서 앱을 한 번 중지했다가 재실행한다.

기타 오류

Permission denied (publickey).
fatal: Could not read from remote repository.

위 에러는 서버의 SSH 인증에 실패한 것이다. 아마 git push명령어를 실행하려다가 마주쳤을 것이다.

  1. SSH 키가 Git 서버에 등록되었는지 재확인해본다.
  2. 로컬에 SSH 키가 여러 개 등록되어 있는 경우, 특정 프로젝트에서 다른 키를 사용하려고 할 때 오류가 발생할 수 있다. 예를 들어, A 계정과 B 계정이 각각 다른 SSH 키를 사용한다면, ~/.ssh/config에서 각 계정에 맞는 SSH 키를 지정해야 한다.

~/.ssh/config

Host github.com-A
  HostName github.com
  User git
  IdentityFile ~/.ssh/id_rsa_A

Host github.com-B
  HostName github.com
  User git
  IdentityFile ~/.ssh/id_rsa_B
Discuss on Twitter • View on GitHub