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 等のあるフォルダ] [公開ドメイン]

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


サブドメインを設定

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


静的サイトジェネーターを使用する場合

例えば Hugo だと hugo コマンドで
public フォルダ(ディレクトリ)内に公開ファイルが生成されます。
そのため、surge コマンドは surge public ●●●.surge.sh
CNAME ファイルを生成すれば、surge public で公開できます。

この時、連結コマンドを使用できます。OS 等によって異なります。
Windows は Powershell と コマンド プロンプト でも異なります。
Powershell は ; が区切り記号です。

hugo; surge public

コマンド プロンプトは & が区切り記号です。

hugo & surge public

macOS、その他 OS は && が区切り記号です。

hugo && surge public

●●●.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 ファイルなどを独自ドメイン名に変更して下さい。
ここでは ●●●.com とします。もちろん .com 以外も使用できます。

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(https: への強制)などの設定は Cloudflare 側から設定できます。

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

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

その他、例えば HTTP ステータス 301・302 を用いた転送は
Surge では Surge Professional 限定機能になっていますが、
Cloudflare を用いると Page Rules で実現できます。

Adding redirects | Surge Help
Recommended Page Rules to Consider | Cloudflare Support

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

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

ネームサーバを移すのが難しい場合は、
A・CNAME レコードの変更で使える Cloudbric をご検討下さい。
SSL 化手順で TXT レコードの追加も必要です。
転送量 4GB まで無料で使えます。

Cloudbric


サイトの一覧

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

surge list

Listing all your projects | Surge Help


サイトの削除

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

surge teardown ●●●.surge.sh

独自ドメインの場合も同じです。

surge teardown ●●●.com

Tearing down a published project | Surge Help


Q&A

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

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

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

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

sintaxi/regions.txt | GitHub Gist

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

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

無料提供されている EU.org は独自ドメイン同様に使用できますか?

運営者が独自ドメインと同じように使用できる事を確認しています。

EU.org https://nic.eu.org/

Surge 単体はもちろん、CloudFlare 使用も問題なく使用可能です。
●●.eu.org 以外に ●●.jp.eu.org なども使用可能です。

Public Suffix List にも登録されているので、
独自ドメイン同等に扱ってくれるサービスが多いです。
Surge で使用する場合もも独自ドメインの扱いになり、
●●.surge.sh の robots.txt による制限が生じません。

登録の段階でネームサーバの登録が必要です。
申請後は人的に確認され、承認となります。数日~数週間要します。

EU.org についてのサイトを作ってあります。詳細はこちらをご参照下さい。
EU.org をつかう。も Surge+Cloudflare で運営しています。

EU.org をつかう。

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

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

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

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

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

Twitter @surge_sh

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

sintaxi/surge | GitHub

Cloudflare を採用している場合、更新されないなどの問題は
Surge 側ではなく、Cloudflare 側での問題である場合があります。
(例えばファイルを更新しても反映されない→Cloudflare でキャッシュを消去)

Now との違いは?

従来 Now での公開は now → now alias としていましたが、
2019年3月より now --target production ([公開ディレクトリ]) に変わりました。
でも、Surge は surge [公開ディレクトリ] とシンプルで覚えやすいコマンドです。

Now をつかおう。