cPanel에 React.js를 설치하는 방법: 가이드 2024

게시 됨: 2024-09-01
목차
  • 전제 조건
  • 1단계: React.js 앱 준비
  • 2단계: cPanel 환경 설정
  • 3단계: 서버 설정 구성
  • 4단계: 마무리 및 테스트
  • 문제 해결
  • 결론

React.js는 동적인 대화형 사용자 인터페이스를 구축하기 위한 가장 인기 있는 JavaScript 라이브러리 중 하나가 되었습니다. 일반적으로 Node.js와 같은 백엔드 프레임워크와 함께 사용되지만 많은 개발자는 웹 호스팅 계정 관리에 널리 사용되는 제어판인 cPanel을 사용하는 공유 호스팅 환경에 React.js 애플리케이션을 배포하려고 합니다.

이 문서에서는 호스팅 제공업체가 JavaScript 프레임워크를 특별히 지원하지 않는 경우에도 cPanel을 사용하여 React.js 애플리케이션을 설치하고 배포하는 과정을 안내합니다.

다음 내용도 읽을 수 있습니다. 2024년 React 앱을 위한 7가지 최고의 호스팅(비교)

전제 조건

설치 프로세스를 시작하기 전에 다음과 같은 몇 가지 전제 조건을 충족해야 합니다.

  1. 배포 준비가 완료된 React.js 애플리케이션 : React 앱이 완전하고 프로덕션 준비가 되었는지 확인하세요. 이는 모든 개발 작업이 완료되었으며 사용자에게 제공할 수 있는 앱 버전을 빌드할 준비가 되었음을 의미합니다.
  2. cPanel에 대한 액세스 : 웹 호스팅 서비스에서 제공하는 cPanel에 대한 액세스가 필요합니다. 대부분의 공유 호스팅 제공업체는 서비스의 일부로 cPanel을 제공합니다.(쿠폰 코드 " Codeless "를 사용하여 특별 제안을 제공하는 Hostinger를 추천합니다.)
  3. 도메인 이름 : React 앱을 배포할 등록된 도메인 또는 하위 도메인입니다. 아직 설정하지 않은 경우 기존 도메인을 사용하거나 cPanel을 통해 하위 도메인을 만들 수 있습니다.

1단계: React.js 앱 준비

프로덕션 빌드 생성

React.js 애플리케이션을 cPanel에 배포하는 첫 번째 단계는 앱의 프로덕션 빌드를 만드는 것입니다. 이 빌드는 성능에 최적화되어 웹에서 효율적으로 실행됩니다. 다음 단계는 로컬 컴퓨터에서 수행해야 합니다.

  1. 터미널 열기 : 터미널이나 명령 프롬프트를 사용하여 React 프로젝트 디렉터리로 이동합니다.
  2. 빌드 명령 실행 : npm run build Yarn을 패키지 관리자로 사용하는 경우 다음을 사용합니다. yarn build 이 명령은 프로젝트 디렉터리에 build 폴더를 생성합니다. build 폴더에는 HTML, CSS 및 JavaScript 파일을 포함하여 애플리케이션을 실행하는 데 필요한 모든 정적 파일이 포함되어 있습니다.

빌드 미리보기(선택사항)

배포하기 전에 로컬에서 프로덕션 빌드를 미리 보고 모든 것이 올바르게 작동하는지 확인하는 것이 좋습니다. 간단한 서버 도구를 사용하여 이 작업을 수행할 수 있습니다.

  1. 전역적으로 Serve 설치 : npm install -g serve
  2. 빌드 제공 : serve -s build 이 명령은 로컬 서버를 시작하고 build 디렉터리에서 앱을 제공하여 브라우저에서 미리 볼 수 있도록 합니다.

2단계: cPanel 환경 설정

React 앱을 배포할 준비가 되면 cPanel 환경을 구성해야 합니다.

하위 도메인 생성(선택 사항)

하위 도메인(예: react.yourdomain.com )을 통해 React 앱에 액세스할 수 있게 하려면 cPanel에서 하위 도메인을 만들어야 합니다.

  1. cPanel에 로그인 : 호스팅 제공업체의 로그인 포털을 사용하여 cPanel에 액세스하세요.
  2. 하위 도메인으로 이동합니다 . 도메인 섹션에서 '하위 도메인'을 클릭합니다.
  3. 새 하위 도메인 만들기 : 원하는 하위 도메인 이름을 입력하고 문서 루트 디렉터리를 지정합니다. 기본 설정을 그대로 두면 cPanel은 하위 도메인 이름으로 public_html 아래에 새 디렉터리를 생성합니다.

빌드 파일 업로드

프로덕션 빌드가 준비되었으면 이제 서버에 업로드할 수 있습니다.

  1. 파일 관리자 액세스 : cPanel의 "파일" 섹션에서 "파일 관리자"를 찾습니다.
  2. 원하는 디렉토리로 이동 : 하위 도메인을 생성한 경우 해당 디렉토리(예: public_html/react )로 이동합니다. 기본 도메인에 배포하는 경우 public_html 디렉터리를 사용하세요.
  3. 빌드 폴더 업로드 :
    • 먼저 로컬 컴퓨터의 build 폴더를 ZIP 파일로 압축합니다.
    • 파일 관리자의 "업로드" 버튼을 사용하여 이 ZIP 파일을 원하는 디렉터리에 업로드하세요.
    • 업로드한 후 파일을 마우스 오른쪽 버튼으로 클릭하고 "추출"을 선택하여 내용의 압축을 풉니다.​

3단계: 서버 설정 구성

빌드 파일을 업로드한 후 특히 React 앱이 React Router와 함께 클라이언트 측 라우팅을 사용하는 경우 일부 서버 설정을 구성해야 할 수도 있습니다.

.htaccess 설정(선택 사항)

앱이 HTML5 pushState 기록 API를 사용하는 React Router를 사용하는 경우 요청을 올바르게 처리하도록 서버를 구성해야 합니다. 이는 사용자가 홈페이지가 아닌 다른 경로로 직접 이동할 수 있는 경우 특히 중요합니다.

  1. .htaccess 찾기 또는 만들기 :
    • public_html 또는 하위 도메인 디렉토리에 .htaccess 파일이 있는지 확인하세요.
    • 그렇지 않은 경우 .htaccess 라는 새 파일을 만듭니다.
  2. 라우팅 규칙 추가 :
    • .htaccess 파일을 열고 다음 구성을 추가합니다:bashCopy code Options -MultiViews RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^ index.html [QSA,L]
    이 구성을 사용하면 모든 요청이 index.html 파일을 통해 라우팅됩니다. 이는 React로 구축된 것과 같은 단일 페이지 애플리케이션에 필수적입니다.

4단계: 마무리 및 테스트

모든 것이 업로드되고 구성되었으면 다음 단계는 배포를 마무리하고 모든 것이 예상대로 작동하는지 확인하는 것입니다.

파일 권한 확인

파일과 디렉터리에 웹 서버에서 액세스할 수 있는 올바른 권한이 있는지 확인하세요. 일반적으로 디렉터리의 권한은 755 로, 파일의 권한은 644 로 설정되어야 합니다.

배포 테스트

웹 브라우저에서 도메인 또는 하위 도메인(예: react.yourdomain.com )을 방문하여 React 앱이 원활하게 실행되고 있는지 확인하세요. 모든 페이지와 기능을 확인하여 모든 것이 올바르게 작동하는지 확인하세요.

문제가 발생하면 브라우저의 개발자 도구가 문제 진단에 도움이 될 수 있습니다. 또한 cPanel의 오류 로그는 서버 측 문제에 대한 통찰력을 제공할 수 있습니다.

문제 해결

cPanel에 React 앱을 배포하면 때때로 문제가 발생할 수 있습니다. 다음은 몇 가지 일반적인 문제와 해결 방법입니다.

  • 라우팅 오류 : 앱의 다른 페이지로 이동하면 404 오류가 발생하는 경우 .htaccess 파일이 클라이언트 측 라우팅을 처리하도록 올바르게 구성되었는지 확인하세요.
  • 파일을 찾을 수 없음 오류 : build 폴더의 모든 파일이 올바르게 업로드되었는지, 서버의 올바른 디렉터리에 있는지 다시 확인하세요.
  • 잘못된 파일 권한 : 파일이 로드되지 않는 경우 파일 권한이 올바르게 설정되었는지 확인하십시오(디렉터리의 경우 755 , 파일의 경우 644 ).
  • 캐싱 문제 : 캐싱으로 인해 변경 사항이 즉시 표시되지 않는 경우가 있습니다. 브라우저 캐시를 지우거나 시크릿 모드로 사이트에 액세스하여 문제가 지속되는지 확인하세요.

결론

cPanel 호스팅 서버에 React.js 애플리케이션을 배포하는 것은 처음에는 어려워 보일 수 있습니다. 특히 Vercel 또는 Netlify와 같은 서비스를 사용하여 보다 자동화된 배포 프로세스에 익숙하거나 기사를 확인하는 경우: 2024년 최고의 Node.js 호스팅 제공업체 10곳( 저렴하고 무료). 그러나 이 가이드에 설명된 단계를 따르면 cPanel에서 React 앱을 성공적으로 시작하고 실행할 수 있습니다.

이 프로세스에는 프로덕션용 React 앱 준비, cPanel 환경 설정, 필요한 서버 설정 구성 및 발생하는 문제 해결이 포함됩니다. 완료되면 React.js 애플리케이션이 활성화되어 도메인이나 하위 도메인을 통해 전 세계에서 액세스할 수 있습니다.

더 많은 경험을 쌓으면 백엔드 서비스 통합, 지속적인 배포 파이프라인 설정 또는 성능 추가 최적화와 같은 고급 주제를 탐색할 수 있습니다. 지금은 React 프로젝트를 전 세계와 공유하는 것을 즐겨보세요!