Configure Flmngr file manager to use Azure Blob storage

Azure Blob like Amazon S3 is a type of network storage that can be used for storing images and other media for your websites and apps.

You can configure Flmngr to work with Azure Blob container absolutely transparently for your file manager users.

First, install Flmngr backend and then pass the steps from this manual to link your file manager with Azure Blob service.

Mounting network file systems with Flmngr file manager

Flmngr is filesystem-agnostic, this means it will work with any file system you give to it. So you can mount any storage to some folder and will see files from there in the file manager window.

So you need to:

  • Mount Azure Blob container to local directory
  • Specify a mounted directory to Flmngr backend (to access files by content administrators)
  • Specify URL prefix for the client (to generate public URLs)

In this article we describe the steps to do for PHP & Unix environment as for the most popular case. Even if these platforms are not in your tech stack, you still can use them as a microservice on a dedicated server or VPS. Alternatively you can do the same steps in Windows, but their possible pitfalls are outside of this article.

How to mount Azure Blob container

Azure Blob container is a representation of some network disk. All your files and folders are stored inside it.

There is API providing read/write access to it and the FUSE (filesystem in userspace) driver can use it to mount a container as local directory.

First install FUSE Azure Blob driver for working with Blob. As the result you will have blobfuse utility in your OS.

Create a directory for your files

Now let's create a directory to where blobfuse will mount your Blob container. Please set correct permissions to this folder.

Create a configuration file

Azure Blob driver reads access credentials from a file you specify to it.

Create some fuse-blob.passwd file and fill it with format:

accountName ACCOUNT_NAME
accountKey ACCOUNT_KEY
containerName CONTAINER_NAME

Then set 600 permissions and a correct owner for it:

chmod 600 fuse-blob.passwd

Create a permanent mount point for Azure Blob using fstab

In order to let your OS mount your container on startup, please edit/etc/fstab file with the list of mount points you have.

For example:

blobfuse /var/www/files fuse defaults,_netdev,--tmp-path=/root/cache,--config-file=/etc/fuse-blob.passwd,nonempty,allow_other 0 0

Options explanation:

  • blobfuse - the name of your mount point. You can use it to pass as argument to `mount` and `umount` tools.

  • /var/www/files - the directory where to mount the bucket to. Be sure this directory exists, is empty.

  • allow_other - your web server (Nginx/Apache/etc.) which serves Flmngr backend runs form non-root user (i. e. in Ubuntu this is `www-data` user), so you need to allow access to this folder to it by setting this function.

  • nonempty - a flag to mount the bucket into a directory even this directory is not empty. Very useful especially if you use GIT in your workflow to push files to the server and unable to commit empty directory there without placing some .keep empty file inside (GIT does not track empty directories).

  • --config-file=/etc/fuse-blob.passwd - location of the file with access credentials you created in the previous step. Place fuse-blob.passwd file inside /etc/ to let s3fs to find it. Do not forget to set correct permissions (600) for it.

Now you can mount it by the command:

sudo mount blobfuse

or reboot the system (OS will mount it automatically on every startup).

Does not work? See troubleshooting chapter.

Configure Flmngr

To link your both Flmngr client and the backend to configured Azure Blob container, set configuration variables for both these sides of Flmngr:

Client side configuration: prefix for URLs
Files URL (Flmngr.urlFiles parameter)
https://flmngrteststorage.blob.core.windows.net/flmngr-test-container/
/var/www/files/
Server side configuration: location of mounted S3 bucket
config['dirFiles'] parameter in backend config
+ /path/to/image.png

Read the details of this scheme below.

Configure the backend of Flmngr

When you run PHP backend of Flmngr you pass dirFiles parameter there to specify a path where files inside Blob container are located.

In this example we set it to /var/www/files as far we mounted Azure Blob container to there.

dirTmp and dirCache can be set to any private directories on your server, they used by Flmngr only internally.

We advice you to use absolute paths always to avoid path issues.

Configure Flmngr UI

When one of your colleagues or any other Flmngr user opens the dialog, Flmngr calls the backend to browse files. Backend acts as a proxy for accessing Azure Blob hiding all access keys and allowing only required set of operations.

But when you insert some file into content for performance reasons you must use direct access for Azure Blob (probably that's why you use it).

Specify files URL property in Flmngr.urlFiles parameter to:

https://flmngrteststorage.blob.core.windows.net/flmngr-test-container/

Substitute into this sample URL your values:

flmngrteststorage - a name of your Azure Blob storage flmngr-test-container - a name of your Azure Blob container

This value will be used as a prefix for the path returned by Flmngr backend.

For example, if you mounted a bucket into /var/www/files and uploaded a file into /var/www/files/cars/auto.png, file manager backend will return cars/auto.png as file path. Flmngr client will create the URL https://flmngrteststorage.blob.core.windows.net/flmngr-test-container/cars/auto.png for using on public pages. This URL is handled by Azure Blob directly (Flmgnr backend bypassed here).

Troubleshooting and lifehacks

Unable to mount Azure Blob container or problems accessing a mounted bucket

Try mounting it manually using this command:

blobfuse /var/www/files --tmp-path=~/tmp --config-file=./fuse-blob.passwd -o attr_timeout=240 -o entry_timeout=240 -o negative_timeout=120 -o nonempty --log-level=LOG_DEBUG -f -o allow_other

The parameters from this command are equivalent to the parameters described a bit above for /etc/fstab mount point configuration.

You will see logs in console output while mounting and accessing the bucket. Ctrl+C will stop this app and unmount mounted bucket.

Note: running this command with -o allow_other from non-root user is possible only when you uncomment the line user_allow_other in /etc/fuse.conf.

Do not want to have a permanent mountpoint in /etc/fstab or do not have access to it

You can create a mount script for your S3 bucket by the command from the question above, just remove --log-level=LOG_DEBUG part from it to run the process in background.

You can unmount this bucket later by passing the target directory to umount:

umount /var/www/files

I can use Azure Blob container from Flmngr, but files are not accessible from the web by website visitors

Probably your container is not set as public. Please go to your containers, select the container you want to reconfigure, press "Change access level" and set it to "Blob (anonymous read access for blobs only)" and press OK.

Azure Blob public access

Flmngr file manager shows empty storage

Probably you created a directory for mounting a bucket but did not mount it. Or your bucket is really empty (check do you use the correct bucket if have a number of them).

All works fine except ImgPen image editor: it shows a blank image

Looks like you did not configure CORS for the container correctly. Probably you also have a related message in your browser console.

Just go into "Resource sharing (CORS)" section in your Azure dashboard and add a pattern for the domain you run the image editor from to the "Allowed origins" field, then save it. If you specify "*" there, all domains will be allowed not only to download images but also to dynamically use them on a canvas of image editor.

CORS configuration