2021.12.16

NuxtJSの環境構築から公開まで

NuxtJSとは

NuxtJSとはVue.jsのフレームワークです。日本語のドキュメントも用意されており、Vueを触ったことがある方なら学習コストも低く使うことができます。

Firebaseなどのhostingサービスを使えば簡単に公開することができます。

https://ja.nuxtjs.org/

NuxtJSには下記の方法で開発を行えます
SSR（サーバーサイドレンダリング）→表示時間が早く、SEOに強い（SPAのデメリットを解消）
SPA（シングルページアプリケーション）→最初にすべてのページを読み込み、変更だけをサーバー側から取得するので動作が早い
学習コストが低い
開発に集中できる（必要なツールなどを用意してくれている）

Nuxtの環境構築（Windows）

下記コマンドを実行

プロジェクトを作成したいディレクトリで下記コマンドを実行

npx create-nuxt-app “任意のプロジェクト名”

1	npx create-nuxt-app “任意のプロジェクト名”

今回のプロジェクト名は「sampleProject」

この画面でエンターを押すと、下記の選択画面が順番に表示される。

Project name:→入力なしでエンターを押すと最初に入力したプロジェクト名になる
Programing language:→JavascriptかTypescriptを選択。
Package manager:→YarnかNpmを選択。
UI framework→開発で使用するフレームワークを選択する項目。今回は何も使用しないのでNoneを選択。
Nuxt.js modules→追加機能を選択する項目。PWA化する際やAxiosを使用する際にはこちらで選択。今回は何も使用しないのでNoneを選択。
Linting tools:→今回は何も使用しないのでNoneを選択。
Testing framework→今回は何も使用しないので何も選択しない。
Rendering mode→Webサイトの表示方法を選択。Universal (SSR / SSG)かSingle Page Appで選択。今回はSPAを選択。
Deployment target：今回はstaticを選択。
Development tools→開発に使うツールを作成する項目。今回は何も選択せず進めます。
What is your GitHub username→Gitアカウントがあれば入力、なければそのままエンターでOK

今回はこのような設定

上記設定後の下記のようなコマンドが表示されるので、実行しましょう

cd “プロジェクト名”

npm run dev

cd “プロジェクト名”

npm run dev

上記のコマンドで実行後にURLが表示されるので、そのURLからページを表示できれば成功です。

先ほど作成したプロジェクトを公開しましょう。

今回はFirebaseを使用するので、事前にGoogleアカウントを作成しましょう。
https://firebase.google.com/?hl=ja

ログインしたら右上のコンソールへ移動から、プロジェクトを作成。

順番に項目を入力します。

プロジェクト名→任意

Googleアナリティクス→そのまま次へ

アナリティクスの構成→任意の項目を選択して次へ

プロジェクトを作成ボタンを押下でプロジェクト作成完了

左のメニューからhostingを選択

設定はそのままで、次へボタンを押下して進める

この画面まで進めば設定は完了です

これでfirebaseの設定は以上です。コマンド画面へ戻りましょう。

初めてfirebaseを使用する場合は、まずは下記のコマンドを実行します

npm install -g firebase-tools

1	npm install -g firebase-tools

上記の設定が終わったら下記のコマンドでfirebaseにログインします

Firebase login

1	Firebase login

この時のアクセスリポーティングについて聞かれますが、任意の方を選択でOKです

上記コマンド実行後にブラウザでログイン画面がでるのでログインしてください。

下記の画面が出たら成功です

次に作成したプロジェクトのディレクトリで下記コマンドを実行します。

firebase init hosting

1	firebase init hosting

表示される項目について、今回は下記のように選択します

Are you ready to proceed?→Yを選択
Please select an option→Use an existing projectを選択
Select a default Firebase project for this directory→先ほど作成した「sampleproject-15769」を選択
What do you want to use as your public directory?→nuxtのデフォルト吐き出しディレクトリの「dist」を選択します
Configure as a single-page app→yを選択
Set up automatic builds and deploys with GitHub?→Nを選択