Office アドイン

Live Serverとmkcertで簡単にローカルhttpsサーバーを立ち上げる方法

Office アドインのテストを行うのに、簡単に構築できるhttpsサーバー環境をずっと探していたのですが、ようやく「コレ、かなり簡単じゃない?」と思える環境を見つけました。

Live Serverのインストール

Visual Studio Codeの拡張機能に「Live Server」があります。

これを使うとVisual Studio Codeから簡単にローカルサーバーを起動でき、さらにファイル更新に合わせて自動的にブラウザーをリロードすることもできます。

インストールも簡単で、【Visual Studio CodeのExtensions(拡張機能) → Live Serverで検索 → Install】を実行するだけです。

Live Serverの使い方

Live Serverを有効にした後、ワークスペース内のファイルを右クリックし、「Open with Live Server」をクリックすると、サーバーが立ち上がります。

このとき、ファイアウォールの警告画面が表示された場合は、アクセスを許可します。

画面右下にある「Go Live」ボタンを押すことでも、サーバーを立ち上げることができます。

逆にサーバーを停止したいときは、画面右下にある「Port : 5500」ボタンを押します。

mkcertによる自己署名証明書作成方法

Live Serverはhttpsにも対応していますが、証明書の設定が必要となります。
ローカルサーバーなので、使うのは自己署名証明書、いわゆるオレオレ証明書を作成するわけですが、「mkcert」を使うことで、簡単に証明書を作成できます。

  1. mkcertのreleasesページから最新版のファイルをダウンロードします。
  2. ダウンロードしたファイルのプロパティを開き、“このファイルは他のコンピューターから取得したものです。このコンピューターを保護するため、このファイルへのアクセスはブロックされる可能性があります。”メッセージが表示されている場合は、「許可する」にチェックを入れ、「OK」ボタンをクリックします。
  3. 使いやすいように、ファイルを「mkcert.exe」にリネームします。
  4. コマンドプロンプトで mkcert.exe のフォルダを開き、下記コマンドを実行します。インストールする際にセキュリティ警告画面が表示されるので、「はい」ボタンをクリックします。
  5. mkcert -install
    mkcert localhost 127.0.0.1 ::1

  6. mkcertと同じフォルダに証明書(localhost+2.pem)と秘密キー(localhost+2-key.pem)が作成されます。

Live Serverでhttpsを有効化する

証明書の作成が終わったら、Live Serverの設定を変更し、httpsを有効化します。

  1. Visual Studio CodeのExtensions(拡張機能)から、Live Serverの「settings.json」を開きます。
  2. 下記設定を追加します。証明書と秘密キーのパスは環境に合わせて変更してください。
  3. "liveServer.settings.https": {
        "enable": true,
        "cert": "C:\\Software\\mkcert\\localhost+2.pem",
        "key": "C:\\Software\\mkcert\\localhost+2-key.pem",
        "passphrase": ""
    }

  4. Live Serverでサーバーを立ち上げると、「https」になっていることが確認できます。

以上のように、Live Serverとmkcertを使うと簡単にhttpsサーバーを立ち上げることができます。

Live Serverのことは以前から知っていましたが、mkcertのことは知らなかったので、「https有効化するのに証明書用意するの面倒くさいなー・・・」と、ずっと思っていたのですが、これで手間が掛かる問題は一気に解決!
テスト環境の用意がとても楽になりました😄

参考Webサイト

関連記事

  1. ブックマークレット

    Bingで期間指定検索するオプション 他

    Bingで期間指定検索するオプション 他Bingで検索するとG…

  2. Office アドイン

    Office 2016で進化したOffice アドイン

    今日OfficeDevを眺めていて気が付いたのが「OfficeJS S…

  3. その他

    2016年ブログ振り返り(後半戦)

    前回の記事に引き続き、今年書いた記事の振り返りです。2016年…

  4. その他

    bitlyのAPIキーを取得する

    今回はURL短縮サービスとして有名なbitlyのAPIキーを取得する方…

  5. その他

    テキスト比較ソフト「ちゃうちゃう!」がバージョンアップされました。

    「ちゃうちゃう Word」といったキーワード検索でのアクセスがありまし…

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

Time limit is exhausted. Please reload CAPTCHA.

最近の記事

アーカイブ

RapidSSL_SEAL-90x50
PAGE TOP