🤖

Google AI Studio Buildで作ったアプリをローカルで動かす【真っ白解決】

に公開
Node.js
React
初心者
Windows
Google AI Studio
tech

現象

Google AI Studio Buildで作ったアプリをダウンロードしてきて、ブラウザで開くと真っ白な画面が表示される。

結論

Node.js®がインストールされている状態で、以下のコマンドをダウンロードしたディレクトリ内で入力すると正常に表示される。

npm install
npm run dev -- --open

経緯

初心者らしいつまづき

  • Google AI StudioのBuild機能で以下のオレンジ丸の部分を選択し、作ったアプリをzip形式でダウンロードした。

    Google AI StudioのBuild機能の画面の一部
  • ダウンロードしてきたディレクトリ（フォルダ）のindex.htmlを開くと、アプリが開くかと思い試した。

    ダウンロードしたディレクトリ内
  • 結果が以下

    真っ白なブラウザ画面
    思ったように上手く開かない。

苦悩

  • Geminiにディレクトリをアップロードをして聞くことを試したが、ファイル数の上限を超えているようで上手くいかない。

    Geminiのスクショ

解決策

  • GitHubのREADMEをふと見ると、ローカルで動作させる方法が記載されているのに気付いた。

    Run Locallyに方法が書いてある
  • Node.js®はすでにインストールしていたので、あとはコマンドを実行するだけ。

手順（Windowsユーザ向け）

  • ダウンロードしてきたディレクトリのオレンジ丸の部分をクリック。

    クリック箇所の例示
  • cmdと入力し、コマンドプロンプトを開く。

    入力の例示
  • コマンドプロンプトに以下のコマンドを入力。
>npm install
  • 完了したら、続けて以下のコマンドを入力。
>npm run dev -- --open
  • コマンドプロンプトが以下の状態になる（終了はqキー）。
  VITE v6.4.2  ready in 875 ms

  ➜  Local:   http://localhost:3000/
  ➜  Network: http://hoge.huga
  ➜  press h + enter to show help
  • ブラウザでアプリが開く

    ローカルのアプリがブラウザ上で動作している様子

まとめ

ReactやNode.jsに今まで触れていないので、単純なことが理解できていないように思う。これから勉強していきたい。

Discussion