こまけぇこたぁいいんだよ ─ のんびりVue.js超入門［第8回：SPA制作 -ビルド編- ］

posted : 2019.05.06

updated : 2019.05.07

こんにちは、ma-ya’s CREATE［まーやずくりえいと］です。

SPA制作も大詰め、今回はビルド編です。

ビルドからサーバーアップロードまでをサクッとやっていきたいと思います。

Vue CLIでビルドする

Vue CLIでビルドするには、プロジェクトからコマンドプロンプトを開いた状態で下記コマンドを打ち込みます。

npm run build

入力すると少しの間コマンドが停止したかのようになりますが、待っているとうにゃうにゃとビルドが始まります。

気長に一服でもしながら待ちましょう。

Build complete.
Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.

こんなメッセージが出たらビルド完了です。

プロジェクトに「dist」フォルダが追加される

ここでプロジェクト直下を見てみると、人知れず「dist」フォルダが追加されています。

中を見てみると index.html と staticフォルダがありますよね。

これらが実際にサーバーにアップロードするファイル群です。

staticフォルダの中を見てみましょう。

css / img / js それぞれのフォルダがあるハズ。

なんと制作時に src/assets に放り込んだcssファイルやimgファイルがフォルダ別に保存されているのです。

しかも使用するものだけ。

仮に src/assets 内に使用しない（＝index.htmlから読み込まれない）ファイルがあれば、ビルド時に無視されます。

だから僕たちはこの index.html と staticフォルダをマルっとサーバーにアップロードするだけなのです。

つまりビルドとはこんな感じに、作成した.vueファイルなどの諸々をまとめて、サーバーアップロード（本番反映）用のファイルを生成すること。

その面倒な作業をVue CLI氏は全て担ってくれます。

氏の献身に感謝。

dist/index.htmlはローカルでは動かない

ちなみにこのdistフォルダ内のindex.htmlはローカルからブラウザで開いても真っ白けになります。

この理由、実はビルド終了時に表示されるコマンドプロンプト上のメッセージに表示されてます。

もう一度メッセージを見てみましょう。

Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.

拙い英語力をフル動員して訳すと、

「ビルドファイルはサーバーにアップロードすること前提に生成したから、ローカルで開いても動かんよ」

と仰ってます。

ここでもVue CLI氏はわざわざ説明してくれているのです。

氏の細やかさに敬礼。

dist/index.html , dist/staticフォルダをサーバーにアップロード

します。

基本的にはこれで終了。

ちなみにアップロードする環境によっては本番のページも真っ白けになる場合があります。

最後にそこんとこ触れときましょう。

本番環境でもページが真っ白けになってしまう場合

自分は若干ここでハマったんですが、パスが通っていないことが原因でした。

先ずは解決方法から。

プロジェクト直下の「config」フォルダ内 index.js を編集する

config/index.jsをエディタで開いてみましょう。

よーく見ると、何やら「dev」と「build」の設定が書かれている模様。

編集するのは「build」の設定項目内、assetsPublicPathの値です。

build: {
～～省略～～
assetsPublicPath:'/',

これを

build: {
～～省略～～
assetsPublicPath:'./', //相対パス設定に変更（ピリオド追加）

こう変更します（わかりづらっ！）。

パス設定を「/」から「./」（ピリオドを追加）に変更して保存して下さい。

ざっくりぼんやり説明すると、ここは各種外部ファイル（css / js / img）を読み込むパスの設定項目みたいです。

このように設定をサイトルート相対パスから相対パスに書き換えることで真っ白け問題は解決するはず。

変更保存後は再び npm run build して dist/index.html , dist/staticをサーバーにアップロードし直しましょう。

dist/index.htmlだけでもたぶん大丈夫ですが、まあマルっとあげなおしちゃえばいいんじゃないですかね（適当）。

どうでしょう？自分はこれで無事解決しました。

真っ白け問題はなぜ起きたか？

興味ない方はスルーで。

今回の問題はビルドしたファイルをサーバーのルート直下にアップロードした場合は発生しません。

何らかの理由でルート以下に別ディレクトリを設けて、そこにビルドファイルをアップロードした場合に発生します。

ビルドの初期設定では各種外部ファイルの読み込みはサイトルート相対パスになっています。

つまりこのサイトで言えば、初期設定だと各種外部ファイルは http://54.199.215.175/static/～ のパスで読み込まれるわけです。

しかし別ディレクトリ(hoge)を設け、その中にビルドファイルをアップした場合、実際の外部ファイルの在りかは http://54.199.215.175/hoge/static/～ になります。

結果的にパスが通っていない状況。

Vue.jsはJSによって表示の出し分けを行うので、JSファイルが読み込まれないと何も表示されません。

だってHTMLには<div id=”app”></div>しかないんだもん…

ちなみに今回のように設定をサイトルート相対パスから相対パスに変更することで、ローカルでもdist/index.htmlが動くようになります。

初期設定ではdist/index.htmlがローカルで動かなかった理由もこれでわかりましたね。

と、考えてみれば当たり前の話なんですが、自分は若干ハマってしまいました。

恥ずかしいぞ、自分。

まとめ

Vue CLIのビルド初期設定では、サーバーのルートディレクトリにビルドファイルをアップロードすることが前提となっている

ここら辺がわかると、より臨機応変に対応出来そう。

勉強になりました。

終わりに

お疲れさまでした！

3回に分けてSPA制作を解説させて貰いました。

今回SPAを作るにあたっていろんなサイトの記事を参考にさせて貰ったので、まずは感謝。

その中で、制作実例としてソースも全部載せているところは体感的に少なく感じたので、この連載では僕なりのアプローチとしてなるべくコードは省かずに載せてみました。

結果かなり長くなりましたが、ある程度ソースを読み飛ばしても伝わるようにしたつもりです（わけわかんなかったらごめんなさい）。

ちなみに一応動作確認もしております。

この3回分の記事通りに進めて（ソースコードも記事から全てコピペ）、改めてビルドファイルをサーバーにアップしたページがこちら。

動作確認用DEMO

うむ。動いておる。

なお本サイトはこちら。

本サイト

※動作確認用DEMOは画像を用意してないのでファビコンは表示されません&レスポンシブ化もしてません（ソースが冗長になる為）。

というわけで全3回分見てくれた方がいるかどうかは定かではありませんが（涙）、以上でSPA制作編を終了とします。

どなたかの参考になればこれ幸い。

ではでは。