Web サービス Surge（サージ／surge.sh）についてまとめています。

Surge はしばらく目立った動きがなく、不具合修正されるのみの状態でしたが、
最近開発が進めてられていている事をページ運営者が把握しています。
近いうちにも Surge 公式サイトやこのページの一部情報は変更の可能性があります。

🎈 Surge (surge.sh) | 🎈 BALLOON | FU-SEN - English information

目次

公式・関連サイト

•  Surge
•  GitHub sintaxi/surge
  • Issues
  • Discussions
•  Twitter @surge_sh
•  Slack チャットサポート

2021年4月、GitHub Discussions が公開されました。
初投稿は 1 月なので、以前から設置の検討はしていたように見えます。

インストール

Node.js をインストールした状態で、
シェル・ターミナルから次のコマンドでインストールできます。

npm i -g surge

Surge は完全にシェル・ターミナルからの操作です。Web 上からの操作はできません。

更新をする時も同じ手順です。
見た目は変化してませんが、更新は定期的に行われています。

開発版

近く Surge は大きく仕様が変える予定があります。
開発版でそれを知る事ができますが、
一部機能やサーバは開発中でまともに使用できない可能性があります。
あえてページ運営者はここに触れていない内容がある事をご承知下さい。

npm i -g surge@edge

サブドメイン.surge.sh と 独自ドメイン の制限

Surge では独自ドメイン以外に サブドメイン.surge.sh を使用できますが、
次の点に注意を要します。

※ サブドメイン.surge.sh では robots.txt が次で固定されています。

User-agent: *
Disallow: /

このため、Google などでインデックスされない状態になっています。
独自ドメインではこれが発生せず、自由に設定できます。

🎈 GitHub fu-sen/fu-sen.surge.sh
🎈 https://fu-sen.surge.sh/robots.txt

fu-sen.surge.sh のソースを公開していますが、
robots.txt はここに含まれていません。
しかし、 fu-sen.surge.sh/robots.txt は表示されています。

独自ドメインで SSL を有効にする場合は有料プランにする必要がありますが、
代わりに外部サービスを経由して SSL 化する方法があります。
そのサービスとして Cloudflare はページ運営者が長く使用している方法です。
詳細は Surge＋Cloudflare で運用する を参照して下さい。

独自ドメインのネームサーバ設定

独自ドメインを使用する場合、ネームサーバのゾーンは次で設定します。

※ はサブドメインなしの設定です。
ネームサーバシステムによっては CNAME の代わりに
ALIAS や ANAME で設定できる場合があります。
CNAME を使用できない場合は A で設定する事も可能ですが、
ネームサーバの仕組み上、レスポンスが悪くなるため、
na-west1.surge.sh で設定可能な場合は
na-west1.surge.sh を用いて下さい。

任意のサブドメインを使用する場合も同じように CNAME を設定します。

サイトの公開

簡単な使い方は Web サイトを公開するディレクトリに移動し、
surge を実行します。
特にファイル構成が少ない場合、デプロイ時間がとても速く、
数秒～数十秒で終わります。
しかし、毎回ファイルをすべてアップロードする仕様のため、
ファイル数が多くなるとそれに応じてアップロード時間が長くなってきます。
特に回線が混んでいる場合は公開に数分要する場合もあり、
差分アップロードが考慮されていたり、Git を用いた手段の方が
素早くデプロイできる場合もあります。

cd 公開ディレクトリ
surge

最初は次の順序で尋ねられます。

再び surge をした場合は プロジェクト パス と ドメイン のみです。
この動作も省略したい場合は、まず CNAME ファイルに公開ドメイン名を入れます。
これは GitHub Pages と同じ形式です。

example.surge.sh

https:// を付加すると https 強制になります。
http で参照してきた場合、https へ転送します。

https://example.surge.sh

もちろん独自ドメインも使用可能です。

example.com

www なしの場合、 www.example.com は example.com へ転送します。
www ありの場合、 example.com は www.example.com へ転送します。
したがって通常これらを考慮する必要はありません。

CNAME ファイルを設定した上で、surge の後に公開ディレクトリ名を加えます。
例えば 🎈 Hugo は通常 public/ フォルダ内に index.html などの公開ファイルを入れるので、
次のようにコマンドを実行します。

hugo
surge public

現在いるカレントディレクトリを公開する場合は公開ディレクトリ . を使用できます。

surge .

トークンの発行・使用

外部サービスを用いてビルドし、Surge へデプロイしたい場合、
認証を行う代わりにトークンを発行して使用する事ができます。

まずログインしてある環境で surge token でトークンを発行します。

PS C:\Users\balloon> surge token

   トークンの文字列を表示

PS C:\Users\balloon> ▄

このトークンはメールアドレス・パスワードの代わりです。
絶対に誰もが見える場所へ公開しないで下さい。
Web サービスを使用する場合は非公開になるように
環境変数を設定できるようになっているでしょう。

surge コマンドでのデプロイでは --token トークン とします。

surge 公開ディレクトリ --token トークン

管理ドメイン一覧

surge list でメールアドレスで管理しているドメインを一覧表示します。

surge list

ドメインの削除

surge teardown で削除できます。

surge teardown ドメイン名

登録しているメールアドレスに通知が届きます。
誤って削除してしまった場合でも surge しなおせば容易に復旧できます。

Surge＋Cloudflare で運用する

Surge も Cloudflare もサイト数・ストレージ・転送量に制限がありません。
これが Surge＋Cloudflare で運用する最大のメリットとなりえます。
Cloudflare は東京・大阪にサーバがあり、レスポンスがはやいので、
できるだけ Cloudflare のキャッシュで返すようにするのが理想的となります。

 Use Surge via Cloudflare #445 | sintaxi/surge Discussions

この方法は Surge 側からして推奨されない使用方法です。
今後の Surge 仕様変更によって、この項目は削除する可能性があります。
本当に今必要で設定を要する人だけ行ってください。

Surge の Cache-control

 Using Surge’s automatic Lucid Caching | Surge

Surge では HTTP ヘッダの Cache-Control は次になっています。

Cache-Control: public, max-age=31536000, no-cache

 Understanding Origin Cache-Control | Cloudflare

したがって Cloudflare はそのまま受け取った場合、次の動作を行います。

• キャッシュがない場合は Surge を参照し、キャッシュ保存します。
• キャッシュがある場合、Surge に一度変化しているか検証を行い、
  変化がなければキャッシュを提供します。
• キャッシュの有効期限は 365 日です。

必ず Surge CDN を参照する事になります。これが推奨されない明確な理由です。
単に Cloudflare 経由に設定してもほとんど効果がないのです。

そのままだと海外にある Surge のサーバへ毎回参照しにいく事になってしまい、
せっかく日本にある Cloudflare サーバのメリットを活かす事ができませんが、
配信サーバを必ず確認するため、Cloudflare のキャッシュを意識せずに
更新された最新ファイルが必ず適用される点ではメリットがあります。
更新されていない場合は Cloudflare のキャッシュから配信され、
Surge→Cloudflare のファイル転送がない分、Cloudflare での圧縮などで
これでもある程度速いレスポンスになっています。

しかし、それでも Cloudflare のキャッシュを優先させる方法があります。

Cloudflare→Surge の検証を無効にする

この Cloudflare のページ  Interaction with other Cloudflare features 内の
「Edge Cache TTL」には次の記載があります。

Edge Cache TTL Page Rules override s-maxage and disable revalidation directives if present.

「エッジキャッシュ TTL」を設定する事で、検証しなくする事ができます。
期間は 2時間～1ヶ月 です。
この期間中は配信サーバが参照されず、ファイルが更新されなくなります。

適用する場合、 Cloudflare で 対象ドメイン を選択し、
ページ ルール（Page Rule） で次の設定を行います。

.html や sitemap.xml もキャッシュの対象にする

 CloudflareのCDNについて理解する | Cloudflare

上ページ内の  デフォルトでキャッシュされるファイル拡張子について理解する には
キャッシュする拡張子が決まっていて、.html や sitemap.xml を含む .xml は
キャッシュの対象になっていない事が記載されています。

これらのファイルもキャッシュの対象としたい場合、
「Cache Everything」を有効にします。

これを適用する場合、 Cloudflare で 対象ドメイン を選択し、
ページ ツール（Page Rule） で次の設定を行います。

「Cache Everything」の有効は
ファイルの更新ですぐに反映されなくなる事にご注意下さい。
キャッシュを消去する必要があります。（Purge Cache）
あえてこれを適用させない事で、.html .xml は必ず配信サーバを参照し、
更新されたら、すぐに反映されるようにするのも良いでしょう。

ブラウザキャッシュ

Cloudflare のキャッシュを有効にしている場合、ブラウザキャッシュも効きます。
Caching - 構成 / Configuration 内
ブラウザ キャッシュ TTL / Browser Cache TTL がその設定です。
具体的な時間を設定した場合、その間はブラウザのキャッシュが優先されます。
「現存キャッシュを優先」にした場合、Surge のヘッダが有効になります。

Cache-Control: public, max-age=31536000, no-cache

これによりパソコンでは Cloudflare または Surge サーバの参照を
必ず行うようになり、最新のファイルを表示させる事ができます。
HTML など更新が多いドメインでは「現存キャッシュを優先」が無難で、
画像専用に専用のドメインを設定している場合は
ブラウザキャッシュの期間を設定して有効にするのも効果的です。

SSL/TLS の設定

Surge を使用する場合、Cloudflare の SSL/TLS 内
「お客様の SSL/TLS 暗号化モード」（our SSL/TLS encryption mode）は
フレシキブル（Flexible）以外に フル（Full） を選択できます。
Surge では通常でも surge.sh ドメイン向けの証明書が提供されているため、
これを使用して Cloudflare－Surge 間の SSL を用いた通信が可能です。

SSL 証明書の発行・アップロードは Surge 有料プランの機能なので
ドメインの証明書を使用する「フル (厳密)」（Full (strict)）は使用できません。
（Cloudflare でも任意の SSL 証明書を使用するのは有料プランの機能です）

http: の参照を https: へ転送する方法は
Cloudflare 側・Surge 側両方で設定可能です。どちらか一方を使用して下さい。

その他ヒント

Surge で 301・302 転送は有料プランのみで提供されていますが、
これは Cloudflare 側で ページ ルール または Cloudflare Workers を用いて実現できます。
ページ ルール は無料で 3 つまでですが、リクエスト回数は制限なし、
Cloudflare Workers は 1 日 10 万リクエストで、
JavaScript を用いての制御なので、細かくレスポンスを設定できます。

例えば ページ ルール で example.com 内すべてを
example.net 内へ 301 転送するのは次の設定になります。

* 部分が $1 に対応します。
複数 * がある場合、$1 $2 $3 ……で指定可能です。
（数字指定なので順番を入れ替える事ができます）

GitHub Actions でデプロイする

GitHub Actions で Surge を使用する場合、
Settings 内にある Secrets-Actions で SURGE_LOGIN と SURGE_TOKEN を設定します。
SURGE_LOGIN は Surge のログインで使用するメールアドレス、
SURGE_TOKEN は surge token コマンドで得られます。

.github/workflows/deploy.yaml として、次のファイルを追加します。
必要に応じてビルドコマンドを加えて下さい。
surge 右の . はカレントディレクトリです。

name: Deploy Website
on: [push]
jobs:
  deploy:
    runs-on: windows-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2-beta
        with:
          node-version: 18
      - run: npm i -g surge
      - run: surge . --token ${{ secrets.SURGE_TOKEN }}

以下、ページ運営者が GitHub へ公開している
🎈 MkDocs をビルドし、Surge へデプロイするサンプルです。

🎈 fu-sen/Surge-MkDocs | GitHub

MkDocs はビルド作業として site ディレクトリへ HTML などを生成するので、
デプロイする surge の行は surge site --token トークン となります。

      - run: surge site --token ${{ secrets.SURGE_TOKEN }}

Q&A

Surge のサーバはどこにあるのですか？

8 ヶ所の CDN サーバが存在します。日本にはありません。
日本から参照した場合、主にシンガポール、
他にアメリカ・カナダの CDN サーバを参照すると思われます。

●●.surge.sh と ●●.surge.world は共通ですが、
割り当てられている IP アドレスが異なる場合があります。

 sintaxi/regions.txt | GitHub Gist
 Twitter @surge_sh

独自ドメインを用いて SSL を外部サービスで有効する場合、
そのサーバを経由する事にご注意下さい。

これらのサーバですが、  DigitalOcean が使われています。

無料プランにドメイン数・転送数の制限はありますか？

Surge は無料プランでも登録ドメイン数・転送量に制限が明記されていません。
ある程度の運営規模では、これが Surge を使用する大きなメリットになりえます。

 Pricing | Surge

他の Web サービスでは転送量でプランを定めていますが、
Surge が公開された当初は無料の SSL サーバ証明書 Let’s Encrypt が開始されていなかったため、
有料で SSL サーバ証明書を発行しています。これは現在も維持されています。
サブドメイン.surge.sh はワイルドカード証明書で費用を削減し、
有料プランではドメインに対応した有償の SSL サーバ証明書を提供する事で
サービスの事業化を実現しています。
これが 独自ドメインの SSL が有料プランとなっている理由です。

 [CLI] New Certificate Management Commands #446 | sintaxi/surge Discussions

2021年3月現在 サブドメイン.surge.sh は Sectigo の SSL サーバ証明書を採用していますが、
開発版では Let’s Encrypt の発行・確認が可能になっています。ただし有料プランのみです。

日本語ドメインは使用できますか？

使用できる事を確認できています。
Punycode（xn-- ではじまる英数）で設定して下さい。
サブドメイン.surge.sh も使用できます。

日本語ファイル・フォルダは使用できますか？

問題なく使用できる事をページ運営者が確認できています。

.pdf ファイルが Not Found になります。

 pdf files return 404 #257 | sintaxi/surge Discussions

過去数百 GB の PDF ファイルを用いた悪用があったために、
デフォルトでは .pdf ファイルが表示できないようになっています。

回避方法として、カードの登録 surge card を行う事で
ホワイトリストに登録され、.pdf ファイルが表示できるようになります。
ここでカードを登録しても、プランの変更をしない限りは
課金・請求が発生しないので安心して下さい。

PS C:\Users\balloon> surge card

   Enter payment method to be used

    card number: 番号16桁
    exp (mo/yr): 月/年
            cvc: 3桁

   Success - Credit card set.

PS C:\Users\balloon> ▄

ページ運営者が実際にカードを登録して
.pdf ファイルが表示できるようになっているのを確認できています。
クレジットカードの代わりにデビットカードも使用可能です。

Not Found 表示を独自に制作できますか？

できます。 404.html で生成して下さい。

無料ドメイン EU.org は使用できますか？

できます。サイト運営者が実際に使用している Web サイトがあります。
Cloudflare 経由にして SSL 証明書も適用できます。
robots.txt の制限もないので、おすすめです。

🎈 EU.org | ふうせん🎈 FU-SEN