ホスティングサービスの違いや比較については、下記を参考にしました。
＊Nuxt.js とは
Vue.js だと面倒だった実装を簡単にできるようにしたフレームワークです。PWA にも対応しています。Vue.js で SSR を実装しようとすると手間がかかるのですが、Nuxt.js を使うことで手軽に SSR のアプリを作ることができます。- SSR（Server Side Rendering）
初回のリクエストをサーバーサイドでレンダリングしてクライアント側に返す仕組みです。このため、SPA の欠点だった初期表示の遅さを改善することができます。ただ、レンダリングするためのサーバーが必要だったり、SPA と比べて実装が少し面倒といったデメリットもあります。ブログなど直帰率が高いサービスに向いています。
- SPA（Single Page Application）
単一ページで構成される Web アプリケーションのことです。ページ遷移せずに動的にレンダリングを行うので、高速に操作できるといった特徴があります。サーバーと通信する際は差分のみ読み込むため、通信量を削減することができます。
ユーザーが頻繁にページ遷移やコンテンツの操作を行う滞在時間の長いサービスが SPA に向いています。1画面で操作することで待ち時間を最小限にできますが、初期ローディングが長く SEO に懸念があるというデメリットもあります。（SSR を用いることで高速化することができます）
- PWA （Progressive Web Apps）
モバイル向け Web サイトをスマホアプリのように使える仕組みです。レスポンシブデザイン、HTTPS化、オフラインやプッシュ通知などといった Google が定める要素を備えた Web サイトを PWA と呼びます。PWA は Service Workerというクライアントのバックグラウンドで動作するスクリプトによって実現され、この実装によってUX の向上につながると注目されています。
＊Firebase とは
Backend as a Service（BaaS）と呼ばれており、Webアプリケーションやモバイルアプリケーションのバックエンドで行う機能を提供するクラウドサービスです。バックエンドの処理を代行することで、開発にかかる時間や手間を省略することができ、クライアントサイドの開発に集中することができます。無料プランがあるので、個人での開発にも利用しやすく、リーズナブルな料金で使うことができます。特徴としては、リアルタイムでデータ同期ができる「Firebase Realtime Database」があります。クラウドホスト型 NoSQL データベースで、データは JSONフォーマットで保存されます。アプリのクロスプラットフォーム開発環境が注目されており、Swift や Java、JavaScript、Unity、React Native などの言語に対応しています。アクセス分析や認証、クラウドメッセージング（異なるデバイス間の通信）といったアプリ開発に必要な機能が一通り揃っており、無料で使えることも大きな特徴となっています。
＊参考
＊環境
- MacOS
- npx 10.2.0
- create-nuxt-app 2.9.2
- nuxt 2.8.1
- firebase-tools 7.2.2
- firebase 6.3.4
＊Nuxt プロジェクトの作成
$ sudo npm install -g npx
$ npx create-nuxt-app nuxt-app
create-nuxt-app v2.9.2
✨ Generating Nuxt.js project in nuxt-app
? Project name nuxt-app
? Project description My gnarly Nuxt.js project
? Author name tominagamaya
? Choose the package manager Npm
? Choose UI framework Bulma
? Choose custom server framework Express
? Choose Nuxt.js modules Axios, Progressive Web App (PWA) Support
? Choose linting tools ESLint, Prettier
? Choose test framework Jest
? Choose rendering mode Single Page App
ローカル環境でアプリケーションを起動します。
$ cd nuxt-app/
$ npm run build
$ npm run start
下記にアクセスすると、Nuxtのサンプル画面が表示されます。
http://localhost:3000/
ディレクトリ構成やファイルの詳細については こちら の過去の記事に書きました。
＊Firebase のセットアップ
Firebase のコンソール からプロジェクトを作成します。
プロジェクトの作成ができたらターミナルで下記コマンドを実行し、
Firebase CLI をインストールします。
$ sudo npm install -g firebase-tool
Firebase にログインします。
ブラウザが起動して認証画面が表示されます。
$ firebase login
Firebase のホスティングの初期設定を行います。
使いたいサービスなどホスティング以外も設定したい場合は
firebase initを実行します。いくつか質問されて適宜答えていけば問題ないのですが、ディレクトリについては今回は
distと入力します。（Nuxt は静的ファイルの生成場所がdistになるため）$ firebase init hosting
## Firebaseのホスティングにアップして公開するディレクトリ
? What do you want to use as your public directory? (public) dist
プロジェクトをビルドします。
$ npm run build
ここまでのディレクトリ構成は下記になっています。
nuxt-app
├── README.md
├── assets
├── components
├── database.rules.json
├── dist
├── firebase.json
├── functions
├── jest.config.js
├── layouts
├── middleware
├── node_modules
├── nuxt.config.js
├── package-lock.json
├── package.json
├── pages
├── plugins
├── public
├── server
├── static
├── store
└── test
ビルドに成功したら Firebase にデプロイします。
$ firebase deploy
コマンド実行後、最後に表示される
Hosting URLにアクセスすると、ローカル環境と同様に Nuxt のサンプル画面が表示されます。https://{project-id}.firebaseapp.com
＊所感
Nuxt.js と Firebase を使って、SPA + SSR + PWA を取り入れたアプリが簡単にできるらしく実際に試したかったのですが、まずは Firebase との連携だけ試してみました。また、Nuxt プロジェクトを作成する方法として
starter-templateを使っている記事をよく見かけたのですが、こちらの方法だと依存関係の解決がうまくいかなかったので、公式ドキュメント通りcreate-nuxt-appを使いました。使いこなせるようもっと勉強しておこうと思います。Sign up here with your email
ConversionConversion EmoticonEmoticon