http-serverでサクッとローカルにHTTPサーバをたてる

ローカルにHTTPサーバたてたいなーと思ったので調べてみたら便利なものがあったので紹介します。

http-server

https://github.com/indexzero/http-server

Node.jsで動くHTTPサーバデス。

http-serverをインストールして起動してみる

HTTPサーバをたてたいところでまずはnpm init。

cd D:\Test\sample
npm init -y

続けてhttp-serverをインストールします。
今回はローカルに。

npm install http-server --save-dev

pakcage.jsonを修正します。

  "scripts": {
    "http-server": "http-server"
  }

これでhttp-serverを起動することが出来るようになりました。

あとはHTTPサーバにコンテンツを置いてブラウザから見てみましょう。

D:\Test\sample配下にPublicフォルダを作成します。
あとはPublicフォルダにコンテンツを置きます。

D:Test\Test\sample
├node_modules
├public
│　├index.html
│　└sample.md
└pakcage.json

index.html

<DOCTYPE html>
<html>
<head>
  <title>サンプル</title>
  <meta charset="utf-8">
  <style>
    body { font-![slide.png](http://luna.science.nttdata-ccs.co.jp:3000/files/5abb2aa9ad52f21d77615203)
family: 'Droid Serif'; }
    h1, h2, h3 {
      font-family: 'Yanone Kaffeesatz';
      font-weight: normal;
    }
    .remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
  </style>
</head>
<body>
  <!-- Remarkjs -->
  <script src="https://remarkjs.com/downloads/remark-latest.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    var slideshow = remark.create({sourceUrl: "sample.md"});
  </script>
</body>
</html>

sample.md

name: inverse
layout: true
class: center, middle, inverse
---
# 見れた？

では早速http-serverを起動してみましょう。
port番号は適当に10000を指定してます。

npm run http-server -- -p 10000

http://localhost:10000 にアクセスしてみます。

f:id:mt9116:20180328144258p:plain

表示されましたー
たったこれだけでHTTPサーバが使えるなんて便利ですよね。