Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Express + Static Files + Nginx

Olá Pessoal, desenvolvi minha aplicação em node e em ambiente local funcionou perfeitamente o carregamento de elementos estáticos. Porém, quando eu passei a aplicação para o ambiente de produção, ele simplesmente não carrega meus elementos estáticos. O Nginx precisa de alguma configuração especial ? Segue abaixo a configuração do meu express:

module.exports = function()
{

    var app = express();

    app.use(express.static('./assets'));
    app.set('view engine', 'ejs');
    app.set('views', './views');

    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({extended:true}));




    app.use(expressValidator());

    consign()
    .include('routes')
    .then('infra')
    .then('servico')
    .into(app);

    return app;
}

A minha estrutura de pastas é:

  • assets
    • images
    • css
    • js
  • config
    • express.js
  • app.js

Configuração do NGINX:


# http to https redirect
#
server {
  server_name  www.fleeterapp.com fleeterapp.com;
  # root         /var/www/html/adm_node/;
  return 301   https://fleeterapp.com$request_uri;
}

#
# www to https redirect
#
server {
  listen       443 ssl;
  listen       [::]:443 ssl;
  server_name  www.fleeterapp.com;  #CHANGE THIS

  #
  # SSL
  #
  include ssl/config;

  return 301  https://fleeterapp.com$request_uri;  #CHANGE THIS
}

#
# ssl and http2 config
#
server {
  listen       443 ssl http2;
  listen       [::]:443 ssl http2;
  server_name  fleeterapp.com;  #CHANGE THIS

  root    /var/www/html/adm_node/;
  index    index.php index.html index.nginx-debian.html;

  #
  # Log
  #
  access_log /var/log/nginx/serverAccess.log;
  error_log /var/log/nginx/serverError.log;
  rewrite_log on;


  #
  # SSL
  #
  include ssl/config;

  #
  # Log off favicon
  #
  location /favicon.ico {
    log_not_found off;
  }

  #
  location /assets {
    alias /var/www/html/adm_node/assets;
    autoindex on;
  }

  #
  #
  location / {
    try_files $uri $uri/ @backend;
  }

  #
  # Root
  #
  location @backend {
    proxy_set_header  Host $host;
    proxy_set_header  X-Real-IP $remote_addr;
    proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header  X-Forwarded-Host $server_name;
    proxy_set_header  X-Forwarded-Proto $scheme;
    proxy_set_header  X-NginX-Proxy true;
    proxy_redirect    off;
    proxy_http_version  1.1;
    proxy_set_header  Upgrade $http_upgrade;
    proxy_set_header  Connection "upgrade";
    add_header    Front-End-Https   on;
    proxy_pass              http://127.0.0.1:21313;
  }


  # PHP FPM configuration.
  #location ~ \.php$ {
  #  include snippets/fastcgi-php.conf;
  #  include fastcgi_params;
  #  fastcgi_pass unix:/var/run/php/php7.0-fpm.sock;
  #  fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
  #  fastcgi_intercept_errors on;
  #}

  # PhpMyAdmin
  #location /dba {
  #  location ~ ^/dba/(.+\.php)$ {
  #    try_files $uri =404;
  #    fastcgi_pass unix:/var/run/php/php7.0-fpm.sock;
  #    include fastcgi_params;
  #    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
  #  }
  #}

  # deny access to .htaccess files, if Apache's document root
  # concurs with nginx's one
  #
  location ~ /\.ht {
    deny  all;
  }
}

Obs: estranho que local ele encontra tudo certinho e estou usando apache, mas quando coloco em produção se perde :(

3 respostas

Fala ai Diego, não deu para ler o código por completo, mas eu ja tive o mesmo problema, minha solução foi a seguinte:

app.get("*/*.js", (req, res) => res.download(path.resolve(`./public/dist/${req.params[1]}.js`)));
app.get("*/*.css", (req, res) => res.download(path.resolve(`./public/dist/${req.params[1]}.css`)));
app.get("*/*.ico", (req, res) => res.download(path.resolve(`./public/dist/${req.params[1]}.ico`)));
app.get("*/*.eot", (req, res) => res.download(path.resolve(`./public/dist/${req.params[1]}.eot`)));
app.get("*/*.svg", (req, res) => res.download(path.resolve(`./public/dist/${req.params[1]}.svg`)));
app.get("*/*.ttf", (req, res) => res.download(path.resolve(`./public/dist/${req.params[1]}.ttf`)));
app.get("*/*.woff", (req, res) => res.download(path.resolve(`./public/dist/${req.params[1]}.woff`)));
app.get("*/*.woff2", (req, res) => res.download(path.resolve(`./public/dist/${req.params[1]}.woff2`)));
app.get("*", (req, res) => res.sendFile(path.resolve("./public/dist/index.html")));

Assim o Nginx conseguiu fazer o download dos arquivos estáticos, provavelmente é só você corrigir o path para a sua configuração.

Espero ter ajudado.

solução!

Opa, tudo bem ? Eu consegui resolver o problema com a seguinte solução:

  • Eu tirei o root do bloco server e adicionei mais uma linha:
location / {
                try_files $uri $uri/ @backend;
        }


location @backend {
                proxy_set_header        Host $host;
                proxy_set_header        X-Real-IP $remote_addr;
                proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header        X-Forwarded-Host $server_name;
                proxy_set_header        X-Forwarded-Proto $scheme;
                proxy_set_header        X-NginX-Proxy true;
                proxy_http_version      1.1;
                proxy_set_header        Upgrade $http_upgrade;
                proxy_set_header        Connection "upgrade";
                add_header              Front-End-Https   on;
                proxy_pass              http://127.0.0.1:21313;
        }

Funcionou direitinho! Obrigado.

Boa Diego, obrigado pelo feedback \o/