Vue.jsアプリ・サイトのホスティングサーバーの選び方

ホスティングサーバーを選ぶ際のポイント

ビルドサービスがあるか？

Vue.jsは、Webアプリを構築した後に必ずビルドをする必要があります。ですので、ホスティングサーバーにビルド機能があると非常に便利です。

ビルド機能がなくてもローカルでビルドして出力結果をアップロードする運用も可能ですが、プログラムを書くことに専念して、ビルド・リリースはお任せした方が作業効率が高くなります。

レポジトリサービスに対応しているか？

Vue.jsなどを利用している場合は、gitでソースコードを管理するのがポピュラーで、最新のコードはgitのリモートサーバーにあることがほとんどです。

ですので、レポジトリサービスにpushしたら、push検知して全自動でビルド・デプロイをしてくれるサービスを使うと、リリース作業が「レポジトリにpushするだけ（もしくはmergeするだけ）」になるので非常にスムーズになります。

また、Github、Gitlabといったレポジトリへのpushに反応してビルド・デプロイする形式にしておけば、ホスティングサーバーの乗り換え時にもDNSで向き先を変えるだけで済むので非常に楽です。

転送・反応速度は十分に速いか？

Vue.jsアプリ・サイトのホスティング先を探すときに意外と重要なのが、ホスティングサーバーの反応・転送速度です。

Vue.jsアプリ・サイトは、そもそもJavascriptのファイル容量が大きくなってしまうので、転送・反応速度が遅い、ユーザーがVue.jsアプリ・サイトを読み込む前に離脱してしまいます。また、物理的なサーバーとの距離が遠いと、反応速度が遅くなります。

Vue.jsアプリ・サイトのサイズを小さくするのは当然として、100msでも早くアプリ・サイトをロードしてもらうためにも、ホスティングサーバーの転送速度や反応速度にはこだわりましょう。

十分な転送量枠があるか？

静的サイトをホスティングするサービスの場合、転送量に課金をするフリーミアムモデルが主流になっています。

HTMLベースのブログであれば、そこまで転送量を気にする必要はありませんが、一回のダウンロードが1MBクラスになるVue.jsアプリ・サイトの場合は、ユーザー数が大きいほど転送量が増えていきます。

静的サイトホスティングサービスの場合、追加の転送量はコスパがあまり高くないので、Vue.jsアプリ・サイトを公開するのであれば、転送量単価についても事前に調べておきましょう。

静的サイトホスティングサービスの転送量課金単価を徹底比較

静的サイトホスティングサービスの転送量課金単価を徹底比較！転送量最安値のサービスや、国内の共有レンタルサーバーとの転送量1GBあたりのコスパ比較も。

独自ドメインでSSLが使えるか

意外と落とし穴なのがSSLです。

サービスによっては、独自ドメインは使えてもSSLは有料だったり、SSLを使うには別課金のロードバランサーが必要だったりするので、独自ドメインでSSLが使えるかは確実にチェックしましょう。

Vue.jsアプリ・サイトのおすすめホスティングサーバー

Vercel

Vercelは、転送量・ビルド時間が無制限の静的サイトホスティングサービスです。

ビルドやサーバーレスファンクションの実行については、厳密には、1時間や1日単位での制限はありますが、転送量については気にしないで利用できます。Github、Gitlabとの連携もバッチリです。また、サーバーサイドでのルーティング機能などVue.jsアプリ・サイトに欲しい細かい機能も充実しています。

転送量の制限がなかったり、サーバーレスファンクションが使えたりと、小規模サイトから大規模なサイトまで幅広く使えます。

Vercel

Gitlab Pages

リモートレポジトリサービスのGitlab Pagesは、CI/CD、ホスティングサービスが充実しています。CD/CDにDockerが使える上に、レポジトリにDockerレジストリ機能があるので独自のDockerイメージでビルドが可能です。ここは、地味に便利ポイントです。

Vercelに比べて、無料でのビルド時間の制限があったり、サーバーサイドでのリダイレクト設定ができなかったりと、ホスティングサーバーとしての機能面では劣りますが、使い勝手は抜群です。

ただし、サーバーのレスポンススピードはあまり速くないのでCDNの利用が必須です。

Gitlab Pages

Vue.jsアプリ・サイトのホスティングサーバーの選び方を見てきました。

普通のHTMLベースの静的サイトと似ていますが、ビルドがあったりコンテンツの容量が大きかったりと、ホスティングサーバーを選ぶ際に気をつけたいポイントもあるので、参考にしてみてください。