SPAなどの静的サイト(PHPやRubyなどのサーバープログラムを走らせない環境でのWebサイト)のを公開するにあたって、運用・配信(ホスティング)するならどこがいいかと聞かれたのですが、そのときの回答を技術書典の宣伝も兼ねてブログにしたためます。
今回は次の4つで比較しています。
上記4つはどれも独自ドメインの設定は無料で行うことが出来ます。
※比較的初心者に向けて書いている前提です。そのためAWS S3やレンタルサーバーはアカウントがなければ設定も面倒ですし今回は除外しています。
少し機能について説明が必要な部分があるので、先に説明を書きます。
SPAで静的サイトを公開する際にありがちなミスなのですが、URLを変更してサブディレクトに進んでからリロードすると404ページになってしまうというものです。
これは公開サイトでページの404のRewrite設定が出来ていない場合に起こってしまう事象です。
「ファイルの読み込み時に404だったら index.html を返す設定」をすることで、リロードしても継続してサイト閲覧することが可能になります。(その場合はJavaScriptで404ページかどうかを判定します。)
設定が出来ない環境でSPAのルーティングを利用する場合はハッシュルーターにする必要があります。
プロジェクトによってはWebpackなどを利用して、html,css,jsファイルをコンパイル(トランスパイル)してから公開すると思います。
そのときにビルド機能がついている環境の場合は、「手元でビルドしたものをgitで管理したり、ビルドしてからdeployする」等の手間が省けます。
テストを書いていたらテストが通るかどうかなどもそこでチェックして、デプロイするかどうかを選択できたりもします。
https://qiita.com/tonishi/items/e5696b477278f3c49b77
(無料枠で利用していて制限まで行ったら、通知が来るのみで勝手に課金されるようなことはありません。)
すでにGitHub、GitLabでソースを管理しているとして、ライブラリのリファレンスなどのちょっとしたサイトならそれぞれのPages機能を使うと手軽です。
Firebaseを利用していて、FunctionsとパスをつなぎたいならFirebase Hostingを利用しましょう。しかしビルド機能がないので必要な場合はCircle CIなどと併用が必要です。
他、Firebase Functionsとつなぎたい場合を除いて便利な機能が揃っているNetlifyをおすすめしています。Netlifyには他にもたくさんの便利な機能が備わっています。
他にもチーム開発で必要な機能や、BASIC認証の設定(有料)など様々な静的サイト公開に便利な機能が備わっています!
そんなNetlifyの様々な機能を1から10までほぼ全て実例を使って解説する本を今度の10月8日に開催される技術書典で販売しますので、いらっしゃる方はログインして下記のページをチェックしてぜひぜひ買いに来てください!!!
https://techbookfest.org/event/tbf05/circle/24720002
以上ですが、本買わなくともNetlifyはめっちゃ便利なので一度使ってみて下さい!
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント