質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.52%

  • Node.js

    1856questions

    Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

  • nginx

    837questions

    nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

  • Express

    242questions

    ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

Node.js使用時の静的ファイル(css,js,png)をNginxにキャッシュさせる方法

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 313
退会済みユーザー

退会済みユーザー

ご覧いただきありがとうございます。
表題の通り、静的ファイル(css,js,png)をNginxでキャッシュさせたいと思っています。
サーバーサイドの勉強中のため至らない箇所多々あると思いますが、お許しください。
Node.jsのExpress環境です。静的ファイルのディレクトリルートは/home/manager/www/sample/public
となっており、publicフォルダ内はjavascripts,stylesheets,imagesとフォルダが別れておりそれぞれのファイルが存在しています。

<!doctype html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; }
      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
    </style>
    <link rel="stylesheet" href="public/stylesheets/index.css">
  </head>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
    <a href="/page2">page2へ</a>
    <script src="/socket.io/socket.io.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    <script>
      $(function () {
        var socket = io();
        $('form').submit(function(){
          socket.emit('chat message', $('#m').val());
          $('#m').val('');
          return false;
        });
        socket.on('chat message', function(msg){
          $('#messages').append($('<li>').text(msg));
        });
      });
    </script>
  </body>
</html>

上記のHTMLはSocket.ioのテストページで、ページ自体は問題なく稼働(socket.io,css)しています。
次にnginx.confは下記の通りになっております。

#nginx.conf  /etc/nginx/nginx.conf
user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    #追加
    #keys_zone=proxy はdefault.confのproxy_cache proxyに依存する
    proxy_cache_path      /var/cache/nginx/cache keys_zone=proxy:15m;
    proxy_temp_path       /var/cache/nginx/temp 1 2;
    #追加(ここまで)

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;
}


次はnginx.conf内でincludeしているdefault.confです。

upstream socket_nodes {
    ip_hash;
    server xxx.xx.xxx.xxx:3000;
}


server {
    listen       80;
    server_name  xxx.xx.xxx.xxx;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        proxy_redirect off;
        set $do_not_cache 0;
        if ($request_method != GET) {
         set $do_not_cache 1;
        }  
        if ($uri !~* ".(png|gif|css|js)$") {
         set $do_not_cache 1;
        }
        proxy_no_cache $do_not_cache;
        proxy_cache_bypass $do_not_cache;
        proxy_cache proxy;
        proxy_cache_key $scheme$host$uri$is_args$args;
        proxy_cache_valid 200 1m;
        proxy_cache_valid any 1m;

        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_http_version 1.1;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_pass http://socket_nodes;
    }
}

一応/var/cache/nginx/cacheフォルダ内にはfa4c1a653fce438e6e4e5fb96435ac0dファイルが生成されているので、キャッシュできていると思うのですが、、、
linuxコマンド wsで見ると
16  1251 62983 fa4c1a653fce438e6e4e5fb96435ac0d
となっておいて、jsファイルはindex.htmlでは読み込みしておらず、読み込みに成功しているcssも

a{
color:red
}


socket.io.jsはバイト数:62445、行数:8となっており両方合わせても、62471,11と500バイトほどの誤差があります。
目的をcss,js,png,gifファイルをキャッシュするとした時に、上記のNginxの設定で間違い無いのでしょうか?(投げやりな質問で申し訳ございません)。

追加:
catでキャッシュファイルを見たところ、どうやら<script src="/socket.io/socket.io.js"></script>しか、キャッシュされておらず、ファイル内にindex.cssを確認できませんでした。

var express = require('express');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var fs = require('fs');

const MongoClient = require('mongodb').MongoClient;
const f = require('util').format;
const assert = require('assert');
//この辺が怪しい?
app.use(express.static(__dirname + '/public'));



app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

//socket.io処理は省略

http.listen(3000, function(){
  console.log('listening on *:3000');
});


上記は/home/manager/www/sample/app.jsです。

xxx.xx.xxx.xxx:3000/socket.io/socket.jsはキャッシュできていますが
xxx.xx.xxx.xxx:3000/public/stylesheets/index.cssはキャッシュできていないようです。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • Node.js

    1856questions

    Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

  • nginx

    837questions

    nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

  • Express

    242questions

    ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。