使用 nginx 和流星上传和访问服务器上的图像

Posted 2023-02-16

【中文标题】使用 nginx 和流星上传和访问服务器上的图像

【英文标题】：Upload and access to images on server with nginx and meteor

【发布时间】：2017-06-18 18:43:06

【问题描述】：

我有一个使用 nginx 部署的 Meteor 应用程序。 我尝试从应用程序上传图像以将图像保存在服务器上。当我在 localhost 中时，我将图像保存在 myapp/public/uploads 文件夹中。但是，当我部署时，这个文件夹变成了myapp/bundle/programs/web.browser/app/uploads。因此，当我上传图片时，它会保存在 myapp/public/uploads 的新文件夹中。但是，我无法访问它。当我在本地主机中时，我可以像这样访问我的图像：localhost:3000/uploads/myImage.png 但是当我这样做时myAdress/uploads/myImage.png 我访问的是myapp/bundle/programs/web.browser/app/uploads 文件夹，而不是保存图像的文件夹（myapp/public/uploads）。

这是我保存图片的代码：

Meteor.startup(function () 
  UploadServer.init(
    tmpDir: process.env.PWD + '/app/uploads',
    uploadDir: process.env.PWD + '/app/uploads',
    checkCreateDirectories: true,
    uploadUrl: '/upload',
    // *** For renaming files on server
    getFileName: function(file, formData) 
      //CurrentUserId is a variable passed from publications.js
      var name = file.name;
      name = name.replace(/\s/g, '');
      return currentTileId + "_"  + name;
    ,
    finished: function(fileInfo, formFields) 
      var name = fileInfo.name;
      name = name.replace(/\s/g, '');
      insertionImages(name, currentTileId, docId);
    ,
  );
);

那么，您知道在部署应用程序时如何保存和访问我的图像吗？也许将图像保存在myapp/bundle/programs/web.browser/app/uploads 文件夹中，或者使用 url 访问 myapp/public/uploads 文件夹。

【问题讨论】：

出于这个和其他原因，我的团队很快切换到 Cloudinary 来上传用户图像。使用提供商而不是您自己的服务器有很多优势，而且 Cloudinary（尽管有时是 PITA）确实提供了非常方便的服务。我们使用 Meteor 包来帮助管理图像操作：github.com/Lepozepo/cloudinary

感谢您的评论，但我更喜欢保留自己的服务器。

明白。我很想知道解决方案。

【参考方案1】：

这就是我们所做的。

使用外部目录进行上传，例如 /var/uploads。将上传内容保存在 public 文件夹中会使流星应用程序在任何文件上传时在开发环境中重新加载。

现在，在本地，使用 Meteor 在某个 url 提供这些文件。在生产中，使用 nginx 在相同的 url 提供相同的服务。

开发

1) 将您的上传目录符号链接到公开的隐藏文件夹。

例如：

ln -s /var/uploads /path/to/public/.#static

2) 服务公共隐藏文件夹通过 Meteor 使用：

网址/static 将通过在服务器上使用以下代码为文件夹public/.#static 提供服务。参考：How to prevent Meteor from watching files?

var fs = require('fs'), mime = require('mime');

WebApp.rawConnectHandlers.use(function(req, res, next) 

    var data, filePath, re, type;
    re = /^\/static\/(.*)$/.exec(req.url);
    if (re !== null) 
        filePath = process.env.PWD + '/public/.#static/' + re[1];
        try 
            stats = fs.lstatSync(filePath);
            if (stats.isFile()) 
                type = mime.lookup(filePath);
                data = fs.readFileSync(filePath, data);
                res.writeHead(200, 
                    'Content-Type': type
                );
                res.write(data);
                res.end();
            
        
        catch (e) 
            // console.error(filePath, "not found", e); // eslint-disable-line no-console
            next();
        
    
    else 
        next();
    
);

用于生产

1) 使用 nginx 提供上传目录

server 
   ...
   location /static/ 
      root /var/uploads;
   
   ...

就是这样。 /static 将提供您上传目录的内容，即/var/uploads