最近のAIの進化は目覚ましいものがあります。昨今、介護施設や事業所の生産性向上や業務効率化が叫ばれていますが、本格的なコーディングができなくても、自然言語で調べ物や資料作成、プレゼンテーション資料ができてしまいます。特に、GoogleのGeminiでは、インフォグラフィック機能やクイズ機能などもあり、生成されたアウトプットを介護施設や介護事業所の研修や訓練等に使えてしまいます。
生成されたインフォグラフィックはhtml、css、javascriptのコードで出力されますが、プレビュー機能によりその場で確認できます。
ローカル環境で開発したwebアプリのコードは、デプロイして実際に使える状態にしますが、デプロイ環境としては、共用レンタルサーバーを借りているのなら、マルチドメインでデプロイするフォルダを作成してFTPでファイルを転送するのが手っ取り早いと思います。
もう一つの手として、Googleのfirebaseと言うサービスを使う方法があります。firebaseは様々な機能がありますが、webアプリをデプロイする環境としてHosting機能があります。Hosting機能でできるのはフロントエンドのデプロイだけで、バックエンドを使うには別途Firebase Cloud Functionsを使う必要があります。その場合、HostingとCloud Functionsを連携させる必要がありますが、私はまだその域には達しておりませんので説明は省きます。
今回はHostingに特化して記事を書きたいと思います。と言うのも、以前にwebアプリをHostingでデプロイすることができたのですが、間をおいて再びやろうとしたのだけれど、全然できない、分からない状態だということに気づきました。前回は、分からないながらも偶然、できていたのですね💦 と言うことで、学び直しを兼ねて、firebaseのHostingを順を追って説明してゆきたいと思います。自分自身の備忘録を兼ねてのものです。。。
ちなみに、バックエンドのCloud FunctionsではPHPを使えますが、フロントエンドのHostingでは使えません。
まず大前提として、firebaseのデプロイは、パソコンに標準で付いているターミナル、CLI（コマンドラインインターフェイス）を使って操作してゆきます。昨今のパソコン作業の多く（全て）は、GUI（グラフィカルユーザーインターフェース）になっています。文字をポチポチ打ってパソコンにコマンドしてゆくことは、一般のビジネスパーソンではほぼないかと思います。画面に表示されたアイコンをマウスでポチポチしてゆくGUIとは違って、CLIは正に文字をポチポチ入力してゆく作業になります。で、firebaseを操作してゆくためのCLIは、大前提としてjavascript系のNode.jsがインストールされていることが前提となります。さらにそのNode.jsを管理するnpm（ノード・パッケージ・マネージャー）もfirebase CLIを使う際に必要となりますので、Node.jsをまずはインストールしましょう。（これらのツールは、そもそも0と1しか理解できない、つまりは電気が流れている状態と流れていない状態の2種類しか判別できない電気的機械のパソコンに、人間が理解できるプログラミング言語を段階を追って変換する辞書的なツールになります。）
Node.jsをインストールしたら、いよいよfirebaseにwebアプリを公開してゆく作業になります。ローカル環境に、公開したいアプリを置きましょう。解説のものは、「stresscheck」というフォルダに、メインのファイルのindex.htmlとデザインを定義しているcssファイル、絵や写真が入ったimageフォルダが置いてある感じとなります。ちなみに、webアプリは、クライアントからサーバーリクエストがあった時、最初に読み込まれるファイルは必ずindex.htmlやindex.php、index.js等のファイル名がindexになります。
続いて、ご自身のGoogleアカウントでfirebaseのコンソールにアクセスします。いろいろなサービスがありますが、その中に「Hosting」があります。
Hostingをクリックすると、ホスティングのコンソールに移ります。
Hostingのコンソールの「Firebaseプロジェクトを作成する」をクリックして、新しいプロジェクトを作ります。
任意のプロジェクト名を小文字英数字で作ります。ここは分かりやすいもので良いでしょう。この時、下にある✎マークのところがデプロイ後のURLになります。Firebaseで重複が無いよう自動で生成されます。複雑なプロジェクト名にすれば、プロジェクト名＝公開URLになります。
続行ボタンをクリックすると確認ページに移りますが、ここは「続行」で良いです。
アナリティックスはアクセス解析できるものですが、どちらでも良いです。ここは「続行」で良いでしょう。
アナリティックスのアカウントはデフォルトで良いでしょう。選択したら「プロジェクトを作成」ボタンをクリックして、Firebase上に自分のプロジェクトを作成します。
「プロジェクトを作成」ボタンを押すと、準備が始まります。しばらくすると「Firebaseのプロジェクトの準備ができました」の画面が出て準備が整いますので、「続行」ボタンを押します。
さて、次からはいよいよCLIからの操作になります。パソコンにNode.jsがインストールされていることが大前提ですが、Firebaseを操作するためのCLIをnpmからインストールします。「npm install -g firebase-tools」の「-g」はグローバルインストールの意味で、ディレクトリに関わらず利用できるという意です。
パソコンに付属しているターミナルで、コピーしたコマンドを張り付けて、リターンを押します。
続いて、ローカルからFirebaseにログインします。
ログインしたら、次は初期化をします。初期化は公開アプリを置いたディレクトリでおこないます。ディレクトリを指定するには「cd c:\User\_____\cd c:\User\____\____」で指定します。プロパティを確認してコピペしましょう。
ディレクトリが指定できたら、公開フォルダを「firebase init」コマンドで初期化します。
初期化すると以下の画面が出てきます。
テンキーで「Hosting」を選んで、スペースキーで確定します。
続いて、プロジェクトを作成していますので、「Use an existing project」を選択します。
すると、デプロイの候補が出てきます。プロジェクト名を入力した際に下部に出てきたURLを選択します。
公開ディレクトリは基本「public」で、URLは「index.html」ですのでyesにします。
初期化が完了すると、ローカル環境に置いた公開フォルダの中に「public」フォルダが生成されて、その中に「index.html」ファイルが新たにできています。このファイルは、以下の画像を表示するファイルです。
「public」フォルダ内の「index」ファイルは不要ですので削除して、公開用のファイルを「public」フォルダに移します。公開フォルダ内にはログインやデプロイのためのファイルが生成されています。これらは削除しないでください。
いよいよFirebaseにデプロイします。「firebase deploy –only hosting」のコマンドを実行します。
すると、カチャカチャっとローカル環境からFirebaseに転送が始まります。転送が済むと「Deploy complete!」が表示され、公開URLが表示されます。
Firebaseのコンソールに戻ると、デプロイ完了の画面が出ます。
左のツールバーにある「Hosting」を押すと、公開ドメインの画面になりますので、クリックするとインターネットにwebアプリが公開されたのが確認できます。
ファイルを修正したり間違えたりした場合は、Firebaseに再度ログインしてデプロイすれば良いだけです。
publicフォルダ内に生成されたファイルは、完了通知の画像ファイルなので、消しておいてください。←これ重要！
こんな感じで、サーバーを借りていない人でも簡単に自作アプリをインターネットに公開できるので、超おすすめのFirebaseなのです。以下にフロントエンドだけのアプリを載せましたので、お気軽にお試しください。バックエンドのファイルはありませんので、送信機能はありません。
コメント