cpanel에서 react.js(클라이언트) 앱을 호스팅하는 방법

cpanel에서 react.js 앱을 호스팅하기 위해 cpanel에 액세스할 수 있는 호스팅 패키지를 구입했다고 가정합니다. 이 기사에서는 namecheap 공유 호스팅 패키지를 사용하지만 모든 호스팅 계획을 사용할 수 있습니다.

비디오 튜토리얼
저와 같은 비주얼 타입이시라면 아래 영상을 시청해주세요.
좋아요, 공유, 댓글, 구독 및 알림 설정을 잊지 마세요. 이렇게 하면 이와 같은 멋진 동영상과 튜토리얼을 더 많이 만들 수 있는 동기를 얻을 수 있습니다.

react.js 앱을 호스팅하기 전에 주의해야 할 사항

도메인이 호스팅 계정에 연결되어 있는지 확인하십시오.

주 도메인이 이미 사용 중인 경우 이 프로젝트 전용 하위 도메인을 만드십시오.

이 기사에서는 https://supablog.supatechie.ga을 사용할 것이지만 계속해서 도메인이나 하위 도메인으로 바꾸십시오.

이 모든 것이 준비되면 아래 지침을 따르십시오.

데스크탑이나 드라이브에 project라는 새 디렉토리를 작성하십시오.

react.js 앱이 아직 없다면 명령줄 프롬프트를 열고 프로젝트 디렉토리로 이동하여 다음을 실행합니다.

npx create-react-app@latest client

위의 명령은 이름이 client인 새로운 react.js 앱을 생성하지만 이미 가지고 있다면 이 단계를 건너뛰세요.

클라이언트 앱이 생성된 후 원하는 코드 편집기에서 프로젝트 디렉터리를 엽니다.

클라이언트 디렉토리 내에서 공용 디렉토리를 열고 이름이 .htaccess인 새 파일을 만들고 아래 구성을 복사하여 붙여넣고 파일을 저장합니다.

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]
</IfModule>

여전히 클라이언트 디렉터리 내에서 package.json 파일을 열고 "homepage": "your_domain_url"키 값 쌍을 추가합니다. 예:

"name": "supablog",
"version": "0.1.0",
"private": true,
"homepage": "https://supablog.supatechie.ga",

변경 사항을 모두 저장합니다.

cmd를 열고 클라이언트 디렉토리로 이동한 다음 아래 명령을 실행하여 프로덕션용 앱을 준비합니다.

npm run build

빌드가 완료되면 오류가 발생하지 않았다고 가정하고 시스템에서 파일 탐색기를 열고 프로젝트/클라이언트 디렉토리로 이동하면 빌드 디렉토리가 표시됩니다. 빌드 디렉토리를 열고 모든 디렉토리와 파일을 강조 표시하고 압축합니다. Windows를 사용하는 경우 파일을 압축하기 위해 WinRAR을 설치하기만 하면 됩니다.

다음 단계는 브라우저를 열고 cpanel에 로그인하고 _파일 _ 섹션으로 스크롤한 다음 파일 관리자를 클릭하는 것입니다. 그러면 파일 디렉토리로 이동합니다.

기본 도메인을 사용하는 경우 public_html을 열어 앱을 호스팅하지만 하위 도메인을 만든 경우 cpanel은 자동으로 하위 도메인의 이름으로 새 빈 디렉토리를 생성해야 합니다. 이 경우 우리 디렉토리는 다음과 같습니다. 이름: supablog.supatechie.ga

디렉토리를 열고 상단 탐색 모음에서 *업로드 *를 클릭합니다

.

업로드 페이지로 이동해야 합니다. 선택한 파일을 클릭하면 시스템의 파일 탐색기가 열립니다. project/client/build/로 이동하여 build.zip 파일을 선택합니다.

zip 파일이 업로드되면 아래 링크를 클릭하여 cpanel 파일 관리자로 돌아갑니다.

거기에서 build.zip을 찾아 파일을 선택하고 오른쪽 상단에 있는 압축 풀기 파일을 클릭합니다. 파일이 성공적으로 추출됩니다

.

새 브라우저 탭을 열고 도메인 이름을 입력하면 사이트가 성공적으로 열립니다.

여기까지 왔다면 축하합니다.

이제 기능을 잃지 않고 cpanel에서 react.js 앱을 성공적으로 호스팅했습니다.

추신
react.js 및 node.js 익스프레스 RESTful API를 처음부터 빌드하고 cpanel에서 호스팅하는 방법에 대한 전체 자습서를 원하면 Youtube에서 내 재생 목록을 팔로우하세요.