SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

JavaScriptフレームワーク「Vue.js」と「Nuxt.js」の活用

「Nuxt.js」で作ったWebページをインターネットで公開する方法

JavaScriptフレームワーク「Vue.js」と「Nuxt.js」の活用 第7回

  • X ポスト
  • このエントリーをはてなブックマークに追加

モバイル/Webアプリ開発向けに「Firebase」で公開する

 「Firebase」は、Googleが提供する、モバイルアプリ・Webアプリ向け開発プラットフォームです。プッシュ通知やアクセス解析(Analytics)などの機能を提供しますが、この中で静的Webページをホストする「Firebase Hosting」と、JavaScriptで記述した関数をサーバーレスで実行する「Firebase Functions」を組み合わせて利用すると、Nuxt.jsのプロジェクトを実行できます。

 以下では、Firebaseのアカウント(Googleアカウント)は取得済みで、コマンドラインツール「Firebase CLI」をインストールし、CLIでアカウントにログイン済みの状態を想定します。FirebaseおよびFirebase CLIの基本的な利用方法は、公式ドキュメントを参照してください。

 FirebaseのWebページで新規プロジェクトを作成します。最初のページでプロジェクト名(例えば「p004-firebase」)を入力します。次に要求されるGoogle Analyticsの設定は無効にしてプロジェクト作成を完了します。

図8:Firebaseに新規プロジェクトを作成
図8:Firebaseに新規プロジェクトを作成

 Nuxt.jsのプロジェクトフォルダーで、Firebase CLIの「firebase init」コマンドを実行します。使用するサービスを選択する画面が表示されるので、「Functions」と「Hosting」を選択します(図9)。また、プロジェクトの選択が要求される画面では、先ほど作成したプロジェクトを選択します。それ以外の選択肢はデフォルトを受け入れます。

図9:Firebase CLIで使用するサービスを選択(P004-firebase)
図9:Firebase CLIで使用するサービスを選択(p004-firebase)

 Firebaseの設定ファイルfirebase.jsonを、リスト8の通り編集します。

[リスト8]Nuxt.jsプロジェクトを公開するFirebaseの設定ファイル(p004-firebase/firebase.json)
{
  // Hostingの設定 ...(1)
  "hosting": {
    "public": "static", // 公開フォルダー ...(1a)
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [ // リクエストを関数に転送する設定 ...(1b)
      {
        "source": "**",
        "function": "nuxtFunc"
      }
    ]
  },
  // Functionsの設定 ...(2)
  "functions": {
    "functions": {
      "source": "functions"
    }
  }
}

 (1)はHostingの設定で、デフォルト設定からの変更点は(1a)と(1b)です。(1a)は公開ファイルの設定で、ここではアイコンファイル(favicon.ico)が配置されているstaticフォルダーを指定します。(1b)はリクエストを関数に転送する設定で、sourceが「**」の(つまりすべての)HTTPリクエストを、nuxtFuncという関数に転送するよう設定します(nuxtFuncの詳細は後述)。(2)はFunctionsの設定で、関数のソースコードがfunctionsフォルダーにあることを表しています。

 次に、リクエストが転送される関数を実装します。まずfunctionsフォルダーで「npm install nuxt」コマンドを実行して、Nuxt.jsのライブラリーをダウンロードします。次に、package.jsonの記述をリスト9の通り変更して、Node.jsのバージョン8を利用するようにします。これは、Firebaseの無料アカウントでFunctionsを動作させるためです(後述の補足を参照)。

[リスト9]FunctionsのNode.jsをバージョン8にする設定(p004-firebase/functions/package.json)
{
(略)
  "engines": {
    "node": "8" // デフォルトでは「12」が設定されている
  },
(略)
}

 関数の処理に対応するfunctions/index.jsを、リスト10の通り実装します。

[リスト10]関数の実装(004-firebase/functions/index.js)
const functions = require('firebase-functions');
// loadNuxtをインポート ...(1)
const { loadNuxt } = require('nuxt');
// Function「nuxtFunc」の定義 ...(2)
exports.nuxtFunc = functions.https.onRequest(async (req, res) => {
  // loadNuxtでNuxtインスタンスを取得 ...(2a)
  const nuxt = await loadNuxt('start');
  // NuxtインスタンスでFunctionのリクエストを処理 ...(2b)
  return nuxt.render(req, res);
});

 (1)で、Nuxt.jsのオブジェクトを取得するloadNuxtメソッドをインポートします。(2)のexport.nuxtFuncメソッドで、リスト8(1b)でリクエストの転送先に設定したnuxtFunc関数を実装します。(2a)のloadNuxtメソッドの戻り値で取得できるnuxtは、Nuxt.jsの機能を実行できるオブジェクトです。loadNuxtメソッド引数の「start」は本番(production)モードを表します。取得したnuxt変数のrenderメソッド(2b)にHTTPリクエストとレスポンスを渡して実行すると、すべてのHTTP処理をNuxt.jsで行うようにできます。

 リスト10の関数は、functions/.nuxtフォルダーに配置されたNuxt.jsのビルド成果物を実行するので、functions/.nuxtフォルダーにビルド成果物をコピーする必要があります。このコピーを行うため、プロジェクトルートのpackage.jsonでビルドコマンドをリスト11の通り修正します。

[リスト11]ビルドコマンドの修正(004-firebase/package.json)
{
(略)
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build && npm run copyfunc", // ...(1)
    "copyfunc": "rimraf functions/.nuxt && cpx .nuxt/dist/**/* functions/.nuxt/dist", // ...(2)
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
(略)
  "devDependencies": { // ...(3)
    "cpx": "^1.5.0",
    "rimraf": "^3.0.2"
  }
}

 ビルドコマンド(1)で、プロジェクトのビルド(nuxt build)を行った後、(2)で定義したcopyfuncを実行するようにします。copyfuncでは既存のfunctions/.nuxtを削除後、Nuxt.jsのビルド成果物をfunctions/.nuxtにコピーします。なお、copyfuncで使用しているrimraf(ファイル/フォルダーを階層的に削除)とcpx(ファイル/フォルダーを階層的にコピー)コマンドは、「npm install --save-dev <パッケージ名>」コマンドで、開発に必要なパッケージとしてインストールします。インストール後、package.jsonに(3)が追記されます。

 「npm run build」コマンドを実行してビルド後、「firebase serve」コマンドを実行してWebブラウザーで「http://localhost:5000/」を開けばローカルで実行を確認できます。また、「firebase deploy」コマンドでFirebaseにNuxt.jsを反映でき、「https://<プロジェクト名>.web.app/」で、Firebaseに反映されたWebページを表示できます。

[補足]Firebase FunctionsでNode.js 10/12を利用するには従量課金プランが必要

 Firebase Functionsの現行バージョンでは、Node.jsのバージョン10と12がサポートされていますが、これらを利用するには従量課金制プランへの登録が必要です。バージョン8は従量課金制プランへ登録せず利用できますが、すでに非推奨になっており、2021年2月に新規登録ができなくなり、3月に完全に廃止されます。

図10:Firebase FunctionsのNode.jsバージョン(公式ドキュメント(https://firebase.google.com/docs/functions/manage-functions#set_nodejs_version)より)
図10:Firebase FunctionsのNode.jsバージョン(公式ドキュメントより)

 本記事のサンプル(004-firebase)は、リスト9のNode.jsバージョン設定を変更して、Firebaseの従量課金制プランに登録すれば、バージョン10や12でも動作します。

まとめ

 本記事では、Nuxt.jsのプロジェクトをインターネット上に公開する方法を説明しました。静的ファイルを生成することで、Node.jsを実行できないWebサーバーでもWebページを公開できます。また、Node.jsを実行できるHerokuやFirebaseのサービスに公開すれば、Nuxt.jsのサーバーサイドレンダリングを動作させることができます。

 本連載では、環境を構築してWebページを作成し、インターネットへ公開するまでの手順を通して、Nuxt.jsの要点を紹介してきました。Nuxt.jsは、Webページ開発に必要なものをまとめて提供してくれるので、比較的手軽にスタートできる環境といえます。本連載を通して興味を持っていただけたなら、単純なサンプルページを表示するところからでも、Nuxt.jsにチャレンジしてみてはいかがでしょうか。

参考資料

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
JavaScriptフレームワーク「Vue.js」と「Nuxt.js」の活用連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/13422 2021/01/29 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング