Vue.jsアプリの公開におすすめな無料ホスティング・サーバー

迷わずオススメなVue.jsホスティングサービス

Netlify

使い勝手や機能で考えたら、多機能ホスティングサービス・NetlifyがオススメNo.1です。

Vue.jsなどのSPAアプリでは、ルーティングしたページにアクセスするとNotFound(404エラー)になってしまうため、「すべてindex.htmlにリライトする」という作業が必要なのですが、Netlifyならリダイレクトやリライトの設定が簡単できます。独自ドメインでの公開や独自ドメインの無料SSLもついています。

Vue.jsアプリのビルドにも対応して、無料枠でビルド時間300分と少なめですが、頻繁にビルドしなければ十分な枠です。転送枠は月間100GBなので早々使い切らないでしょう。

Netlifyには、FormやFunctionsなどVue.jsアプリを拡張してくれる機能も満載なので、Vus.jsアプリを拡張することもできます。

Netlify

Vercel(now.sh)

Vue.jsだけでなく、Node.jsなどの動的サイトまで対応した万能ホスティング・サーバーサービス。

静的サイトジェネレータのビルドにも対応していて、レポジトリ連携、リライトなどにもしっかり対応。無料枠もNetlifyに負けないくらいしっかりあるので、安心して使えます。転送量が無料で無制限なのが嬉しいところ。

ただし、高性能な分、設定周りが複雑だったり英語のドキュメントのみだったりと少々ハードルが高いのが難点。

そこが問題ないのであれば、Netlifyよりもオススメなホスティングサービスです。

Vercel

完全無料とは行かないかもしれないけど、オススメなVue.jsホスティングサービス

Firebase Hosting

Googleクラウドファミリー・Firebaseのホスティングサービス。

Vue.jsアプリのホスティング先としては、ビルド機能がないので、更新の度にローカルでビルドしてからCLIでデプロイする必要があるのがやや手間ですが、記事データなどを外部APIに出しているならあまり気にならない点かもしれません。

独自ドメインが使えるほか、リダイレクトにも対応しているなどVue.jsアプリのホスティングとして必要な機能をしっかりと押さえてあります。

月間10GBまで転送両無料となっていますが、それ以降は課金となるので、アクセスの多いサイトは注意が必要です。

転送量課金がなければNetlifyと同じくらいオススメなホスティングサーバーです。

Firebase Hosting

Heroku（無料プラン終了）

PasSとして日本で最初にブームを呼び込んだHeroku。2022年11月に無料プランが終了しているため、現在は無料では使うことが出来ません。

Heroku

ちょっと難はあるけど無料で使えるVue.jsホスティングサービス

Github Pages

クラウド・レポジトリサービスGithubの静的サイト・ホスティングサービス。先日ビルドサービス「GitHub Actions」が公開されて、ビルドも含めてシームレスにVue.jsのアプリを公開できるようになりました。ビルド時間は月間2,000時間まで無料。

独自ドメインやSSLは使えますが、リライト・リダイレクトができないなど、Vue.jsアプリのホスティング先としては少々難あり。ルーティングのないVue.jsアプリなら問題ありません。

GitHub Pages

Gitlab Pages

Githubのライバルであるクラウド・レポジトリサービス・Gitlabが提供するホスティングサービス。ビルドサービス「Gitlab CI/CD」と静的ファイルホスティング機能・Gitlab Pagesを使えば、サイト管理、ビルドからデプロイ、ホスティングまでGitlabだけで全て完結します。

Vue.jsアプリのホスティングという意味では、Github Pagesと同じくリライト・リダイレクトができないのが難点。ルーティングのないVue.jsアプリなら問題ありません。

転送量・無制限、ビルド時間が毎月2,000分というのが嬉しいところ。登録サイト数も無制限です。

Gitlab Pages

筆者は、メインホスティングをNetlify、devブランチのテスト用にGitlab Pagesを利用することが多いです。

スターサーバー フリー（HTML）

ネットオウルの展開するフリーサーバサービス。

日本国内では少なくなってしまった無料サーバーで、HTMLなどの静的ファイルのみホスティングできる「フリー」プランなら、ストレージ容量は2GBと少ないですが、広告なしで完全無料使えます。

独自ドメインも使えますが、1ドメインしか登録できずSSLが使えないので、その辺りはCloudFlareを利用するなり工夫が必要です。

SSLの使えないサーバーでHTTPS配信をする裏技

現在のWebサイトでは必須であるSSL。SSLの使えないサーバーでHTTPS配信をする裏技を解説します。

静的サイトのホスティングとして反応速度も悪くないので地味にオススメのサーバーなのですが、ビルド機能がないので、毎回FTPでアップロードする必要があるのが大きなデメリット。

逆に、CI/CDやコマンドビルドに慣れてない方は、スターサーバー フリーのFTPの方がわかりやすいかもしれません。筆者はビルド&FTPシンクするDockerコンテナを作って利用しています。

Vue.js用・ホスティング・サーバー比較表

最後に、ここまであげたVue.js向けホスティング・サーバーの主なポイントを表にまとめました。

こうして比べてみると、NetlifyかVercel(now.sh)の2択という感じですね。

他のサービスにもそれぞれのメリットがあるので、Vue.jsアプリの構成などに合わせて選ぶと良さそうです。