Hostinger(호스팅어)의 hPanel을 통해 웹사이트를 실제로 배포하고 운영하는 구체적인 방법|올씽블로거

Hostinger(호스팅어)의 hPanel을 통해 웹사이트를 실제로 배포하고 운영하는 구체적인 방법

Hostinger(호스팅어)의 hPanel(사용자님이 올리신 이미지 화면)을 통해 아트 온 톡 웹사이트를 실제로 배포하고 운영하는 구체적인 방법을 안내해 드립니다. ai.studio를 통해 구축한 프로젝트는 Vite + React 기반이므로, 소스 코드 그대로가 아니라 '빌드(Build)'된 결과물을 업로드해야 합니다. 어떻게 할까요?

---

1단계: 로컬 컴퓨터에서 빌드하기 (준비 작업)

웹 서버(Hostinger)는 .tsx 파일을 직접 실행할 수 없습니다. 브라우저가 읽을 수 있는 일반 JS/HTML 파일로 변환해야 합니다.

1. 터미널(Terminal)에서 다음 명령어를 입력합니다:

   codeBash

   npm run build

2. 명령어가 완료되면 프로젝트 폴더 내에 **dist**라는 폴더가 생성됩니다. 이 폴더 안의 내용물이 실제 서버에 올라갈 파일들입니다.

---

2단계: Hostinger hPanel에 접속 및 설정

올려주신 이미지의 왼쪽 메뉴를 따라 진행하세요.

1. Websites(웹사이트) 클릭:

   • 이미 도메인을 연결했다면 해당 웹사이트 옆의 Manage(관리) 버튼을 누릅니다.

2. File Manager(파일 관리자) 찾기:

   • 대시보드 하단이나 메뉴에서 'Files' 섹션의 File Manager를 클릭하여 들어갑니다.

3. public_html 폴더 진입:

   • 서버의 기본 경로인 public_html 폴더를 더블 클릭하여 엽니다. (이곳이 웹사이트의 뿌리입니다.)

4. 파일 업로드:

   • 로컬의  폴더 안에 있는 모든 파일을 드래그 앤 드롭으로 public_html 안에 넣습니다.

   • 주의:

---

3단계: Gemini API Key 환경변수 처리 (중요)

현재 코드의 vite.config.ts를 보면 process.env.API_KEY를 사용하고 있습니다. 정적 호스팅에서는 빌드 시점에 이 값이 코드에 포함되어야 합니다.

• 빌드하기 전, 로컬 컴퓨터의 .env 파일에 VITE_GEMINI_API_KEY=자신의키를 넣고 빌드했는지 확인하세요.

• 만약 Hostinger의 VPS 서비스를 이용한다면 서버 설정에서 환경변수를 등록할 수 있지만, 일반 Web Hosting이라면 빌드된 파일에 이미 포함되어 있어야 작동합니다.

---

4단계: SPA(Single Page Application) 경로 설정

React는 페이지 이동 시 실제 서버 파일을 요청하는 게 아니라 내부적으로 처리합니다. 만약 브라우저에서 '새로고침'을 했을 때 404 오류가 난다면, public_html 폴더 안에 .htaccess 파일을 만들고 아래 코드를 복사해 넣으세요:

codeApache

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

---

요약: 가장 빠른 방법

1. GitHub에 소스 올리기: 코드 관리가 편해집니다.

2. Hostinger Git 연동: 이미지 메뉴의 Advanced ->  Git 메뉴를 사용하면 GitHub에 푸시할 때마다 자동으로 배포되도록 설정할 수 있습니다. (가장 추천하는 방식)

3. 수동 업로드: 가장 직관적입니다. 빌드 후  내부 파일을 파일 관리자로 복사하세요.

도메인(Domains) 메뉴를 통해 artontok.com 같은 주소를 구매하셨다면, 해당 도메인의 네임서버가 Hostinger를 향하고 있는지 확인하신 후 위 과정을 진행하시면 사이트가 전 세계에 공개됩니다!

오렌지처음으로