[英]NGINX Config for Express Static Files
I have nginx running and I also have an express backend server with a react front end. 我正在运行Nginx,也有一个带有响应前端的快速后端服务器。 The issue I'm having is with the static files from express.
我遇到的问题是来自express的静态文件。 For instance I have some handlebar view files with a header that calls to css/style.css and the js directory as well which currently works in Chrome but not in IE, Edge or Safari.
例如,我有一些车把视图文件,这些文件的标头可以调用css / style.css和js目录,该文件当前在Chrome中可用,但在IE,Edge或Safari中不可用。 In those browsers the console shows a 404 and the styling doesn't apply of course.
在那些浏览器中,控制台显示404,并且样式当然不适用。
I call for the style.css from my handlebars view page like so: 我从车把视图页面中调用style.css,如下所示:
<link rel="stylesheet" href="css/style.css">
It should be setup so that if I were to visit http://sitename.com/css/style.css I would see the style.css from /var/www/sitename.com/html/node/public/css/style.css location. 应该进行设置,以便如果我要访问http://sitename.com/css/style.css,我会从/var/www/sitename.com/html/node/public/css/style中看到style.css .css位置。 Which actually appears to work in Chrome but not in other browsers.
实际上似乎可以在Chrome浏览器中使用,但不能在其他浏览器中使用。
I have this statement in my express app 我的Express应用程式中有这句话
app.use(express.static('public'));
I have a directory structure like so: 我有这样的目录结构:
/var/www/sitename.com/html/node (node express app is running from here)
/var/www/sitename.com/html/node/public (public folder for static files from express)
-> css (folder)
-> js (folder)
my nginx is setup as follows: 我的nginx设置如下:
server {
listen 80;
server_name _;
root /var/www/sitename.com/html;
index index.php index.html;
server_name sitename.com www.sitename.com;
location /phpmyadmin {
try_files $uri $uri/ =404;
}
location / {
root /var/www/sitename.com/html/node/public/;
try_files $uri @backend;
}
location @backend {
proxy_pass http://localhost:42134;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
}
# set max upload size
client_max_body_size 2G;
fastcgi_buffers 64 4K;
access_log /var/log/nginx/http_access.log combined;
error_log /var/log/nginx/http_error.log;
location = /favicon.ico {
log_not_found off;
access_log off;
}
location = /robots.txt {
allow all;
log_not_found off;
access_log off;
}
location ~ \.php$
{
try_files $uri =404;
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
}
location ~* \.(htaccess|htpasswd) {
deny all;
}
# set long EXPIRES header on static assets
location ~* \.(?:jpg|jpeg|gif|bmp|ico|png|css|js|swf)$ {
expires 30d;
access_log off;
}
}
The solution ended up being to remove the express.static line in the app.js and then in the nginx config I had to rearrange things as so: 解决方案最终是删除app.js中的express.static行,然后在nginx配置中,我不得不这样重新排列:
server {
listen 80;
server_name _;
root /var/www/sitename.com/html;
index index.php index.html;
server_name sitename.com www.sitename.com;
location /phpmyadmin {
root /var/www/sitename.com/html;
try_files $uri $uri/ =404;
}
location /dashboard {
index index.php index.html;
try_files $uri @backend;
}
location /static {
root /var/www/sitename.com/html;
try_files $uri $uri/ =404;
}
location / {
index index.php index.html;
try_files $uri @backend;
}
location @backend {
proxy_pass http://localhost:42134;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# Following is necessary for Websocket support
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
# set max upload size
client_max_body_size 2G;
fastcgi_buffers 64 4K;
access_log /var/log/nginx/http_access.log combined;
error_log /var/log/nginx/http_error.log;
location = /favicon.ico {
log_not_found off;
access_log off;
}
location = /robots.txt {
allow all;
log_not_found off;
access_log off;
}
location ~ \.php$
{
try_files $uri =404;
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
}
location ~* \.(htaccess|htpasswd) {
deny all;
}
# set long EXPIRES header on static assets
location ~* \.(?:jpg|jpeg|gif|bmp|ico|png|css|js|swf)$ {
expires 30d;
access_log off;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.