CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
目次

静的ファイルを生成してWebサーバーで公開する

 Nuxt.jsでは、WebサーバーにNode.jsを必要としない静的ファイルを生成できます。まず、Nuxt.jsの設定ファイルnuxt.config.jsで、生成ターゲットをstaticに設定します。

[リスト2]Nuxt.jsで静的ファイルを生成する設定(p002-static/nuxt.config.js)
export default {
(略)
  // 静的ファイルを生成する設定
  target: 'static'
}

 次にコマンドラインで「npm run generate」コマンドを実行すると、静的ファイルが生成されて、プロジェクトのdistフォルダーに配置されます。サンプルのページコンポーネントはトップページと(全メーカー共通の)詳細ページの2個しかありませんでしたが、静的ファイルの生成処理では図4の通り、トップページとApple、Google、Sumsungの各メーカーに対応する詳細ページのHTMLが生成されます。

図4:生成された静的ファイルの内容
図4:生成された静的ファイルの内容

 サンプルコードには、生成されたdistフォルダーをWebサーバーで表示する、p002-static-generatedプロジェクトを含んでいます。プロジェクトのフォルダーで「npm install」を実行してライブラリーをダウンロード後、「npm run start」コマンドで実行して、Webブラウザーで「http://localhost:8080/」を開くと、図1と同じ内容のWebページが表示されます。静的ファイルではサーバーサイドレンダリングが機能しないため、JavaScriptを無効にするとページ表示日時が更新されない(静的ファイルを生成した日時になる)ことが確認できます。

図5:JavaScript無効時の静的ファイル表示(p002-static-generated)
図5:JavaScript無効時の静的ファイル表示(p002-static-generated)

サーバーサイドでNode.jsが利用できるHerokuにWebページを公開

 Herokuは、Webサーバーを意識せずにWebページをインターネット上に公開できるPaaS(Platform as a Service)です。HerokuはサーバーサイドでNode.jsを動作できるため、Nuxt.jsで作成したWebページをそのまま公開できます。

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

 まず、HerokuのWebページで新規アプリを作成します。任意のアプリ名(例えば「p003-heroku」)を入力し、リージョンは「United States」と「Europe」から選択します。

図6:Herokuに新規アプリを作成
図6:Herokuに新規アプリを作成

 HerokuにアップロードするNuxt.jsのプロジェクトは、Gitリポジトリで管理されている状態にします。Gitリポジトリを設定していない場合、プロジェクトのフォルダーでリスト3のコマンドを実行して設定します。(1)でリポジトリを初期化、(2)でソースコードをリポジトリに追加して、(3)でコミットします。「Initial commit」はコミットメッセージです。

[リスト3]Nuxt.jsプロジェクトにGitリポジトリを設定するコマンド
git init                       #...(1)
git add --all                  #...(2)
git commit -m 'Initial commit' #...(3)

 Nuxt.jsのプロジェクトに、Procfileというファイルを追加して、リスト4の通りHerokuの動作を記述します。「web」はWebページを公開する際に実行するコマンドを表し、ここでは「nuxt start」コマンドでNuxt.jsのWebページを表示するよう設定します。

[リスト4]Nuxt.jsのWebページを表示するHerokuの設定ファイル(p003-heroku/Procfile)
web: nuxt start

 Nuxt.jsのプロジェクトフォルダーでリスト5のコマンドを入力して、Nuxt.jsのGitリポジトリに、Herokuのアプリをリモートリポジトリとして関連付けます。

[リスト5]Nuxt.jsのGitリポジトリにHerokuアプリを関連付けるコマンド
heroku git:remote --app <アプリ名>

 リスト6のコマンドで、Herokuのアプリに対して設定を適用します。(1)はインターネットから通信を受け付けるための設定で、(2)は、開発環境ではなく、本番環境で実行する設定です。

[リスト6]Herokuのアプリに設定を適用するコマンド
heroku config:set HOST=0.0.0.0        #...(1)
heroku config:set NODE_ENV=production #...(2)

 リスト7のコマンドでHerokuにNuxt.jsプロジェクトを反映させます。この操作は、Gitのリポジトリ(masterブランチ)を、リモートブランチherokuにプッシュする操作です。

[リスト7]HerokuにNuxt.jsプロジェクトを反映するコマンド
git push heroku master

 HerokuアプリのURL(「https://<アプリ名>.herokuapp.com/」)にアクセスすると、図1と同じ内容のWebページが表示されます。サーバーサイドレンダリングも機能するので、ブラウザーのJavaScriptを無効にしても、図7の通りページ表示日時が都度更新されます(日時がGMTで表示されていることに注意してください)。

図7:Herokuのサーバーが生成したページ表示日時(p003-heroku)
図7:Herokuのサーバーが生成したページ表示日時(p003-heroku)

  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

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

著者プロフィール

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

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

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

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5