nprogram’s blog

気ままに、プログラミングのトピックについて書いていきます

node, npm, node_staticを用いて、とっても簡単に画像を表示しましょう

node

はじめに

ソースコードはGitHubに上げました。 github.com

ソースコードの動かし方は、README.mdに記載しましたので、よろしければご確認ください。

環境

ディレクトリ構成

f:id:nprogram:20161106232102p:plain

説明

index.jsのソースコードのみで、サーバーが起動できます。

[index.js]

var static = require('node-static');

//
// Create a node-static server instance to serve the './public' folder
//
var file = new static.Server('./public');

require('http').createServer(function (request, response) {
    request.addListener('end', function () {
        //
        // Serve files!
        //
        file.serve(request, response);
    }).resume();
}).listen(8080);

node index.jsコマンドを入力して、

http://localhost:8080/images/test.jpgにアクセスすることで、

画像が表示されます。

Node.js + Expressで簡単なWebアプリケーションをVisual Sutdio Codeで作ります

node

はじめに

ソースコードはGitHubに上げました。 github.com

ソースコードの動かし方は、README.mdに記載しましたので、よろしければご確認ください。

環境

Expressとは

  • Node.js 向けの高速で最小限の Web フレームワークのことです。 公式ドキュメントがわかりやすいです。

Express - Node.js Web アプリケーション・フレームワーク

プロジェクトのディレクトリ構成

Visual Studio Codeの便利な使い方1

プロジェクトにファイルが多くなると、事故が起こりやすくなります。

(ファイル操作ミスなど)

それを防ぐために、VSCodeの非表示設定が便利です。

.vscodeフォルダのsettings.jsonを次のように記述することで、 node_modulesフォルダが非表示になります

{
  "files.exclude" : {
    "node_modules" : true
  }
}

  • before 非表示前 f:id:nprogram:20161106184642p:plain

  • after 非表示後 f:id:nprogram:20161106184721p:plain

Visual Studio Codeの便利な使い方2

Ctrl + Shift + Pコマンドで、コマンドパレットを表示できます。 themeを入力してファイルアイコンのテーマを選択。 f:id:nprogram:20161106185540p:plain

Visual Sutdio Codeを選択してください。 f:id:nprogram:20161106185705p:plain

ファイルアイコンがカラーになってとても見やすくなります。

参考サイト

  • 次のページを参考にしました。とてもわかりやすいです。ありがとうございます。

garafu.blogspot.jp

(http://garafu.blogspot.jp/)

AngularJS、Node.js、Express4、MongoDBを使ったサンプルサイト

node

AngularJS、Node.js、Express4、MongoDBを使ったサンプルサイトなのですが、 とてもわかりやすいです。

このプログラムを参考にするといいと思います。

GitHub - nissato-hitoshi/myapp