Vue.jsのプロジェクトの公開
Silicon Valley Super Ware
2020年5月27日
Vue.jsのプロジェクトの公開
VUE CLI を使って作ったWebサービスは、公開する前にやる事があります！ 「ディプロイメント」などと言われますが、作成したVueのファイルを標準的な ファイルに変換する作業「ビルド」が必要になります。
実際に裏方がやっていることは、スタティックのファイルのコピー。 これは、通常のHTMLファイルやCSSファイルなどは、そのままコピーされます。
VUEのプロジェクトで作ったファイル、VUEファイルなどは、事前処理されて 公開用の別のフォルダーに作られます。
公開用のファイルは、コメントなども取り除かれてサイズも小さくなります！
ソースファイルにはコメントなど実際の運用では必要ない情報もかなり含まれています。 VUE CLIを使うメリットは公開時にはそうした不要な情報は取り除く事が出来る事です！ 今日は、この「デプロイメント」について簡単に触れておきます。
Webサービスをどこに置くか？
最初に、確認する事は、WebサービスをWebホスティングのメインのフォルダーで公開するのか サブフォルダーで公開するかです。
VUE CLIを使って作った「１ページアプリ」は、基本的に「index.html」に埋め込まれる形で 作られます。このファイルをどこに置くかという事です。
メインのフォルダは例えば、URLが「https://www.siliconvalleysw.com/」のメインのフォルダ
すなわち、「https://www.siliconvalleysw.com/index.html」になる場合はメインのフォルダです。
サブフォルダの場合は、「https://www.siliconvalleysw.com/subholder/index.html」メインフォルダに、フォルダを作ってそこにおいて公開する場合です。
何もしないと、公開用のイメージは「メインフォルダー」に置く前提でつくられます。
これは、生成された公開用のファイルのパスの指定がメインフォルダーを前提につくられるからです。 サブフォルダーで公開する場合は、出来たファイルを手で直すか、設定を変更する必要があります。
設定のファイルは、「vue.config.js」が設定用のファイルです。 無い場合は、プロジェクトのフォルダに作成します。
module.exports = {
publicPath: "./",
};
これでどのフォルダで公開しても大丈夫になります！ 標準の設定ではプロジェクトのフォルダーの下に「dist」というフォルダが作られて その下に公開用のファイルが作られます。
公開用のファイルの生成
VUE UIを使っている場合は、「Task」メニューから「build」を選べば 公開用ファイルの生成のページに行けるので、「Run task」のボタンを押すだけです
CLIで実行する場合は「npm run build」で作れます。
開発環境に慣れてしまえば簡単に公開できます！
ここで考えるのが「どの部品」がデータベースに送るかです！
例えばフォームが送る場合、別のWebサービスで使う場合はこの 送る部分は多くの場合書き換える必要があります
一方で、フォームを部品として使って、フォームを使っている部品（ページ）が 送るようにした場合、フォーム自体は「親」に取り込んだデータを渡すという 機能にすれば、フォームを変更しないで別のWebサービスに使えます。
この場合、フォームの部品がする事は、ボタンが押されたイベントの通知と、 取り込んだデータを渡す事です。このイベントとデータを受け取ったページ（部品）が データをデータベースに送る処理をすると、部品化が効率よくできます。 今回はお問合せフォームの処理は非常に少ないため敢えて処理は分けませんでした。
ログインのフォームにも同じような事が言えます。 ログインのフォームでログインの処理をしないで、親のページ（部品）に ログインのイベントと取り込んだデータを送れば、ログインのフォームは いろいろなWebサービスで変更なしで使えます。 特に今回は管理ページのデータ処理を管理ページにまとめる事で、 他のページの作りを簡単にしてみました。
VUE ROUTERを使っている場合
Vue.jsのアプリケーションは基本的に「1ページアプリ」なのですが、 仮想的に、URLのように、「パス」を利用する事ができます。
標準の設定では、指定するパスの間に「＃」が入りますがこの場合は 特に問題はありません。Vue.js側での制御で上手く動作します。 この設定には「ヒストリーモード」というのがあって、 普通のURLの様に使えます。便利そうですよね！ しかし、一つ問題があります。
URLをブラウザーでタイプした時は動かない！？
これは、以前の投稿で書きましたが、普通にURLをブラウザでタイプすると、 ブラウザはサーバーにページを要求してしまうのでエラーになります。 その「パス」がサーバー上にないからです。
ページが存在しないという「４０４」エラーになります。 Vue.jsのUIの中ではブラウザーのURLの所に表示が出ていて上手く動いているように 見えますが、直接タイプすると問題が起きます。
これを避けるためには、Webサイトのホスティングをするサーバー側での設定が必要になります。
これも、いろいろ状況があって、Vue.jsの1ページアプリだけのサイト、 別なスタティックのファイルが混在するサイト、 サーバー側でも「Routing」をしている場合で、設定は変わってきます。 面倒な設定を避けるには、1ページアプリだけをそのドメインで使うのが簡単です。 基本的には、サーバー側でファイルが見つからなかった場合、Vue.jsのWebサービスで 使っている、「index.html」を使うように設定してしまえばOKです。
この場合、サーバー側で「４０４エラー」を検出できなくなりますので、 「４０４エラー」の処理を、Vue.jsのアプリケーション側で作る必要があります。 詳しい記述はVue.jsのオフィシャルサイトに書いてあります。このサイトは英語のサイトですが、日本語のサイトにもほぼ同じ記述があります。
一通り完成！
先月は普通にHTMLファイルにJavaScriptを追加するような形で作ったサービスですが、 今月はVue.jsを使って、基本的には「1ページアプリ」という形で実現しました。 Webサービスを提供するには同じような機能でもいろいろな作り方があります。
1ページアプリにすると、見かけ上はページが切り替わっても、 サーバーからのページの読み込みが起きないため見かけ上は 早く動いているように見えます。 また、ページの書き換え（レンダリング）も必要な部分だけを行うので だれでも簡単に快適に動くWebサービスが作れます。
如何でしたか？同じお問合せフォームでも、作り方を少し変えただけで 実際の開発もサービスの出来栄えもかなり違っていると思いませんか？ 両方実際に制作されたかたには良くお分かりかと思います。
まだの方は是非実際に作られて、その違いを体験するのが是非お勧めです。 違いを認識して、「便利さ」を納得することで、学習の為の「モチベーション」を 大きくアップする事ができます。 シリコンバレースーパーウエアでは皆様の実際の制作をサポートしています。 一人では難しくても、「一緒に」勧める事でハードルは一気に下がります！ 是非、一緒にやってみませんか！
シリコンバレースーパーウエアでは、シンプルなWebサービスの作り方だけではなく、 より複雑なWebサービスをテーマにした講座も同時に提供しています。 さらに、作ったWebサービスを利用したビジネスの展開まで考えたWebサービスの 作り方がわかるようになります。
興味のある方は今すぐお問合せください！
またよろしければ、ニュースレターの登録をお願いします！大体週一回お届けしています。ブログよりは一歩踏み込んだもっと濃い内容を発信しています。
コメント
コメントを投稿