Nuxt.js で始める Webサイト制作

サイトのファイルを生成する

Nuxt.js で作成した サイトを Web サーバに公開する手順を確認してみましょう。

ここまでで作成したvueファイルやscsssなどのファイルは、 そのままではブラウザで上で利用することが出来ないため、 「ビルド」と呼ばれる操作を経て、通常のhtml/css/JavaScriptを利用したサイト構成に変換する必要があります。

# サイトのファイルを生成する

vueファイルは、Vue.js専用の特殊なファイル形式であるため、 ブラウザ側で直接その内容を表示することが出来ません。

開発作業中は、npm run dev で起動したサーバ上で html/css/JavaScriptへの変換が自動で行われているため、 ブラウザ上でその表示を確認できます。

通常のWebサーバ等を用いてNuxt.jsで作成したサイトを公開する場合、 vueファイルをhtml/css/JavaScriptに変換したものをFTP等でUploadして公開作業を行います。

Nuxt.jsで作成したWebサイトをhtml/css/JavaScriptに変換する場合、 以下のコマンドを実行します。

$ npm run generate

上記のコマンドを実行すると、 dist フォルダが作成され内部にファイル群が展開されます。

distフォルダの中身はデフォルトで .gitignore に指定されています。 ソースコードをGit等のバージョン管理ツールで管理している場合、 distのようなコマンド経由で生成されるファイルは、バージョン管理の対象に含めないのが一般的です。

# 画像やサーバ設定ファイルの配信

static フォルダに配置したファイル群は、 npm run generate 実行時に 自動的にそのままdistフォルダに展開されます。

favicon.icoやサーバ上で利用する .htaccess、その他画像やPDF等のWeb上で利用する静的なファイルは、 staticフォルダに格納しておくことで、 サイト生成時に dist フォルダに含めることが出来ます。

# Nuxt.jsプロジェクトの公開

FTP等で公開作業を行うレンタルサーバを利用している場合、 手元で npm run generate を実行し、 生成される dist フォルダの中身を FTP等を用いてドメイン直下に展開することで、Webサイトを公開することが出来ます。

Netlify等のビルド付きサービスを利用する場合は、以下のような設定を行うことで、 Webサイトの公開を行うことができるでしょう。

  • ビルド向けのコマンド : "npm run generate"
  • 公開ディレクトリ： "dist"

# Check!

次のステップに進む前に以下の内容をもう一度確認しておきましょう。

  • npm run generate コマンドでdistフォルダにファイルが生成されるのを確認しておきましょう。
  • static フォルダに配置したファイルの内容が、npm run generate コマンド実行時にdistフォルダに展開されるのを確認しておきましょう。

← 画像の管理 →