ウェブサイトをGoogleドライブでホストする
DriveToWeb というサービスを利用すると,Google ドライブをホスティングサーバのように利用できます.静的ファイルしかホスティングできませんが,SSG を併用すれば簡単なサイトやブログは作れそうです.
Google ドライブの準備
テスト用ファイルの格納
予め Google ドライブの最上位の階層にフォルダを作成しておきます.フォルダの名称は後ほどの登録のため,利用したい URL にします.
また,ローカル PC 上で index.html を作成し,先ほど作成したフォルダにアップロードします.
ここでは,利用したい独自ドメインを www.example.com としておきます.
公開設定
まず,フォルダを右クリックの中から「共有」を選択し,フォルダの共有設定を有効にします.
次に,共有設定の詳細で共有先を「制限付き」から「リンクを知っている全員」に変更し,リンクをコピーします.
Google ドライブのホスティングを有効化
DriveToWeb を用いて,Google ドライブでのホスティングを有効にします.
設定は https://drv.tw で行います(おそらく URL は DriveToWebの略称).
「Host on Google Drive」を選択し,Google ドライブへのアクセスを許可すると URL が発行されます.
発行された URL に接続すると,index.html がウェブページとして表示されます.
DriveToWeb ではLet's Encrypt による SSL 証明書が利用できるため,HTTPS 接続が可能です.しかし,ドメインベースの証明書になるため,このままでは独自ドメインには適用できません.
独自ドメインの設定
DriveToWeb はクラウドストレージ上のファイルをホスティングするサービスのため,ドメインはランダムで生成されます.
https://xxx.on.drv.tw/www.example.com/
Your site name に任意の文字列を指定できますが,22文字入力が必要です.
デフォルトの URL 以外を利用したい場合は,独自ドメインを契約し,DNSレコード設定を行います.
レコード | 値 |
---|---|
CNAME | xxx.on.drv.tw |
TXT レコードを設定している例も見かけますが,公式ドキュメントによると,独自ドメインを利用するだけであれば不要なようです.
DNS レコードの反映に時間がかかるのと,DriveToWeb での反映に時間がかかるため,最大で 72 時間後に独自ドメインでも接続できるようになると記述があります.
私の場合は,1時間弱で反映されました.
参考:Using a custom domain name :: DriveToWeb Docs
HTTPS 接続したい場合
DNS レコードを設定して独自ドメインを利用するだけでは SSL 証明書が利用できないため,HTTP でしか接続できません.
独自ドメインで HTTPS 接続したい場合は,CDN(Content Delivery Network)を経由して接続することになります.
CDN は SSL 化だけでなく,文字通りコンテンツ配信に用いるもので,キャッシュを利用することで高速配信を可能にします.
そのため,Google ドライブの内容を変更しても,即時に反映されないということに気を付けてください.
公式ドキュメントでは Cloudflare を推奨していますが,今回は Amazon CloudFront を利用してみました.
CloudFront には無料枠が用意されているため,個人レベルでの利用であれば無料で使えます.
有償利用の場合,料金はリージョンにより異なっており,以下の表では日本での価格を表示しています.また,データ転送量が多くになるにつれて,1GB あたりの価格は安くなります.
月額料金(USD) | 無料枠 | |
---|---|---|
Data Transfer | 0.114 /GB | 1TB |
HTTPS Request | 0.012 /1万件 | 1,000万回 |
参考:料金 - Amazon CloudFront | AWS
SSL 証明書発行
HTTPS 接続を可能にするため,AWS Certificate Manager (ACM) を用いて www.example.com の SSL 証明書を発行します.
ACM では無料で SSL 証明書を取得できます.Amazon CloudFront は us-east-1 リージョンの証明書のみに対応しているため,発行するときに確認してください(右上に N. Virginia と出ています).
Public Certificate 発行時に以下のどちらかの方法で認証を行う必要があります.
- DNS 認証:DNS レコードでドメイン所有を確認
- メール認証:ドメイン宛メールを経由してドメイン所有を確認
今回は,DNS レコードで確認しました.
証明書を発行すると保留状態になるため,仮登録状態の証明書を確認し,CNAME レコードを設定します.
設定が完了すると,ステータスが Issued に変更されます.
(申請したドメインが同一の場合,レコードに登録する値も同じになるようです)
Amazon CloudFront 向け設定
Origin の内容は以下の通りです(抜粋).
項目 | 内容 |
---|---|
Origin domain | xxx.on.drv.tw |
Protocol | HTTPS |
Origin path | /www.example.com/ |
Settings では,Custom SSL certificate - optional という項目があるため,先ほど取得した証明書を指定します.
また,Alternate domain names に利用するドメインを設定します.
CDN 向け設定
CDN を利用する場合は,www.example.com の DNS 設定で,TXT レコードに DriveToWeb 上のドメインを指定します.
また,CNAME レコードの値は CloudFront の Distribution domain name にします.
レコード | 値 |
---|---|
TXT | DRVTW=xxx.on.drv.tw |
CNAME | yyy.cloudfront.net |
これで HTTPS 接続で Google ドライブのホスティングが利用できるようになります.
DriveToWeb の運営者情報
drv.tw は台湾のトップレベルドメインを利用しており,Whois 情報を確認したところ,以下のような応答が返ってきました.
Domain Name: drv.tw
Domain Status: ok
Registrant:
Anny Miser drvtw@outlook.com
Administrative Contact:
Anny Miser drvtw@outlook.com
Technical Contact:
Anny Miser drvtw@outlook.com
Record expires on 2025-12-20 16:25:02 (UTC+8)
Record created on 2017-12-20 16:07:06 (UTC+8)
Domain servers in listed order:
ns7.alidns.com
ns8.alidns.com
Registration Service Provider: HINET
Registration Service URL: http://domain.hinet.net
企業情報などは載っておらず,DataTooShort という台北の企業がドメインを契約しているのではないかという情報が見られた程度でした.
運営企業が定かではなくサービスがどれくらい持続するかもわかりませんが,その辺りに目を瞑れば便利に使えます.
DriveToWeb の安全性
DriveToWeb を利用することで,運営元に Google アカウントのパスワードが伝わるものではありませんが.アクセス権限を与えるという意味は知っておいた方が良いです.
アクセスを許可した後は,DriveToWeb を介して,以下の操作が行えるようになります.
- ファイルの表示
- ファイルのアップロード,ダウンロード
- ファイルの削除
- ファイルの共有先の名前,メールアドレスの表示
- 他のユーザーとのファイルの共有,共有の停止
- ファイルからのユーザーの削除
- ドライブの整理
DriveToWeb に与えるアクセス権限は,共有するフォルダだけでなく,Google ドライブ全体に対して上記の機能を利用できるというものです.
Google ドライブにプライベートなファイルを置いている場合などは,気をつけた方が良いと思います(別アカウントを作成したり,プライベートなファイルをドライブから消したりなど).
DriveToWeb のアクセス権限を削除
DriveToWeb の利用を終了し,Google ドライブへのアクセス権限を削除したい場合は,以下の操作を行う必要があります.
Google ドライブの設定(右上の歯車アイコン)を開き,「アプリの管理」を選択します.
「アプリの管理」では,Google ドライブに接続しているアプリを確認でき,DriveToWeb の「オプション」で「ドライブから切断」を選択すると,アクセスが無効になります.
Lighthouse score
Next.js のテンプレートをアップロードしたところ,以下のような結果でした(実際に接続するとあまり速い感じはしませんでしたが).
Mobile
Reported by Lighthouse
Mobile
Reported by Lighthouse
余談
Microsoft OneDrive も同様に静的ファイル専用のホスティングサーバとして利用できるようです.
Google ドライブは2015年8月末まで,クラウドストレージのウェブホスティング機能を提供していたそうですが,GCP や Firebase の提供拡大,機能拡張に伴い,終了したとのこと.