ウェブサイトをGoogleドライブでホストする

2022-12-04

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レコード設定を行います.

レコード
CNAMExxx.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 Transfer0.114 /GB1TB
HTTPS Request0.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 domainxxx.on.drv.tw
ProtocolHTTPS
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 にします.

レコード
TXTDRVTW=xxx.on.drv.tw
CNAMEyyy.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

{Performance
pAccessibility
eBest Practices
rSEO
f
o
r
m
a
n
c
e
:
1
0
0
,
a
c
c
e
s
s
i
b
i
l
i
t
y
:
9
5
,
b
e
s
t
_
p
r
a
c
t
i
c
e
s
:
9
2
,
s
e
o
:
9
0
}
0-49
50-89
90-100

Reported by Lighthouse

Mobile

{Performance
pAccessibility
eBest Practices
rSEO
f
o
r
m
a
n
c
e
:
1
0
0
,
a
c
c
e
s
s
i
b
i
l
i
t
y
:
9
5
,
b
e
s
t
_
p
r
a
c
t
i
c
e
s
:
9
2
,
s
e
o
:
9
2
}
0-49
50-89
90-100

Reported by Lighthouse

余談

Microsoft OneDrive も同様に静的ファイル専用のホスティングサーバとして利用できるようです.

Google ドライブは2015年8月末まで,クラウドストレージのウェブホスティング機能を提供していたそうですが,GCP や Firebase の提供拡大,機能拡張に伴い,終了したとのこと.