読者です 読者をやめる 読者になる 読者になる

paiza開発日誌

paiza(https://paiza.jp)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

面倒な設定不要!無料でWebサイトをSSL化してホスティングする超お手軽サービス厳選まとめ!

開発ネタ プログラミング初心者 プログラミング学習

f:id:paiza:20160920152132j:plain
どうも、まさとらん(@0310lan)です。

最近は、無料であるにも関わらず、多彩な機能を提供してくれるホスティングサービスが増えてきました。


そこで今回は、面倒な「契約」や「設定」が不要で、誰でも簡単にWebサイトを即座に公開できる優れたサービスを厳選してご紹介してみようと思います。

これからWebサイトを公開しようと考えている方は、ぜひ参考にしてみてください!

■コマンド1発でホスティングが完了するサービス!

PubStorm

f:id:paiza:20160920152307j:plain
ブラウザ上に開発環境を構築できるクラウドIDEサービス「Nitrous」のチームが提供しているサービスで、エンジニアが扱いやすいように全てコマンドラインからの操作で完結できるように設計されています。


基本的な使い方としては、Webサイトを構成するファイルを作ったら以下のコマンドを叩くだけです!

$ storm publish 

たったこれだけで、【 プロジェクト名.pubstorm.site 】というURLで即座にWebサイトが公開されます。

さらに、独自ドメイン」「SSL対応」「バージョン管理」「Basic認証」などもすべて無料で対応してくれるスグレモノなんです!


初めて使う人でも、以下3ステップのコマンドを実行するだけで簡単に導入可能です!

$ sudo npm install -g pubstorm 
$ storm signup 
$ storm init 

「storm init」を実行した後に、公開したいWebサイトのルートフォルダを指定し、URLとなる「プロジェクト名」を設定すれば準備完了です。

あとは、Webサイトのファイルを新規追加・更新する度に「storm publish」を実行するだけというお手軽さが魅力的です。


ちなみに、いくつか便利なコマンドが用意されているのですが、特にオススメのコマンドがこちら!

$ storm config

このコマンドを実行するだけで、なんと「HTML/CSS/JavaScript」ファイルを圧縮・結合してくれて、さらに画像ファイルの最適化や「sitemap.xml」の生成まですべて自動的に対応してくれますよ!


<参考>

GitHubと連携可能な超お手軽サービス!

Netlify

f:id:paiza:20160920152703j:plain
海外では注目度が高まっているサービスで、こちらも独自ドメイン」「SSL対応」「バージョン管理」など、基本的には先ほどご紹介した「PubStorm」とほぼ同じことが出来るようになっています。


そのため、サイトを公開する際も以下のコマンドを実行するだけでOKです。

$ netlify deploy 

特徴的なのは、GitHubアカウントでログインして自分の「リポジトリ」と連携できる点で、このリポジトリ」を更新する度にNetlifyへ公開したWebサイトも自動で反映されるようになるのは便利です。


さらに、初心者でも簡単に扱えるように「ドラッグ&ドロップ」に対応したGUIも提供されています。
f:id:paiza:20160920153107j:plain
Webサイトを構成するファイルを1つのフォルダに収めて、zip圧縮してアップロードするだけで即座に公開することが可能です。

他にも、Webhookによるトリガ設定やSlack・メール通知などの独特な機能も搭載しており、活用次第では強力なパートナーになると思います。


<参考>

■さらに使いやすくなった定番サービス!

GitHub Pages

f:id:paiza:20160920153411j:plain
GitHubが提供しているホスティングサービスということで、すでに利用されている方も多いのではないでしょうか。


使い方もシンプルで、自分のユーザー名を含めた以下のようなリポジトリ名」を作れば準備完了です。(ユーザー名がsampleであれば、sample.github.ioになる…)

【ユーザー名】.github.io 

あとは、このリポジトリにWebサイトを構成するファイルを「プッシュ」すれば公開されるというお手軽さ。(公開手順詳細

もちろん、独自ドメインSSLにも対応しています。


また、上記方法以外にも最近のアップデートにより、どんなリポジトリであっても「docs」フォルダ配下にあるWebページが自動的に公開されるようになりました。
f:id:paiza:20160920153527j:plain
これにより、以下のようなURLでサイトを閲覧できるようになるわけです。

【ユーザー名】.github.io/【リポジトリ名】 


ちなみに、「Git操作」に慣れていない人でも、新しくリポジトリを作って「➀Create new file」ボタンから、直接「➁Webページのファイル」を作ってブラウザ上でプログラミングすることも可能です!
f:id:paiza:20160920153608j:plain
もちろんファイルをアップロードしても良いので、Gitコマンドを使わなくてもサイトを公開することが出来るようになるでしょう。

類似サービスとして、「GitLab」が提供するサービス「GitLab Pages」というのもあるので、ご興味ある方はぜひ参考にしてみてください!


<参考>

Googleが提供する多機能サービス!

Firebase

f:id:paiza:20160920153812j:plain
Firebase」は、ユーザー管理やデータベースなどの「バックエンド処理」を簡単に利用できるBaaSのようなサービスですが、ホスティング機能も提供しているのが特徴です。

Googleのアカウントを持っている人であれば、誰でも無料で利用できるようになっています。


コマンドラインからシンプルに使えるように工夫されており、導入は以下のコマンドを叩くだけです。

$ sudo npm install -g firebase-tools
$ firebase login


「loginコマンド」実行後に表示されるURLをクリックすれば、Googleアカウントで認証できるようになっています。
f:id:paiza:20160920153847j:plain
もし、ローカル環境での開発でなければ、オプションを付けることで「IDコード」による認証も可能です。

$ firebase login --no-localhost 


サイトを公開する前に、初回のみ初期設定を行います。

$ firebase init 

コマンド実行後に、「Firebase」で作ったプロジェクト名を選択し、Webサイトを構成するルートフォルダを指定します。


最後に「デプロイ」コマンドを実行すれば、即座にサイトが公開されます!

$ firebase deploy 


公開されると、以下のようなURLで閲覧可能!

【プロジェクト名】.firebaseapp.com 


Firebase」の使い方を覚えれば、独自ドメインSSL対応だけでなく、SNS認証やユーザー管理・データベースといった多彩な機能も一緒に活用できるというのが最大の魅力と言えるでしょう。
f:id:paiza:20160920153940j:plain
また、スマホアプリなどの開発にも利用でき、テストやアナリティクスのような便利機能も活用できるスグレモノです。


<参考>

■おまけ

最後に、ホスティングサービスとはちょっとジャンルが違うのですが、サイトやWebアプリなどをSSL化して簡単に公開できるサービスとして2つご紹介しておきます!

Google Apps Script(GAS)

f:id:paiza:20160920154239j:plain
以前から、Googleドライブで利用できるようになっていたのでご存知の方も多いと思いますが、今では立派な「開発環境」と言っても良いくらいの存在感があります。


基本的には、JavaScriptによる「Webアプリ開発」が出来るのですが、独自に提供されているAPIを活用することで普通のWebサイトから複雑なWebアプリまで、さまざまなサイトを作って公開できるのが特徴です。

ほとんどのGoogleサービスと連携できるうえ、フロント側で扱うJavaScriptでは取得できないような外部JSONデータを操作したり、プログラムの定期実行をさせたり…など、ユニークな使い方も出来ます。

(使い方の詳細はコチラ!)


HyperDev

f:id:paiza:20160920154322j:plain
サイトにアクセスした瞬間から、「バックエンド」と「フロントエンド」両方の開発が可能な環境をブラウザ上に構築してくれるサービス。


サーバー側はNode.jsで開発できるようになっており、「package.json」に必要なNodeモジュールを記載するだけで自動的に利用できたり、GitHubアカウントに紐付けることで永続的にプロジェクトを保存したり、エディタをカスタマイズしたり、コラボ連携したり…などが可能です。


Webサイトのプロトタイプ作りから、高度なWebアプリ開発まで柔軟に対応してくれるので知っておいて損はないはず! (参考ドキュメントはコチラ!)

paizaについて

f:id:paiza:20150730172136p:plain
paizaでは、プログラミングスキルチェック問題(14言語に対応)を多数ご用意いたしております。もちろん今回使用しているJavaScriptにも対応しておりますので、「JavaScriptでプログラミング問題を解いてみたい」「自分のスキルを試してみたい」という方にもピッタリです!

paizaでプログラミング問題を解くと、結果によりS・A・B・C・D・Eの6段階で自分のスキルのランクが分かります。問題はレベルごとに分かれており、初心者から上級者の方まで挑戦していただけますので、自分のプログラミングスキルを客観的に知りたいという方は是非チャレンジしてみてください!!

プログラミング問題による学習コンテンツ(paiza Learning)もございますので、「まったくのプログラミング未経験者です」「初心者なのでプログラミング学習から始めたいな」という方もぜひご利用ください。

さらに、paizaが運営する無料オンラインプログラミング実行環境サービス「paiza.IO (パイザ・アイオー)では、JavaScriptはもちろん、多数プログラミング言語のプログラミングが面倒な環境構築なしに無料でできますのでぜひご利用ください!

■まとめ

ランディングページや企業サイト、ポートフォリオなど、シンプルなWebサイトであれば今回ご紹介したサービスを十分活用できると思います。


また、Webサイトを公開したことがない人や慣れていない方は、手始めに「Netlify」のドラッグ&ドロップによる公開作業を試してみることをオススメ致します。

ちょっとずつ慣れてきたところで、他のサービスも試してみると良いでしょう。


ほとんどのサービスは有料プランも提供されており、大規模なWeb開発にも柔軟に対応できるので、ご興味ある方はぜひ参考にしてみてください!




paizaではITエンジニアとしてのスキルレベル測定や、動画によるプログラミング学習コンテンツ(paiza Learning)を提供しています。テストの結果によりS,A,B,C,D,Eの6段階でランクが分かります。自分のプログラミングスキルを客観的に知りたいという方は是非チャレンジしてみてください。

http://paiza.jp

プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編