오늘은 Hostinger에 반응 앱을 배포하는 데 필요한 단계를 보여 드리겠습니다. 튜토리얼은 다음 단계로 나뉩니다.

React 앱 생성 및 빌드

배포용 Hostinger 계정 구성

문제 해결

1. React 앱 생성 및 구축

이 튜토리얼의 요점은 Hostinger에 React 앱을 배포하는 데 주로 초점을 맞추는 것이므로 우리가 만들 앱은 새 앱에 대해 생성되는 기본 앱이 됩니다.

반응 앱 만들기

터미널을 열고 앱을 만들고자 하는 디렉토리에서 "hostinger-react-app"(또는 앱을 호출하기 위해 선택한 항목)이라는 새 앱에 대해 npx create-react-app hostinger-react-app를 입력합니다. 설치가 완료되면 터미널에서 npm start를 실행하고 브라우저에서 localhost:3000를 볼 수 있습니다.



위의 내용을 볼 수 있으면 빌드할 준비가 모두 완료된 것입니다.

반응 앱 빌드

앱이 Hostinger에 올바르게 배포되려면 앱이 도메인을 가리키도록 해야 합니다.
"homepage": "https://hostinger-react-app.com" 파일에 package.json를 추가하면 다음과 같이 표시됩니다.

{
  "name": "hostinger-react-app",
  "version": "0.1.0",
  "homepage": "https://hostinger-react-app.com",
  "private": true,
  "dependencies": { 
  ...

이제 터미널에서 npm run build를 실행하여 Hostinger에 배포하는 데 사용할 앱의 프로덕션 빌드를 생성합니다. 빌드가 완료되면 터미널에 빌드 폴더와 다음이 표시되어야 합니다.


The project was built assuming it is hosted at https://hostinger-react-app.com/.(처음 앱을 만들 때 겪었던 문제)이 보이지 않으면 다른 방법으로 홈페이지를 구성할 수 있습니다. 이 줄이 보이면 압축 섹션으로 건너뛸 수 있습니다.
.env라는 새 파일을 프로젝트의 루트 수준에 추가하여 package.json와 동일한 수준에 있도록 합니다. 파일 내부에 PUBLIC_URL=https://hostinger-react-app.com를 추가합니다. 이제 npm run build 를 실행하면 도메인을 가리키는 것을 볼 수 있습니다.

압박 붕대

마지막으로 빌드 폴더로 이동하여 모든 파일을 zip 폴더로 압축합니다. 이는 Hostinger에 파일을 추가할 때 필요합니다.

이제 앱을 Hostinger에 배포할 준비가 되었습니다.

2. 배포를 위한 Hostinger 계정 구성

Hostinger 패널에서 웹사이트 탭으로 이동하여 웹사이트 가져오기를 선택합니다. 압축 폴더를 선택하여 파일을 public_html 폴더에 업로드합니다. 업로드가 완료되면 파일 관리자로 이동하여 파일이 있는지 확인합니다.

마지막으로 다음 코드를 사용하여 .htaccess 폴더 안에 public_html 파일을 추가해야 합니다.

<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>

이.htaccess 파일을 작성하는 다른 방법이 있지만 제 경험상 이 구성은 라우팅을 사용하는 앱이 작동하는지 확인합니다.

그런 다음 도메인으로 이동하여 앱이 실행되는 것을 볼 수 있어야 합니다!

문제 해결

앱이 제대로 작동하는지 확인하기 위해 각 섹션에 몇 가지 문제 해결 단계를 추가했지만 작업을 완료한 후 앱이 표시되지 않는 경우 몇 가지 추가 팁이 있습니다.

도메인으로 이동하면 다음과 같은 페이지가 표시됩니다.



DNS 영역 편집기로 이동하여 A 레코드의 콘텐츠가 계정의 IP 주소(홈 페이지의 왼쪽 패널에 표시됨)를 가리키는지 확인합니다.

여전히 문제가 있는 경우 Hostinger 채팅 지원에 문의하여 계정이 설정되어 있는지 확인하는 것이 좋습니다.

질문이나 문제가 있으면 의견을 남겨주세요!