Google AI Studio Build - Applicaton Build for WebApp(Webserver)

 

 

 

 

Google Ai Studio의Build에서 만든 앱을 웹서버에 올려서 웹앱으로 사용하기 위한 빌드과정입니다. 

 

 

 

 

 

 

Google Ai Studio Build에서 만든 앱을 웹 서버에 배포하는 과정에서 '. tsx' 파일이 웹에서 직접 실행되지 않아 겪는 문제는 React나 Vue 같은 최신 프레임워크로 개발할 때 당연히 거쳐야 하는 과정에 대한 이해가 필요한 부분이므로, 쉽고 명확하게 안내해 드리겠습니다.

 

 

핵심 원리: 왜 변환(빌드)이 필요한가?

 

가장 중요한 점은, 웹 브라우저는 Google Ai Studio의 Builder가 작성한 tsx (TypeScript + JSX) 파일을 직접 이해하지 못한다는 것입니다. 웹 브라우저는 오직 순수한 HTML, CSS, JavaScript 파일만 해석하고 실행할 수 있습니다.

 

따라서  Google Ai Studio의 Builder를 이용해서 개발한 React 애플리케이션(tsx 파일들)을 실제 웹 서버에 올려 사용자들이 접속할 수 있게 하려면, 이 코드들을 브라우저가 이해할 수 있는 형태의 정적 파일(static files) 묶음으로 변환하고 최적화하는 과정이 반드시 필요합니다. 이 과정을 **'빌드(Build)'**라고 부릅니다.

 

이 프로젝트는 Vite라는 매우 빠르고 현대적인 빌드 도구를 사용하고 있으며, package.json에 이미 빌드 명령어가 설정되어 있습니다.

 

 

 

 

웹 서버 배포 단계별 안내

 

아래 단계를 순서대로 따라오시면 간단하게 웹앱을 배포할 수 있습니다.

 

 

1단계: 개발 환경 준비 및 라이브러리 설치

 

먼저 앱을 빌드하기 위해 개발용 컴퓨터(로컬 PC)에서 몇 가지 준비가 필요합니다.

 

1. Node.js 설치: 만약 PC에 Node.js가 설치되어 있지 않다면, Node.js 공식 웹사이트에서 LTS 버전을 다운로드하여 설치해주세요. (앱 개발을 하셨으니 아마 이미 설치되어 있을 겁니다.)
2. 프로젝트 폴더에서 터미널 열기: 애플리케이션의 소스 코드가 있는 폴더에서 터미널(Windows에서는 CMD 또는 PowerShell, macOS에서는 Terminal)을 엽니다.
3. 의존성 라이브러리 설치: 터미널에 다음 명령어를 입력하여 앱 구동에 필요한 모든 라이브러리(React, Vite 등)를 설치합니다.

   npm install

    

   Use code with caution.Bash
   이 명령어를 실행하면 package.json 파일을 기반으로 node_modules 폴더가 생성되며 필요한 모든 라이브러리가 자동으로 설치됩니다.

 

 

2단계: 애플리케이션 빌드 (가장 중요!)

 

이제 tsx 파일들을 실제 웹 서버에 올릴 수 있는 파일들로 변환할 차례입니다.

 

1. 빌드 명령어 실행: 터미널에 다음 명령어를 입력하세요.

   npm run build

    

   Use code with caution.Bash
2. dist 폴더 확인: 위 명령어가 성공적으로 실행되면 프로젝트 폴더 내에 dist 라는 이름의 새로운 폴더가 생성됩니다. 이 폴더를 열어보면 다음과 같은 파일들이 들어있을 겁니다.
   • index.html: 앱의 시작점이 되는 HTML 파일
   • assets/: 빌드된 JavaScript와 CSS 파일들이 포함된 폴더
   바로 이 dist 폴더 안에 있는 파일들이 우리가 웹 서버에 업로드해야 할 최종 결과물입니다.

 

 

3단계: 웹 서버에 결과물 업로드

 

이제 마지막 단계입니다. 빌드된 결과물을 실제 웹 서버에 올리면 됩니다.

1. 웹 서버 접속: 사용하고 계신 웹 호스팅 서비스(예: 카페24, 가비아)나 직접 운영하는 서버(Apache, Nginx 등)에 FTP 클라이언트(예: FileZilla)나 SSH 등을 통해 접속합니다.
2. 파일 업로드: 웹 서버의 최상위 디렉토리(보통 public_html, www, htdocs, /var/www/html 등의 이름을 가집니다)를 찾습니다. 그리고 2단계에서 생성된 dist 폴더 안에 있는 모든 내용물(index.html과 assets 폴더 등)을 이 디렉토리 안으로 전부 업로드합니다.
3. 중요: dist 폴더 자체를 업로드하는 것이 아니라, dist 폴더의 내용물을 웹 서버의 루트 디렉토리에 업로드해야 합니다.
4. 접속 확인: 업로드가 완료되면 웹 브라우저에서 자신의 도메인 주소(예: http://www.your-website.com)로 접속하여 앱이 정상적으로 보이는지 확인합니다. 웹 서버는 기본적으로 해당 디렉토리의 index.html 파일을 찾아 사용자에게 보여주므로, 앱이 정상적으로 실행될 것입니다.

 

 

요약

 

1. 로컬 PC에서: npm install → npm run build
2. 서버에서: 생성된 dist 폴더 안의 모든 내용물을 웹 서버의 루트 디렉토리에 업로드

 

이 과정을 통해 tsx 파일 문제 없이 안정적으로 웹앱을 운영하실 수 있습니다.