Surge.shは、スタティックなサイトをホスティングしてくれるサービス
すべてがコマンドラインで完結してくれて、とても手軽に使える。

インストール

$ npm install -g surge

適当にサイトを作る

$ mkdir surge_test
$ cd surge_test/
$ echo '<h1>Hello World</h1>' > index.html

デプロイ

$ surge

   Welcome to Surge! (surge.sh)
   Login (or create surge account) by entering email & password.

          email: s.sato.desu@gmail.com
       password:

   Running as s.sato.desu@gmail.com (Student)

            project: /home/sato/work/surge_test/
         domain: aspiring-show.surge.sh
         upload: [====================] 100% eta: 0.0s (1 files, 21 bytes)
            CDN: [====================] 100%
             IP: 45.55.110.124

   Success! - Published to aspiring-show.surge.sh

アカウント登録まですべてコマンドラインで完結するので、上のコマンドだけで http://aspiring-show.surge.sh/ にデプロイしてくれた。

CIするとき

surgeのデプロイ時には、インタラクティブにユーザー名、パスワード、ドメイン名の入力を求められる。
travisやcircle ci,codeshipに関しては公式に対応されているが、GitLabやJenkinsを使う場合、インタラクティブに入力していた項目は コマンドラインの引数か環境変数にしたい。

このために、まずトークンを取得する。

$ surge token

  *****

以下のように、引数を与えてやるとインタラクティブな入力なしにデプロイできる。

$ surge --token ***** --project ./ --domain aspiring-show.surge.sh

--projectはindex.htmlの入っているディレクトリ名、--domainはデプロイ先のドメイン名

npmで管理されたプロジェクトでの利用

surgeコマンド自体が、npmパッケージなので、npmで管理されたプロジェクトでの利用は特に楽

プロジェクトの依存関係に追加

$ npm install surge --save-dev

以下のようにnpm scriptsに書いておいてnpm run buildした後に、dist/配下に出力されたファイルを npm run deployでデプロイできるようにしておくと、すぐに、インターネットに公開できて便利。
(下はwebpackでビルドする場合)

{
  "name": "app",
  "version": "1.0.0",
  "scripts": {
    "build": "webpack --mode production",
    "deploy": "surge --token ***** --project ./dist --domain aspiring-show.surge.sh"
  }
  // 略
}