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

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

新規登録して質問してみよう
ただいま回答率
85.48%
Node.js

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

nginx

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

Express

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

Q&A

0回答

493閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

Node.js

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

nginx

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

Express

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

0グッド

0クリップ

投稿2018/06/30 12:32

編集2018/06/30 13:48

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

html

1<!doctype html> 2<html> 3 <head> 4 <title>Socket.IO chat</title> 5 <style> 6 * { margin: 0; padding: 0; box-sizing: border-box; } 7 body { font: 13px Helvetica, Arial; } 8 form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; } 9 form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; } 10 form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; } 11 #messages { list-style-type: none; margin: 0; padding: 0; } 12 #messages li { padding: 5px 10px; } 13 #messages li:nth-child(odd) { background: #eee; } 14 </style> 15 <link rel="stylesheet" href="public/stylesheets/index.css"> 16 </head> 17 <body> 18 <ul id="messages"></ul> 19 <form action=""> 20 <input id="m" autocomplete="off" /><button>Send</button> 21 </form> 22 <a href="/page2">page2へ</a> 23 <script src="/socket.io/socket.io.js"></script> 24 <script src="https://code.jquery.com/jquery-1.11.1.js"></script> 25 <script> 26 $(function () { 27 var socket = io(); 28 $('form').submit(function(){ 29 socket.emit('chat message', $('#m').val()); 30 $('#m').val(''); 31 return false; 32 }); 33 socket.on('chat message', function(msg){ 34 $('#messages').append($('<li>').text(msg)); 35 }); 36 }); 37 </script> 38 </body> 39</html>

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

nginx

1#nginx.conf /etc/nginx/nginx.conf 2user nginx; 3worker_processes 1; 4 5error_log /var/log/nginx/error.log warn; 6pid /var/run/nginx.pid; 7 8 9events { 10 worker_connections 1024; 11} 12 13 14http { 15 include /etc/nginx/mime.types; 16 default_type application/octet-stream; 17 18 #追加 19 #keys_zone=proxy はdefault.confのproxy_cache proxyに依存する 20 proxy_cache_path /var/cache/nginx/cache keys_zone=proxy:15m; 21 proxy_temp_path /var/cache/nginx/temp 1 2; 22 #追加(ここまで) 23 24 log_format main '$remote_addr - $remote_user [$time_local] "$request" ' 25 '$status $body_bytes_sent "$http_referer" ' 26 '"$http_user_agent" "$http_x_forwarded_for"'; 27 28 access_log /var/log/nginx/access.log main; 29 30 sendfile on; 31 #tcp_nopush on; 32 33 keepalive_timeout 65; 34 35 #gzip on; 36 37 include /etc/nginx/conf.d/*.conf; 38}

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

Nginx

1upstream socket_nodes { 2 ip_hash; 3 server xxx.xx.xxx.xxx:3000; 4} 5 6 7server { 8 listen 80; 9 server_name xxx.xx.xxx.xxx; 10 11 #charset koi8-r; 12 #access_log /var/log/nginx/host.access.log main; 13 14 location / { 15 proxy_redirect off; 16 set $do_not_cache 0; 17 if ($request_method != GET) { 18 set $do_not_cache 1; 19 } 20 if ($uri !~* ".(png|gif|css|js)$") { 21 set $do_not_cache 1; 22 } 23 proxy_no_cache $do_not_cache; 24 proxy_cache_bypass $do_not_cache; 25 proxy_cache proxy; 26 proxy_cache_key $scheme$host$uri$is_args$args; 27 proxy_cache_valid 200 1m; 28 proxy_cache_valid any 1m; 29 30 proxy_set_header Upgrade $http_upgrade; 31 proxy_set_header Connection "upgrade"; 32 proxy_http_version 1.1; 33 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 34 proxy_set_header Host $host; 35 proxy_pass http://socket_nodes; 36 } 37}

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

css

1a{ 2color:red 3}

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

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

javascript

1var express = require('express'); 2var app = express(); 3var http = require('http').Server(app); 4var io = require('socket.io')(http); 5var fs = require('fs'); 6 7const MongoClient = require('mongodb').MongoClient; 8const f = require('util').format; 9const assert = require('assert'); 10//この辺が怪しい? 11app.use(express.static(__dirname + '/public')); 12 13 14 15app.get('/', function(req, res){ 16 res.sendFile(__dirname + '/index.html'); 17}); 18 19//socket.io処理は省略 20 21http.listen(3000, function(){ 22 console.log('listening on *:3000'); 23});

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問