WINDIIテック現役フリーランスエンジニアが運営するテックメディア。Firebaseを利用すると、簡単にFirebaseホスティングでWEBアプリケーションを公開することが出来ます。この記事では、Nuxt.js+Firebaseでアプリケーションを公開するまでの流れを解説します。(全て見る)Nuxt.jsとは?Vue.jsをベースとしたSPA(シングルページアプリケーション)フレームワークです。ルーティング不要、デフォルトでSSR(サーバーサイドレンダリング)対応。使いやすくて、高機能なので、サクッとSPAを実装する事ができます!公式の自己紹介。アプリケーションを構築するためのミニマルなフレームワークです!Nuxt.jsFirebaseとは?Firebaseとは、Googleの提供するmBaaSです。略で、直訳するとモバイル用バックエンドサービスです。その名の通り、モバイル用のバックエンド機能を包括的にサポートしてくれています。バックエンド機能の例としては、以下のようなものがあります。Messagingこのような機能を使う事で、サーバーサイド側のフレームワーク、Rails、Laravel等でのバックエンド開発をせずにWebアプリを公開する事ができます。Firebaseを始める今回は、Firebaseのホスティング機能を利用して、Webアプリを公開しますのでFirebaseへの登録が必要です。言っても、FirebaseはGoogleアカウントさえあれば、ログインしてすぐ使い始める事ができます。以下のリンクより、Firebaseにアクセスし、右上のコンソールへ移動を選択してください。Firebaseプロジェクトを追加から任意のプロジェクト名を追加し、プロジェクトを作成を選択してください。次はターミナルでの作業に移ります。FirebaseツールのインストールターミナルからFirebaseを操作する為には、firebase-toolsが必要です。firebase-tools以上でFirebase側の下準備は終了です。コマンドを実行してみましょう。initはい、かっこいい!次にNuxt.jsのプロジェクトを作成します。description,Authorを聞かれますが、全部enter押して大丈夫です。TypeScriptで作成したい場合は、以下の記事が参考になります。本記事では、NuxtをTypeScriptで開発できるテンプレートをサクッと入れて立ち上げる方法を解説します。タイトルの通り5分あればできます。CliはVue開発をサポートしてくれるコマンドラインツールです。devhttp://localhost:3000にアクセスしてみましょうこのような画面が出たら成功です。firebase次にfirrebase.jsonを作成します。ターミナルで新規タブを開いて以下のコマンドを入力してください。構成ファイルが作成されます。使用してサイトをデプロイするために必要です。directory:と聞かれますので、先ほどFirebaseで作成したnuxt-projectを選択してください。distと返答します。publicのままにすると、project直下にpublicディレクトリが作成されます。/index.html)?はnoを選択します。complete!次にNuxtアプリをFirebaseのプロジェクトに公開します。--add先程作成したnuxt-projectを選択してください。deployHostingURLにアクセスすると先程と同じ画面が見られる事が確認できます。最新の記事WINDIIWINDII(ウィンディ)は、フリーランスエンジニアが運営するテックメディアです。Slackで無料コミュニティも運営しています。たくさんのエンジニアが参加していて、プログラミングの相談や雑談などをしている楽しいコミュニティなので、興味ある方はぜひお気軽にご参加ください。Contentful。Contentful。Contentful。)この記事へのコメントはありません。この記事へのトラックバックはありません。URL返信をキャンセルする。