구글 ai studio 코드 다운로드 후, 로컬 브라우저에 띄우기

 

구글 ai studio 코드 다운로드 로컬에서 띄우기

구글 ai Stdio를 통해 앱을 만들어보고, 디플로이를 통해(구글 클라우드) 배포해보고,

코드를 다운로드 받아서 로컬에서 브라우저에 띄워보자.

 

 

 

 

 

 

 

 

 

 

 

1. 구글 ai studio 접속

Google AI Studio

 

 

 

 

 

 

 

 

2. build 로 진입하여 원하는 앱의 내용을 입력한다.

 

 

 

 

 

 

 

 

3. 초기 4~5줄 정도 입력하여 만든 앱이다.

- 100살까지 남은 시간 카운트다운 하는 앱

- 이후에 수정을 100번 넘게 진행했다. 

- 약 2일 정도 걸려서 완성함.

 

 

 

 

 

 

4. Deploy App

- 구글 클라우드에 배포

- 이것은 구글에서 제공하는 클라우드 서비스를 이용하여 호스팅을 제공받아 배포한다는 말이다.

- 특히나 제미나이 ai 를 포함하는 앱을 만들었다면 api 사용도 활성화 해야한다. (결제 정보 등록)

- 즉 클라우드 서비스 및  제미나이 ai api 사용 시, 사용량이 많아지면 청구한다는 말이다.

- 그래서 테스트용이나 소규모 단기 앱에서 잠시 사용 가능하겠다. 

- 물론 이런 여러가지 장점들,,, 한 번에 구글에서 모든 것이 제공되므로.. 활용한다면 유료로 결국 사용할 수도 있지 않을까..

 

 

 

 

 

 

 

 

 

5. 코드 다운로드

- 완성되었다면,  deploy눌러서 구글 클라우드 서비스를 통해 배포가능하며,

- 코드를 다운로드해서 직접 다른 무료 호스팅을 통해 또는 깃허브를 통해 배포 가능하겠다.

- 코드를 다운로드 받아보자.

 

 

** 먼저 저같은 초보를 위해서 구글 클라우드 런에 대해 알아둘 필요가 있다.

- 쉽게 말해 구글 클라우드 서비스를 이용하여 앱을 배포하는 것을 말한다

- 사용량 (접속량)에 따라 유료 청구되지만 테스트용으로는 괜찮을 것 같다.

- 오로지 구글 ai 스튜디오에서 바로 구글 클라우드 런으로 배포하는 경우 큰 걸림돌은 없다.  이것이 최대 장점.

 (실제 api 사용을 위해서 결제 카드 등록을 미리해둬야 되는 부분만 참고하면 된다.

 그래서, 이런 구글 클라우드를 사용하지 않고, 로컬로 코드를 다운로드 받아서 다른 무료 호스팅을 통해

 배포하려는 경우 api키를 수동으로 잡아줘야 한다. -- api를 사용해야 하는 경우에는 그렇다.)

 

 

 

 

** 로컬에서 실행하면 화면이 안보이는 이유.
- 그냥 index.html 파일을 크롬 브라우저에서 로컬로 열어도 절대 화면을 띄울 수 없다.

 Read me 파일을 보면 아래와 같이 되어있다.

 먼저 npm install 을 하라고 되어있다 = node.js 자바스크립트기반 패키지 매니저를 사용한다는 의미이다.

 둘째 gemini_api_key 를 .env.local 에 넣으라고 되어있다 =  api를 반드시 사용해야 하는 경우에만

 셋째 실행을 위해서는 npm run dev 라고 콘솔에 입력하라는 말이다.

 

 

 

 

.env.local 파일을 열어보면 이처럼 키값을 하드코딩 넣으라고 되어있다.

이 부분에 자신의 api 키값을 넣으면 로컬에서도 api연동이 가능하다. (필요한 경우)

 

 

 

 

 

 

 

 

 

6. Api-Key 복제하기 (ai 필요한 경우에만)

구글 ai 스튜디오에서 우측 상단의 로켓 모양을 클릭하면 디플로이 창이 뜬다.

 

 

 

아래와 같은 화면이 뜬다.

1. app 주소이다 . 웹에서 이것을 복사해서 주소창에 넣으면 화면이 열린다.

2. api-key 복제할 수 있다.

3. 구글 클라우드 api 사용량을 확인하는 클라우드 사이트로 이동한다.

 여기서 2번, api키를 복제하여 사용한다.

 

 

 

 

 

 

 

 

 

7. 실행 테스트

 

Teminal = cmd로 설정해두기!!  (커서 ai 경우 터미널이 power shell로 처음 열린다. 여기에 암만 쳐봐도 되지 않는다)

터미널에서  아래와 같이 입력

npm run dev

 

- 만약 이것으로 실행 안된다면,  node.js를 설치하시길... 그 이후 npm install 하시길... api 를 사용하는 앱이라면 key값도 확인.

 

 

자, 이렇게 커서 ai 내부창에 다운로드한 파일의 앱을 띄울 수 있다.

 

 

물론, 아래 것 처럼 크롬 브라우저에 띄울 수도 있다. (로컬호스트 3000번을 사용했다는 것을 참조하자)

 

 

 

 

이렇게 코드를 다운받아서 로컬 브라우저에 띄우는 것까지 테스트를 마쳤다.

 

 

 

 

 

 

 

 

 

 

 

 

BR.h