Browsersyncでhttpsを使う

httpsでローカル環境を作る機会があったのでメモ。

設定方法

Browsersyncを使用します。
設定方法や使い方については以前記事を投稿していますので、以下をご確認下さい。
ローカルサーバを起動するBrowsersyncを使ってみる

起動時に以下のようにすればOKです。

browser-sync start --server --https true

「–https true」を付けています。

ブラウザが立ち上がると、以下のような警告画面が表示されます(chromeの場合)。
詳細設定をクリックします。

「localhostにアクセスする」をクリックします。

https://localhost:3000 にアクセスすることができました。

Gulpを使う場合も同様のオプションで設定できます。

var gulp         = require('gulp'),
    browserSync  = require('browser-sync');

gulp.task('default', function() {
  browserSync({
    server: {
      https: true
    }
  });
});

【参考サイト】

• Browsersync options