Nuxt.js＠フレームワーク¶
はじめに¶
本サイトにつきまして、以下をご認識のほど宜しくお願いいたします。
01. Nuxt.jsとは¶
Vue.jsフレームワークを使用したフレームワークである。
02. Nuxt.js用yarnコマンド¶
serverモード (SSRモード)¶
▼ serverモードとは¶
アプリをSSRとして稼働させる。
▼ dev¶
開発環境のため、SSRアプリをビルドし、Nodeサーバーを起動する。
Webpackは使用されないため、静的ファイル (例：htmlファイル、cssファイル、画像、動画、メールなど) の圧縮や画像ファイル名のハッシュ化は実行されない。
# リファレンスでは nuxt devとなっているが、yarn devで問題ない。
$ yarn dev
補足として、yarn devコマンドを実行した場合、環境変数のNODE_ENVがdevelopmentになる。
▼ build¶
本番環境のため、Node.jsサーバーの起動前にSSRアプリのビルドを実行する。
devコマンドとは異なり、ビルド時にWebpackによる最適化が実行される。
これにより、.jsファイルと.cssファイルはminifyされる。
minifyにより、不要な改行やインデントが削除され、パッケージの読み出し用のURLはまとめられ、圧縮される。
画像名はハッシュ化される。
# リファレンスでは nuxt buildとなっているが、yarn buildで問題ない。
$ yarn build
▼ start¶
本番環境のため、yarn buildコマンドによるビルド完了後にNodeサーバーを起動する。
SSRモードのために使用する。
# リファレンスでは nuxt startとなっているが、yarn startで問題ない。
$ yarn start
補足として、yarn startコマンドを実行した場合、環境変数のNODE_ENVがproductionになる。
staticモード (SSGモード)¶
▼ staticモードとは¶
アプリをSSGとして稼働させる。
▼ dev¶
開発環境でSSGアプリを稼働させるために使用する。
Nodeサーバーを起動し、サーバー内でJavaScriptから静的ファイル (例：htmlファイル、cssファイル、画像、動画、メールなど) を作成する。
そのため、SSGモードで作成されるアプリは完全な静的ファイルでない。
また、buildコマンドとは異なり、Webpackは使用されないため、静的ファイルの圧縮や画像ファイル名のハッシュ化は実行されない。
# リファレンスでは nuxt devとなっているが、yarn devで問題ない。
$ yarn dev
補足として、yarn devコマンドを実行した場合、環境変数のNODE_ENVがdevelopmentになる。
▼ generate¶
本番環境でSSGアプリを稼働させるために使用する。
devコマンドとは異なり、Nodeサーバーは起動せず、そのままJavaScriptから静的ファイル (例：htmlファイル、cssファイル、画像、動画、メールなど) を作成する。
そのため、SSGは完全な静的ファイルからなる。
ビルド時にバックエンドに接続し、DBに格納したデータ (例：画像パス) を元に、静的ファイルをビルドできる。
SSGモードのために使用する。
# リファレンスでは nuxt generateとなっているが、yarn generateで問題ない。
$ yarn generate
▼ start¶
静的ホスティングサイトを起動する。
# リファレンスでは nuxt startとなっているが、yarn startで問題ない。
$ yarn start
補足として、yarn startコマンドを実行した場合、環境変数のNODE_ENVがproductionになる。
ビルド時のWebpackオプション¶
SSRモードとSSGモードで、buildコマンド時に使用されるWebpackの最適化方法を指定できる。
`
キャッシュ削除¶
Nuxt.jsのキャッシュはnode_modules/.cacheディレクトリ配下に作成される。
そのため、キャッシュを削除したい場合はこのディレクトリごと削除する。
$ rm -rf node_modules/.cache/hard-source/
03. nuxt.config.jsファイル¶
nuxt.config.jsファイルとは¶
Nuxtがデフォルトで用意している設定をプロパティの設定値で上書きできる。
各プロパティは以下のリンクを参考にせよ。
import {Configuration} from "@nuxt/types";
const nuxtConfig: Configuration = {
// プロパティ
};
process.envへの環境変数格納¶
▼ dotenvパッケージの利用¶
あらかじめ、dotenvモジュールをインストールしておく。
process.envから.envファイルの環境変数を参照する。
定数に代入する場合は、まとめて代入すると良い。
$ npm install @nuxtjs/dotenv
# APIのURL。サーバー上のJavaScriptからAPIに対するリクエストで使用する。
API_URL=https://example.com/api
# APIのURL。ブラウザ上のJavaScriptからAPIに対するリクエストで使用する。
API_URL_BROWSER=https://example.com/api
# APIのOAuthの情報
OAUTH_CLIENT_ID=
OAUTH_CLIENT_SECRET=
# Google MapのURL
GOOGLE_MAP_QUERY_URL=https://www.google.com/maps/search/?api=1&query=
# ホームパス
HOME_PATH=/
import {Configuration} from "@nuxt/types";
// envファイルから読み込んだ値を定数に格納する
const {
API_URL,
API_URL_BROWSER,
OAUTH_CLIENT_ID,
OAUTH_CLIENT_SECRET,
HOME_PATH,
} = process.env;
console.log(API_URL);
▼ 実行環境への出力¶
実行環境に環境変数を出力する。
# 仮想サーバー
$ export API_URL=https://example.com/api
# コンテナ
services:
nuxt:
environment:
API_URL: https://example.com/api
03-02. プロパティ¶
build¶
▼ hardSource¶
ビルド時のキャッシュを有効化するか否かを設定する。
ビルドの完了が早くなる。
import {Configuration} from "@nuxt/types";
const nuxtConfig: Configuration = {
build: {
hardSource: "true",
},
};
▼ privateRuntimeConfig¶
クライアントサイドのみで参照できる環境変数を設定する。
すなわち、SSRモードのクライアント側のみが対応している。
環境変数は、pages、store、components、pluginディレクトリで使用できる。
ブラウザのJavaScriptソースタブで公開されてしまうため、機密な変数は設定しないようにする。
もしpublicRuntimeConfigで同じ名前の変数が設定されていた場合は、この値を上書きする。
環境変数は、contextオブジェクトのconfig変数から取得できる。
import {Configuration} from "@nuxt/types";
const {API_KEY} = process.env;
const nuxtConfig: Configuration = {
privateRuntimeConfig: {
apiKey: API_KEY,
},
};
# .envファイル
API_KEY=*****
export function foo() {
// contextオブジェクトの$configプロパティを分割代入
const {$config} = useContext();
$config.apiKey;
}
▼ publicRuntimeConfig¶
サーバーサイドとクライアントサイドの両方で参照できる環境変数を設定する。
すなわち、全モード (SSG/CSR/SSRモード) が対応している。
環境変数は、pages、store、components、pluginディレクトリで使用できる。
環境変数は、contextオブジェクトのconfig変数から取得できる。
import {Configuration} from "@nuxt/types";
const {API_URL} = process.env;
const nuxtConfig: Configuration = {
publicRuntimeConfig: {
apiUrl: API_URL,
},
};
# .envファイル
API_URL=https://example.com/api
export function foo() {
// contextオブジェクトの$configプロパティを分割代入
const {$config} = useContext();
$config.apiUrl;
}
▼ quiet¶
ビルド時にログを最小限にする。
CIツールでログが確認できなくなるため、無効化しておいた方が良い。
import {Configuration} from "@nuxt/types";
const nuxtConfig: Configuration = {
build: {
quiet: "false",
},
};
▼ serverMiddleware¶
リクエストを受信できるエンドポイントと、紐付けるハンドラー関数を設定する。
import {Configuration} from "@nuxt/types";
const nuxtConfig: Configuration = {
serverMiddleware: [
{
path: "/foo",
handler: "~/foo/index.js",
},
],
};
buildModules¶
SSG/SSRモードのyarn dev (開発用コマンド) 、またSSRモードのyarn buildの時のみ、node_moduleディレクトリ内に作成するパッケージを設定する。
import {Configuration} from "@nuxt/types";
const nuxtConfig: Configuration = {
buildModules: ["@nuxt/typescript-build", "@nuxtjs/composition-api"],
};
04. ディレクトリ¶
distディレクトリ：distribution¶
SSGモードのgenerateコマンドの実行時に、アーティファクトが配置される。