arrow-right hamburger logo-mark social-facebook social-github social-twitter
2018.09.09

無料で手軽!コマンド一つで静的サイトホスティングできるSurgeを試してみた。

のびすけ

Node.js Magazine
    このエントリーをはてなブックマークに追加  

こんにちは、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

https://www.now.sh/

これはめちゃ便利でnowコマンドだけでデプロイできてsurgeとほぼ同じ使い勝手です。更新のたびに毎回URLが変わってしまうのでそこを解消できたら良いなぁと思うのと、同時に無料プランだと作れるアプリケーションの制限があって現状だと毎回削除していくのも結構手間があるなぁという印象です。

nowはもしかしたら設定でなんとかなるのかも??)

まとめ

Surgeどうでしょう?

コマンド一発で出来るので、サクッと作成したWebサイトを誰かにシェアしたり、 ハンズオンや授業などでも使いやすいと思います。

僕も昨日知ったばかりですが今の所すごく良い印象です。

ぜひ使ってみてください。

    このエントリーをはてなブックマークに追加