はじめに
この記事では、プロトタイプ開発した静的WEBページを爆速でHTTPSホスティングする方法を紹介します。
静的WEBページを第三者に見せたい方や、HTTPS化が必須の機能の動作検証（位置情報の取得、カメラ・マイクアクセスなど）を行いたい方に役立つ情報です。
ホスティング方法としては、GitHub PagesとNetlifyを取り上げます。
こんな人に読んでほしい
・プロトタイプの静的WEBページを第三者に見せたい方
・HTTPS化が必須の機能の動作検証を行いたい方
GitHub Pagesを使ったホスティング
GitHub Pagesは、GitHubから提供されている静的サイトのホスティングサービスです。
無料で利用できるため、プログラミング学習や個人プロジェクトの公開に向いています。
1.Githubアカウント作成
GitHubのアカウントを作成します。下記URLから手順に従ってアカウントを作成してください。
https://docs.github.com/ja/get-started/start-your-journey/creating-an-account-on-github
2.repository作成
repository名は任意ですが、公開範囲はデフォルトのPublicのままとし、「Create repository」ボタンを押してください。
3.repositoryにソースを登録
ホスティングしたいソースを作成し、repositoryに登録します。
今回はカメラ起動するだけの下記サンプルコードを使用します。
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset='utf-8/'>
</head>
<body>
<input type="file" capture="user" accept="image/*">
</body>
</html>
localhostで起動するとブラウザに下記が表示されます。
「ファイルを選択」ボタンを押すとするとファイルピッカーが表示されます。
(HTTPS化されていないのでカメラは起動しません)
4.Pages作成
Setting-PagesでBranchをmainに変更し、「Save」ボタンを押します。
しばらくしてリロードするとURLが表示されます。
このURLをブラウザで開き、「ファイルを選択」ボタンを押すとするとカメラが起動します。
Netlifyを使ったホスティング
Netlifyは、静的サイトをホスティングすることができるWebサービスです。
WordPressなどの動的な処理のいらないLPなどの静的なWebサイトであれば、Netlifyを通じて公開することができます。
無料で使用でき、SSLやGitHubとの連携も簡単にできます。
アプリ開発者にとって便利なWebサービスです。
今回は爆速をテーマにしているのでGithubを使用しないでホスティングする手順を紹介します。
1.Netlifyアカウント作成
下記Netlifyのサイトからアカウントを作成してください。
https://www.netlify.com/
2.ソース登録
Team overviewから「Add new site」-「Deploy manually」を選択
下記画面が表示されるので先ほどのindex.htmlの親フォルダをDrag and dropします。
Site overviewに作成したURLが表示されます。
最後に
いかがでしたでしょうか。GitHub PagesやNetlifyを使用することで、簡単かつ迅速に静的WEBページをホスティングし、HTTPS化することができます。
どちらのサービスも使いやすく、無料で提供されているので、プロトタイプの公開や機能のテストに最適です。ぜひ、お試しください。