Vueのプロジェクトをインターネットで公開する
Vueのプロジェクトをインターネットで公開する
2022年3月20日
Vue のプロジェクトをインターネットで公開する
Vue を利用して開発した、Web アプリをインターネット上で公開するための方法として、Firebase を利用する方法を紹介します。
Web アプリをインターネットで公開するには
Vue で作成するアプリは、基本的に Web ブラウザ上で動作します。開発中は、開発で使っている PC で仮の「Web サーバー」を動かして動作の確認を行うのが普通です。 しかし、この開発した Web アプリをインターネット上で公開するには、この Vue で開発したアプリをインターネットからアクセスできるサーバーにコピーする必要があります。 こうしたサービスを「Web ホスティングサービス」と呼んでいますが、色々なサービスがあって、初心者には迷う部分が大きい部分です。
この記事では、色々ある Web ホスティングサービスの中から、「Firebase」のサービスを利用して Web アプリを公開する方法を紹介します。
Vue で作成するアプリは、基本的に Web ブラウザ上で動作します。開発中は、開発で使っている PC で仮の「Web サーバー」を動かして動作の確認を行うのが普通です。 しかし、この開発した Web アプリをインターネット上で公開するには、この Vue で開発したアプリをインターネットからアクセスできるサーバーにコピーする必要があります。 こうしたサービスを「Web ホスティングサービス」と呼んでいますが、色々なサービスがあって、初心者には迷う部分が大きい部分です。
この記事では、色々ある Web ホスティングサービスの中から、「Firebase」のサービスを利用して Web アプリを公開する方法を紹介します。
Firebase のサービスとは？
Firebase は Google が提供している、インターネットのサービスの一つで、Web ホスティングの他にもログイン機能（ユーザー認証機能）や、データベース、オンラインストレージなど色々なサービスを提供しています。
便利なのは、Google のアカウントを持っていれば誰でも利用できる事に加えて、一定の利用量（アクセスの数や利用しているファイルの容量など）が一定量以下の場合には、無料で利用できる所です。
したがって、初めて Web アプリを提供する場合の多くは、アクセス数や利用量は無料枠内に収まる場合が殆どなので、Firebase を利用して Web サービスを公開する場合には、費用がかからない場合が多くなります。つまり、無料で Web サービスが公開できるという事になります。
（＊）アクセス数や利用量が制限を肥えた場合には費用が発生します。
Firebase は Google が提供している、インターネットのサービスの一つで、Web ホスティングの他にもログイン機能（ユーザー認証機能）や、データベース、オンラインストレージなど色々なサービスを提供しています。
便利なのは、Google のアカウントを持っていれば誰でも利用できる事に加えて、一定の利用量（アクセスの数や利用しているファイルの容量など）が一定量以下の場合には、無料で利用できる所です。
したがって、初めて Web アプリを提供する場合の多くは、アクセス数や利用量は無料枠内に収まる場合が殆どなので、Firebase を利用して Web サービスを公開する場合には、費用がかからない場合が多くなります。つまり、無料で Web サービスが公開できるという事になります。
（＊）アクセス数や利用量が制限を肥えた場合には費用が発生します。
やり方は簡単！
Firebase を利用するには、Google のアカウントが必要です。 アカウントをお持ちでない場合には、まず Google のアカウントを作成してください。
Google のアカウントの準備ができたら、まずは、Firebase のサービスにログインします。
まず、公開したい Vue のプロジェクトフォルダに移動してください。 Vue のプロジェクトフォルダは、前回の投稿で作成したプロジェクトの一番上のレベルのフォルダです。そこで以下のコマンドを実行します。既に、ログインしている場合には、そのまま次のステップに行きます。ログインしていない場合には、Web ブラウザが立ち上がって、Google のアカウントへログインをするための、画面が出てくるのでログインしてください。
% firebase login
次にプロジェクトフォルダの Firebase 関連の情報を初期化します。
(*)事前に Firebase のプロジェクトをFirebase コンソールで作成しておきます。
Firebase のプロジェクトをこのコマンドの質問の中で作成する事も可能ですが、事前に作成しておいた方がスムーズに対応できます。これは、一般的なプロジェクトの名前は既に使われている場合が多く、重複する名前を入力した場合にはエラーになります。Firebase コンソールで作成する場合、使われていない名前になるようにしてくれるのでこうした問題が発生しません。
また、質問で注視する事は公開用のフォルダ（public directory）の標準設定は「public」になっていますが、Vite のスクリプトを使って、公開用のイメージを作成する場合、「dist」のフォルダに作成されるので、この指定を「dist」にする必要があります。後から変更も可能ですが、初期化の際に指定しておく方が無難です。
以下が実行例です。
% firebase init
######## #### ######## ######## ######## ### ###### ########
## ## ## ## ## ## ## ## ## ## ##
###### ## ######## ###### ######## ######### ###### ######
## ## ## ## ## ## ## ## ## ## ##
## #### ## ## ######## ######## ## ## ###### ########
You're about to initialize a Firebase project in this directory:
/Users/guest/Documents/vue-sample-project
? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices. Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Actio
n deploys
=== Project Setup
First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.
? Please select an option: Use an existing project
? Select a default Firebase project for this directory: test-xxxxx (test)
i Using project test-xxxxx (test)
=== Hosting Setup
Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.
? What do you want to use as your public directory? dist
? Configure as a single-page app (rewrite all urls to /index.html)? No
? Set up automatic builds and deploys with GitHub? No
✔ Wrote dist/404.html
? File dist/index.html already exists. Overwrite? No
i Skipping write of dist/index.html
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
✔ Firebase initialization complete!
%
作成した公開用のイメージをインターネットに公開する前に確認したい場合には、確認用の Web サーバー（firebase のエミュレータ）を起動して確認します。これは、「npm run dev」で Vite のスクリプトで開発用のサーバーを起動する場合とは違い、作成された「dist」フォルダの下の公開用のイメージを使って動作を確認できます。
% firebase serve
localhost:5000
又は
127.0.0.1:5000
を Web ブラウザでアクセスします。
問題なければ、
% firebase deploy
を実行すると、Web アプリがインターネット上に公開されます。 URL は Firebase コンソールの「Hosting」に行くと確認できます。プロジェクト名をベースにした URL でアクセスできます。 ご自分で、ドメインを持っている場合には、そのドメインを指定する事も可能です。（この記事では詳細は説明していません）
Firebase を利用するには、Google のアカウントが必要です。 アカウントをお持ちでない場合には、まず Google のアカウントを作成してください。
Google のアカウントの準備ができたら、まずは、Firebase のサービスにログインします。
まず、公開したい Vue のプロジェクトフォルダに移動してください。 Vue のプロジェクトフォルダは、前回の投稿で作成したプロジェクトの一番上のレベルのフォルダです。そこで以下のコマンドを実行します。既に、ログインしている場合には、そのまま次のステップに行きます。ログインしていない場合には、Web ブラウザが立ち上がって、Google のアカウントへログインをするための、画面が出てくるのでログインしてください。
% firebase login
次にプロジェクトフォルダの Firebase 関連の情報を初期化します。
(*)事前に Firebase のプロジェクトをFirebase コンソールで作成しておきます。
Firebase のプロジェクトをこのコマンドの質問の中で作成する事も可能ですが、事前に作成しておいた方がスムーズに対応できます。これは、一般的なプロジェクトの名前は既に使われている場合が多く、重複する名前を入力した場合にはエラーになります。Firebase コンソールで作成する場合、使われていない名前になるようにしてくれるのでこうした問題が発生しません。
また、質問で注視する事は公開用のフォルダ（public directory）の標準設定は「public」になっていますが、Vite のスクリプトを使って、公開用のイメージを作成する場合、「dist」のフォルダに作成されるので、この指定を「dist」にする必要があります。後から変更も可能ですが、初期化の際に指定しておく方が無難です。
以下が実行例です。
% firebase init
######## #### ######## ######## ######## ### ###### ########
## ## ## ## ## ## ## ## ## ## ##
###### ## ######## ###### ######## ######### ###### ######
## ## ## ## ## ## ## ## ## ## ##
## #### ## ## ######## ######## ## ## ###### ########
You're about to initialize a Firebase project in this directory:
/Users/guest/Documents/vue-sample-project
? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices. Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Actio
n deploys
=== Project Setup
First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.
? Please select an option: Use an existing project
? Select a default Firebase project for this directory: test-xxxxx (test)
i Using project test-xxxxx (test)
=== Hosting Setup
Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.
? What do you want to use as your public directory? dist
? Configure as a single-page app (rewrite all urls to /index.html)? No
? Set up automatic builds and deploys with GitHub? No
✔ Wrote dist/404.html
? File dist/index.html already exists. Overwrite? No
i Skipping write of dist/index.html
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
✔ Firebase initialization complete!
%
作成した公開用のイメージをインターネットに公開する前に確認したい場合には、確認用の Web サーバー（firebase のエミュレータ）を起動して確認します。これは、「npm run dev」で Vite のスクリプトで開発用のサーバーを起動する場合とは違い、作成された「dist」フォルダの下の公開用のイメージを使って動作を確認できます。
% firebase serve
localhost:5000
又は
127.0.0.1:5000
を Web ブラウザでアクセスします。
問題なければ、
% firebase deploy
を実行すると、Web アプリがインターネット上に公開されます。 URL は Firebase コンソールの「Hosting」に行くと確認できます。プロジェクト名をベースにした URL でアクセスできます。 ご自分で、ドメインを持っている場合には、そのドメインを指定する事も可能です。（この記事では詳細は説明していません）
HTML ファイルに実装した場合は？
前々回では、Vue の記述を HTML ファイルに直接埋め込む方法も紹介しています。 この場合でも、Firebase の Web ホスティング機能を利用する事が可能です。
HTML ファイルを Firebase の Web ホスティングを利用してインターネットに公開する場合には、プロジェクトフォルダを作成して、そのフォルダの下に、「public」というフォルダを作成して、「public」フォルダの下に、作成した HTML ファイルをコピーします。
その上で、上で説明したように、「firebase init」のコマンドを実行します。 この場合は、公開するフォルダは、作成した「public」フォルダになるので、公開用フォルダ（public directory)の指定は標準設定のままで問題ありません。
前々回では、Vue の記述を HTML ファイルに直接埋め込む方法も紹介しています。 この場合でも、Firebase の Web ホスティング機能を利用する事が可能です。
HTML ファイルを Firebase の Web ホスティングを利用してインターネットに公開する場合には、プロジェクトフォルダを作成して、そのフォルダの下に、「public」というフォルダを作成して、「public」フォルダの下に、作成した HTML ファイルをコピーします。
その上で、上で説明したように、「firebase init」のコマンドを実行します。 この場合は、公開するフォルダは、作成した「public」フォルダになるので、公開用フォルダ（public directory)の指定は標準設定のままで問題ありません。
まとめ
Firebase を利用すると、Vue で作成した Web アプリを手軽にインターネット上に公開する事ができます。 アクセス数や使用するサイズが小さい場合には、無料枠内での利用ならば費用も発生しません。
実際に、作成した Web アプリを特別なサーバーの契約をしないでもインターネットで公開できるので、実際にプログラムを開発した体験を実感しやすなります。このように、実際に「成功体験」を積み重ねることで、学習意欲を高めて効率的に学習を進める事が可能です。
次回は、Windows の PC を利用して開発する場合の設定のコツを紹介します。 Mac や Linux を利用する場合には、ほぼ似たやり方で「コマンドライン」のコマンドを実行できますが、Windows の場合は若干違う場合も多く混乱しやすい部分です。Mac を利用して開発する人も多いですが、Windows の PC の方が価格も安く手軽なので初心者の方は Windows PC を利用する方も多いと思いますので、この辺りを解説します。
2022 年 3 月 23 日にお届け予定です。お楽しみに！
Firebase を利用すると、Vue で作成した Web アプリを手軽にインターネット上に公開する事ができます。 アクセス数や使用するサイズが小さい場合には、無料枠内での利用ならば費用も発生しません。
実際に、作成した Web アプリを特別なサーバーの契約をしないでもインターネットで公開できるので、実際にプログラムを開発した体験を実感しやすなります。このように、実際に「成功体験」を積み重ねることで、学習意欲を高めて効率的に学習を進める事が可能です。
次回は、Windows の PC を利用して開発する場合の設定のコツを紹介します。 Mac や Linux を利用する場合には、ほぼ似たやり方で「コマンドライン」のコマンドを実行できますが、Windows の場合は若干違う場合も多く混乱しやすい部分です。Mac を利用して開発する人も多いですが、Windows の PC の方が価格も安く手軽なので初心者の方は Windows PC を利用する方も多いと思いますので、この辺りを解説します。
2022 年 3 月 23 日にお届け予定です。お楽しみに！
コメント
コメントを投稿