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

NuxtJSとは

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

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

https://ja.nuxtjs.org/

NuxtJSのメリット

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

環境構築

Nuxtの環境構築(Windows

下記コマンドを実行

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

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

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

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

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

今回はこのような設定

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

cd “プロジェクト名”

npm run dev

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

Firebaseで公開する

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

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

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

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

プロジェクト名→任意

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

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

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

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

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

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

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

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

npm install -g firebase-tools

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

Firebase login

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

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

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

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

firebase init hosting

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

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

これでFirebaseの準備が整ったので、デプロイしてみましょう。

 コマンドに戻り、まずはnuxtをビルドしましょう。

プロジェクトファイルで下記のコマンドを実行します。

npm run generate

 ビルド後に下記のコマンドを実行します。

firebase deploy

実行後に表示されているURLにアクセスしてみましょう。

これで終わりです、お疲れ様でした。

今後変更して公開する時には、下記のコマンドを順に使用するだけでOKです

npm run generate

firebase deploy

 

Smallitのサービス