Surge をつかう。

Surge(surge.sh)日本語解説。Surge の使い方を簡単にまとめました。

Surge https://surge.sh/


費用

無料で使えます。

  • 公開制限なし
  • ●●●.surge.sh の SSL 使用可能
  • 独自ドメイン使用可能(独自ドメインの SSL は無料の対象外)

月 US$30 の Surge Professional もあります。

Pricing | Surge


インストール

Node.js が入っていない場合はインストールします。

インストールしたら次のコマンドで surge をインストールします。

npm install --global surge

使用方法

生成した index.html 等があるフォルダ(ディレクトリ)に cd し、
surge を入力します。

surge

次を入力します。

  • email: メールアドレス (初回のみ)
  • password: パスワード(初回のみ)
  • project path: 公開する HTML などが入っているフォルダ(カレントになっています)
  • domain: 公開するアドレス(●●●.surge.sh)

これで公開完了です。
http://●●●.surge.sh/ および https://●●●.surge.sh/ で
参照できる事を確認してみて下さい。

Getting started with Surge | Surge Help

surge コマンドは次の指定が可能です。

surge [HTML 等のあるフォルダ] [公開ドメイン]

なので、例えば Hugo だと hugo コマンドで public に生成されるので、
初回ログインした後であれば surge public ●●●.surge.sh
後記する CNAME ファイルを生成すれば、surge public ですぐに公開できます。

現在いるフォルダの場所が公開 Web のルート(index.html などがある場所)である場合、
[HTML 等のあるフォルダ] の指定は . を使用できます。
surge . ●●●.surge.sh または surge . で公開できます。


サブドメインを設定

surge のみだと ●●●.surge.sh の ●●● 部分を訪ねてきますが、
上項目でも記載しているとおり surge コマンドで指定する事が可能です。

surge public ●●●.surge.sh

更に CNAME というファイルを生成し、●●●.surge.sh を入れておくと
尋ねる事なく、CNAME ファイル記載のサブドメインで生成します。
公開サイトにする前提であれば CNAME ファイルの生成がおすすめです。

echo ●●●.surge.sh > CNAME

Remembering a domain | Surge Help


https: 参照の強制・常時 SSL 化

ドメイン名に https:// を付ける事で
http: で参照した時に https: へリダイレクトできます。

surge public http://●●●.surge.sh

CNAME ファイルでも有効です。

echo https://●●●.surge.sh > CNAME

なお Surge Professional は https:// 固定になっています。

Forcing HTTP to redirect to HTTPS | Surge Help


●●●.surge.sh 運用の注意

●●●.surge.sh ではクローラー(検索エンジンロボット)の参照を一切禁じています。
そのため検索エンジンの結果に反映されない、または登録されないサイトになってしまいます。
ただし、Google Search Console で登録すると、
「robots.txt によりブロックされましたが、インデックスに登録しました」となり、
他 Web からのリンクによっては Google の検索結果でサイト名のみが出てくる場合があります。
しかし、サイトの中身を反映していないため、検索に悪影響となります。

●●●.surge.sh/robots.txt で次の表示が得られます。

User-agent: *
Disallow: /

https://balloon.surge.sh/robots.txt
https://fu-sen.surge.sh/robots.txt
https://jpn.surge.sh/robots.txt
https://m-j.surge.sh/robots.txt
https://にほんご.surge.sh/robots.txt

Google などに登録される前提の Web サイトは ●●●.surge.sh で運用をしないで下さい。

‘robots.txt’ file on surge.sh subdomains #288 | Github sintaxi/surge issues
サブドメイン.surge.sh はインデックスされない→引っ越し。| ふうせん🎈 Fu-sen.

独自ドメインでは robots.txt が設定されません。
必要であれば robots.txt ファイルを含めて自由に設定できます。
本サイト Surge をつかう。は Surge(+Cloudflare)+Freenom 独自ドメインの運用です。
robots.txt は何も設定を入れていないファイルを独自に入れています。直接参照できます。

https://surge-sh.cf/robots.txt

次のページにこの事に関連する Surge の意図があります。

Why is Surge free?

私たちは、「あなたが捉えている以上の価値を提供する」ことを信じています。
独自ドメインを使用し、主に Surge で自由に公開できるようにすることが、
これを目指す一つの方法です。

つまり、●●●.surge.sh は Web サイト・アプリの正式公開を目的としたものではなく、
製作中のサイト・アプリを開発者同士で共有する目的としていて、
正式公開は独自ドメインを使用する、というのが Surge の意図となっています。


Not Found 表示を独自 HTML で表示

404.html で生成します。

Adding a custom 404 ? Not Found page | Surge Help

なお、JavaScript などで処理に時間を要する場合のために 200.html も使用できます。

Adding a 200 page for client-side routing | Surge Help


独自ドメインの設定

独自ドメインのネームサーバは次の設定です。

サブドメイン レコードタイプ
@(ルート) ALIAS na-west1.surge.sh
www CNAME na-west1.surge.sh

※ ルート = サブドメインを付けていない独自ドメインのみ

ネームサーバシステムにより、@ は何も入れない場合があります。
BIND(named)など、一部のシステムでは CNAME で指定するホスト名の末尾に
. を付ける必要があります。na-west1.surge.sh. となります。

ALIAS に対応していないネームサーバは A で設定して下さい。

サブドメイン レコードタイプ
@(ルート) A 45.55.110.124

任意のサブドメイン ●●●.ドメイン.ext も同じように設定できます。

サブドメイン レコードタイプ
●●● CNAME na-west1.surge.sh

設定後 ●●●.surge.sh 設定と同じ方法で
CNAME ファイルなどを独自ドメイン名に変更して下さい。

echo ●●●.com > CNAME

surge コマンド指定時も独自ドメインになります。

surge public ●●●.com

Adding a custom domain | Surge Help

なお、独自ドメインでの無償参照は http: のみで、
Surge で https: を有効にする場合は、有効月 US$30 の Surge Professional にし、
SSL 証明書も独自に発行して surge ssl コマンドで適用する必要があります。

Adding a custom SSL certificate


独自ドメインで SSL を有効にする手段

独自ドメインで運用する Web サイトを Surge を使用しつつ SSL も有効にしたい場合、
Cloudflare を使って SSL 化を実現する手段があります。
Cloudflare は無料プランでも SSL で参照可能にでき、常時 SSL も可能です。

Cloudflare https://www.cloudflare.com/ja-jp/

最低限の設定は、Cloudflare 側でサイト(の独自ドメイン)を追加した後、
ドメイン側で Cloudflare の DNS へ設定を変更します。
常時 SSL などの設定は Cloudflare 側から設定できます。

注意として、Surge と Cloudflare 間は http 通信のままとなるため、
surge コマンドや CNAME ファイルの独自ドメインに https:// を付けないで下さい。

また、Cloudflare にはキャッシュ機能が備わっているため、
surge コマンドで更新しても Web サイトが更新されない場合があります。
surge コマンドを実行してしばらく経過し、再読み込みってもサイトが更新されない場合は、
Cloudflare へログインし、キャッシュを削除してみて下さい。
特に更新が発生する事が少ない 画像・CSS・JS などはキャッシュが優先されます。
実際にこの問題で Surge の GitHub で issue(不具合報告)が生じていますが、
Surge の問題ではなく Cloudflare 側の問題という事になります。

本サイト Surge をつかう。では、Surge を使って公開していますが、
サーバは Cloudflare を参照するようにして、常時 SSL を実現しています。

SSL に対応していないサーバのまま SSL 化する方法。| ふうせん🎈 Fu-sen.


サイトの一覧

管理しているサイトを確認したい場合は次のコマンドで一覧できます。

surge list

Listing all your projects | Surge Help


サイトの削除

サイトを削除する場合は次のコマンドを行なって下さい。

surge teardown ●●●.surge.sh

Tearing down a published project | Surge Help


Q&A

ブラウザ上から公開されている状況や操作は行なえますか?

ブラウザ上での表示・管理は行えず、surge コマンドでの表示・操作が全てのようです。

Surge のサーバはどこにありますか?

欧米とアジア(シンガポール・インド)に設置されています。日本にはありません。

sintaxi/regions.txt | GitHub Gist

なお、このページで紹介している Cloudflare は
東京と大阪にサーバが設置されています。

Cloudflareのエニーキャストネットワークの地図 | Cloudflare

日本語ドメインなどの IDN・国際化ドメイン名は使用できますか?

Punycode(xn– ではじまる英数)に変換する事で使用可能です。
独自ドメインだけではなく、●●●.surge.sh でも使用できます。

https://にほんご.surge.sh/

動きがおかしいのですが……

動作が異常に重いなど、いつもとは違う動きの場合は Twitter を確認してみて下さい。
なにかアナウンスしているかもしれません。

Twitter @surge_sh

surge コマンド(Surge CLI)レベルの不具合は GitHub の issue を確認してみて下さい。

sintaxi/surge | GitHub

Now との違いは?

Now も近い CLI 操作ですが、
Now は now コマンドのみで毎回異なるアドレスで公開を行います。
特定の固定アドレスにするためには now alias コマンドを更に実行します。
一方 Surge はアドレスを必ず任意に決めて surge 一回で公開できます。

Now をつかおう。