node.js - 用于 Express 静态文件的 NGINX 配置
问题描述
我正在运行 nginx,并且我还有一个带有反应前端的快速后端服务器。我遇到的问题是来自 express 的静态文件。例如,我有一些带有调用 css/style.css 和 js 目录的标题的车把视图文件,这些文件目前在 Chrome 中有效,但在 IE、Edge 或 Safari 中无效。在那些浏览器中,控制台显示 404 并且样式当然不适用。
我从我的车把视图页面调用 style.css,如下所示:
<link rel="stylesheet" href="css/style.css">
应该设置它,以便如果我要访问http://sitename.com/css/style.css我会从 /var/www/sitename.com/html/node/public/css/style 看到 style.css .css 位置。这实际上似乎适用于 Chrome,但不适用于其他浏览器。
我的快递应用程序中有此声明
app.use(express.static('public'));
我有一个像这样的目录结构:
/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)
我的 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;
}
}
解决方案
解决方案最终是删除 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;
}
}
推荐阅读
- powershell - 如何从 Invoke-webrequest 内容结果中钻取数据?
- android - 任务 ':common:kaptDebugKotlin' 执行失败
- azure - Azure devops - 内部版本号与内部版本 ID
- html - xmlns:xlink="http://www.w3.org/1999/xlink" 还有功能吗?
- javascript - 每当我运行 npm install --force 时,我都会遇到此错误
- python - 使用 JDBC 和 Python 连接到 Oracle 数据库
- flutter - 如何在 Flutter 中实现这个小部件
- ember.js - Emberjs:断言失败:尝试注入未知注入:'service:inViewport'
- spring-boot - Springboot Quartz:构建两个调度器(本地和集群)
- c# - ASP.net MVC 站点从 Sharepoint 获取超时