Webサービスの公開！の最終ステップ！
Silicon Valley Super Ware
2020年5月18日
Webサービスの公開！
セキュリティルールも設定して、Webサービスの公開の準備はできました。 今回は、UI(ユーザーインターフェース)の作成にVue.jsを利用しました。 特に、VUE CLIを使って作った場合は公開の前にやる事があります。VUE CLIでUIを作る場合、殆どのファイルは「*.vue」というファイルになっています。 CDNで作る場合は、HTMLファイルなのでそのまま公開できますが、 VUE CLIで作った場合は、一つ余分な仕事をする必要があります。
それは、公開用のイメージを作る事「build」という作業が必要になります
それで、作ったイメージを公開するというステップになります。VUE CLIを使うもう一つの利点
ご存じの方も多いと思いますが、基本的にJavaScriptのプログラムは Webブラウザーから見る事ができます。これは基本的には何をしても 変わりません。ただ、一つできる事があります。
読める事に変わりはありませんが、読みにくくする事はできます。 VUE CLIで公開用のイメージを作る際に、JavaScriptをまとめて コメント行などを除いてサイズを小さくするような事をやってくれます。
読めなくなるわけではありませんが、読みにくくなります。
メリットと言えるほどの事ではありませんが、そうした利点はあります。その他の注意点
後は、公開する際にどこにWebサービスを置くかという事も 考慮する必要があります。公開するドメインのルート（メインのフォルダ）にWebサービスを 置いて公開する場合は問題にならない事が多いのですが、 サブフォルダーにおいて公開する場合は公開用のイメージを作る前に 設定をする必要があります。
その場合は、VUEのプロジェクトフォルダーに、「veu.config.js」という ファイルをおいて設定を追加する必要があります。
module.exports = {publicPath: "./"};
の一行が必要になります。この設定をすれば、サイトのどのフォルダーに Webサービスをおいても公開する事ができます。 このファイルがないと、サイトの「ルートフォルダー」以外では機能しない ような参照パスを使って公開用のイメージが作られてしまいます。ページのルーティング
VUE ROUTERを使う場合も注意が必要です。標準の設定では問題になりませんが、「history.pushState」を使う場合は 注意が必要です。標準の設定では「Hash」モードで、ページの再読み込みを しないで、「見た目」のページを切り替えています。URLに「xxxx/#/oooo」と言った 感じで、間に「＃」が入ります。
このやり方では、VUEがサーバーに関係なく「表示」のみを切り替えているので 問題はありません。「＃」が入る事で、「ページ内」とみなされてページの再読み込みが 起きないからです。（つまりサーバーは一切関与しない）
しかし、「history.pushState」で使うと「＃」は入らなくなるのですが、 「＃」が無いために通常の設定ではサーバーにページを要求する事になります。 しかし、あくまでVUEの内部で「仮のURL」として使っているだけなので 実際のサーバーには指定した「パス（path）」が存在しないのでエラーになります。
これは、HTTPでページが見つからないえら「４０４エラー」として扱われます。 これをエラーにしないで、1ページアプリのindex.htmlにRoutingするための 設定が必要になります。
設定のやり方はホスティングしているサーバー側の実装によりやり方が変わってきます。
やり方は、インターネットを検索すると日本語を含めて沢山の情報が出てくるので ブログでは省略させて頂きます。「VUE Router History.pushState」で検索すれば 詳しい解説が幾つか出てきます。シリコンバレースーパーウエアでは、シンプルなWebサービスの作り方だけではなく、 より複雑なWebサービスをテーマにした講座も同時に提供しています。 さらに、作ったWebサービスを利用したビジネスの展開まで考えたWebサービスの 作り方がわかるようになります。
興味のある方は今すぐお問合せください！
またよろしければ、ニュースレターの登録をお願いします！大体週一回お届けしています。ブログよりは一歩踏み込んだもっと濃い内容を発信しています。
コメント
コメントを投稿