無料で手軽！コマンド一つで静的サイトホスティングできるSurgeを試してみた。
こんにちは、n0bisukeです。
最近VuePressを触っていて、簡単に静的サイトホスティングできるサービスを探していました。
そこで発見したSurge（サージ）というサービスがすごく簡単だったので紹介します。
（日本語記事なさそうだったので勢いで書いておこう）
Surgeとは
静的サイトホスティングが無料で行えるサービスです。
コマンド一発でデプロイが出来るのが特徴で、使い方がすごくシンプルで感動しました。
surge公式サイトちなみにサージって読むっぽいです。有料プランもありますがその辺は割愛して無料でできるところを紹介します。
無料でどこまで使えるの？って気になる人はWhy is Surge free?という記事もあるので読んでみましょう。
Surgeのインストールと使い方
インストール
npm i -g surge
デプロイ
surge
以上!!! めちゃ簡単ですね。
でも本当にこれだけなので驚きです。now.shに似た使い勝手。
初めて使うときはメールアドレスとパスワードの入力をターミナル上で求められるのでそこでユーザー登録出来るのも個人的には好きです。ターミナルだけで完結します。
デプロイするとxxxxxxx.surge.shという形式のURLが発行されるので、アクセスすればOKです。
もう少し詳しく
surgeコマンドは、今いる場所を起点にそのままホスティングします。
例えばmysiteフォルダ内部にindex.htmlを置いてたとします。
$ cd mysite
$ ls
index.html
mysiteフォルダ内にいる状態で
surge ./
とすればmysiteフォルダをまるっとホスティングできます。
場所を指定してデプロイ
surge <フォルダの場所>という形でデプロイできます。
surge ~/myblog/.vuepress/dist
vuepressを使ったデプロイだとこんな感じでした
場所とドメインを指定してデプロイ
さらにドメインを指定してデプロイができます。
通常のデプロイだと、surgeコマンドでデプロイするたびに新しいドメインが生成されるので、更新性のあるサイトだと使い勝手が良くないです。
surge <フォルダの場所> <ドメイン>という形でデプロイすれば毎回同じドメインにデプロイできます。
surge ~/myblog/.vuepress/dist hogehoge.surge.sh
このコマンドを何回実行してもhogehoge.surge.shにデプロイされるので更新しても安心です。
確かnow.shだと毎回ドメインが発行されてaliasを貼り直さないといけない感じだったのでそこが少し手間だなぁと感じてました。この辺は後述します。
カスタムドメインも無料で使える
無料でカスタムドメインを利用できます。
「Adding a custom domain - surge」を見るとやり方が書いてるのですが、利用しているドメイン事業者の管理画面でcnameの値にna-west1.surge.shを指定しましょう。
grasping.studioというドメインをお名前.comで管理しているので、hogehoge.graspin.studioを利用したい場合は以下のように設定します。
更新してしばらく経つ（体感5~10分程度）とhogehoge.graspin.studioに対してデプロイできるようになります。
$ surge ~/myblog/.vuepress/dist hogehoge.graspin.studio
その他使い方
surgeコマンドのサブコマンドもいくつかあるので紹介します。
surge list - アプリケーション一覧
$ surge list
surge teardown - アプリケーション削除
teardownってあんまり聞かないですけど他のサービスで言うところのrmとかremoveとかと同じような意味合いです。
$ surge teardown <アプリケーションのドメイン>
surge whoami - アカウント情報の確認
ログインしているアカウントのメールアドレスが表示されます。
$ surge whoami
surge logout - アカウントからログアウトする
$ surge logout
surge login - ログインしなおす
$ surge login
他のメンバーと共同でデプロイする
--addというオプションをつけてデプロイするとアプリケーションに指定したメールアドレスのユーザーもデプロイ出来るようになります。
ユーザー[email protected]さんをアプリケーションhogehoge.graspin.studioへのデプロイ権限を渡しつつ、publicフォルダをデプロイする。
surge --add [email protected] public hogehoge.graspin.studio
この辺りもコマンドラインからやれて便利ですね。
surge --removeでユーザーの権限を削除することもできます。
他のサービスと比較してどうか?
無料で使えるその他のホスティングサービスとの比較です。主観です。
この辺、実は違う！みたいな話あれば@n0bisukeまでコメントください〜。
Netlfy
フォルダをドラッグ&ドロップでデプロイ出来るのは個人的に結構好きですが、毎回URLが再発行されてしまうのが少し手間がある印象です。
netlfyのcliツールもあるみたいですが手順がsurgeよりはある模様
heroku
サーバーサイドのプログラムを含めてデプロイするときには良さそうです。 僕もよく使います。
デバッグなどでけっこう詰まるのと、surgeほどの手軽さではないです。
とはいえサーバーサイドプログラムまで利用したかったら選択肢になります。
GitHub Pages & Bitbucket Pages
GitHub PagesとBitbucket Pagesは使い勝手はほぼ同じ印象で、git pushするだけで公開できます。
Webエンジニアなら当たり前のように使いますが、SSHやGitコマンドは最初少しハードルがあるかも。
更新されるまでに少し時間がかかること、GitHubだとソースコードが（無料だと）公開されてしまうのでそこに抵抗感がある人がいるかも。
静的サイトなのでどっちにしても公開されているようなものだけどなんとなく。
GitLab Pages
CIを動かして作るのでCIの記述になれてないと最初少しハマるかもしれません。
その分やれることも多いので個人的には注目してます。
now
これはめちゃ便利でnowコマンドだけでデプロイできてsurgeとほぼ同じ使い勝手です。更新のたびに毎回URLが変わってしまうのでそこを解消できたら良いなぁと思うのと、同時に無料プランだと作れるアプリケーションの制限があって現状だと毎回削除していくのも結構手間があるなぁという印象です。
（nowはもしかしたら設定でなんとかなるのかも??）
まとめ
Surgeどうでしょう？
コマンド一発で出来るので、サクッと作成したWebサイトを誰かにシェアしたり、 ハンズオンや授業などでも使いやすいと思います。
僕も昨日知ったばかりですが今の所すごく良い印象です。
ぜひ使ってみてください。