Angular-Filemanagerによるファイル管理
Raspberry PiやOrange Piなどのディスプレイを接続しないコンピュータボード内の一部設定ファイルを、他端末のウェブブラウザで一元管理するため、AngularJSによるファイルマネージャーAngular-Filemanagerをインストールします。予め指定した管理ディレクトリ内で、ファイルのアップロード・ダウンロード・編集操作などがブラウザ経由で実行でき、ユーザによるアプリ機能の修正・アップグレード・カスタマイズを容易にします。
Angular-Filemanager
https://github.com/joni2back/angular-filemanager
前回のブログで紹介したウェブサーバ lighttppd と php-cgi(php7.0-cgi) は既にインストールされているものとします。
１．Angular-Filemanagerのダウンロード・インストール
SSH接続でRaspberry Pi またはOrange Piにアクセスします。ウェブサーバディレクトリへ移動し Angular-Filemanager をダウンロードします。
$ cd /var/www/html
$ git clone https://github.com/joni2back/angular-filemanager.git
2.各種ファイルの設定・編集
$ cd angular-filemanager
index.html を以下の様に編集します。 bridges/php-local の設定が反映されるようにします。
<script type="text/javascript">
//example to override angular-filemanager default config
angular.module('FileManagerApp').config(['fileManagerConfigProvider', function (config) {
var defaults = config.$get();
config.set({
appName: 'angular-filemanager',
pickCallback: function(item) {
var msg = 'Picked %s "%s" for external use'
.replace('%s', item.type)
.replace('%s', item.fullPath());
window.alert(msg);
},
listUrl: 'bridges/php-local/index.php',
uploadUrl: 'bridges/php-local/index.php',
renameUrl: 'bridges/php-local/index.php',
copyUrl: 'bridges/php-local/index.php',
moveUrl: 'bridges/php-local/index.php',
removeUrl: 'bridges/php-local/index.php',
editUrl: 'bridges/php-local/index.php',
getContentUrl: 'bridges/php-local/index.php',
createFolderUrl: 'bridges/php-local/index.php',
downloadFileUrl: 'bridges/php-local/index.php',
downloadMultipleUrl: 'bridges/php-local/index.php',
compressUrl: 'bridges/php-local/index.php',
extractUrl: 'bridges/php-local/index.php',
permissionsUrl: 'bridges/php-local/index.php',
allowedActions: angular.extend(defaults.allowedActions, {
upload: true,
rename: true,
move: true,
copy: true,
edit: true,
changePermissions: false,
compress: true,
compressChooseName: true,
extract: true,
download: true,
downloadMultiple: true,
preview: true,
remove: true,
createFolder: true,
pickFiles: false,
pickFolders: false
}),
isEditableFilePattern: /\.(m3u|txt|cnf|cfg|conf|ini|xml|sh)$/i,
isImageFilePattern: /\.(jpe?g|gif|bmp|png|svg|tiff?)$/i,
isExtractableFilePattern: /\.(gz|tar|rar|g?zip)$/i
});
}]);
</script>
</head>
<body class="ng-cloak">
<angular-filemanager></angular-filemanager>
</body>
bridges/php-local/index.php 内で管理フォルダを指定します。指定するフォルダは任意です。
下記は angular-filemanager 内に files フォルダを作成した場合です。
/**
* Takes two arguments
* - base path without last slash (default: '$currentDirectory/../files')
* - language (default: 'en'); mute_errors (default: true, will call ini_set('display_errors', 0))
*/
$fileManagerApi = new FileManagerApi(__DIR__ . '/../../files');
bridges/php-local/LocalBridge/FileManagerApi.php を一部編集します。
ファイルのアップロード時にファイル名を変更する機能を無効とします。
private function uploadAction($path, $files)
{
$path = $this->canonicalizePath($this->basePath . $path);
foreach ($_FILES as $file) {
$uploaded = move_uploaded_file(
$file['tmp_name'],
$path . DIRECTORY_SEPARATOR . $file['name']
);
if ($uploaded === false) {
return false;
}
}
return true;
}
3.lighttpdダイジェスト認証
ユーザ、レルム、パスワードの組合せからMD5によるパスワード暗号化を行います。
まず /etc/lighttpdlighthttp.conf によるダイジェスト認証モジュール関連の設定を追加します。
server.modules = (
"mod_access",
"mod_alias",
"mod_compress",
"mod_redirect",
"mod_auth", ----->ここを追加
# "mod_rewrite",
)
server.document-root = "/var/www/html"
server.upload-dirs = ( "/var/cache/lighttpd/uploads" )
server.errorlog = "/var/log/lighttpd/error.log"
server.pid-file = "/var/run/lighttpd.pid"
server.username = "www-data"
server.groupname = "www-data"
server.port = 80
index-file.names = ( "index.php", "index.html", "index.lighttpd.html" )
url.access-deny = ( "~", ".inc" )
static-file.exclude-extensions = ( ".php", ".pl", ".fcgi" )
compress.cache-dir = "/var/cache/lighttpd/compress/"
compress.filetype = ( "application/javascript", "text/css", "text/html", "text/plain" )
# default listening port for IPv6 falls back to the IPv4 port
## Use ipv6 if available
#include_shell "/usr/share/lighttpd/use-ipv6.pl " + server.port
include_shell "/usr/share/lighttpd/create-mime.assign.pl"
include_shell "/usr/share/lighttpd/include-conf-enabled.pl"
#以下追加
auth.debug = 2
auth.backend = "htdigest"
auth.backend.htdigest.userfile = "/etc/lighttpd/lighttpd.user"
# note this entry is relative to the server.document-root
auth.require = ( "/angular-filemanager" =>
(
"method" => "basic",
"realm" => "admin realm",
"require" => "user=admin"
)
)
上記ユーザ"admin"、レルム"admin realm"と認証パスワードをMD5により関連付けて暗号化します。
一連の作業を次のperlスクリプトで実行します。
$ sudo pico lighttpd_auth_perl
以下内容です。
#!/usr/bin/perl
print "User: ";
$user = <>;
chomp $user;
print "Realm: ";
$realm = <>;
chomp $realm;
use Term::ReadKey;
{
ReadMode('noecho');
print "Password: ";
$password = ReadLine(0);
chomp $password;
print "\nPassword again: ";
$password2 = ReadLine(0);
chomp $password2;
ReadMode('normal');
print "\n";
if($password ne $password2)
{
print "Passwords don't match\n";
redo;
}
}
print "$user:$realm:";
open(MD5, "|md5sum | cut -b -32") or die;
print MD5 "$user:$realm:$password";
close(MD5);
実行権を付与し、実行します。
$ sudo chmod +x lighthtpd_auth_perl
$ sudo ./lighthtpd_auth_perl
ユーザ、レルム、パスワードを入力すると暗号化された文字列が出力されます。
admin:admin realm:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
上記出力結果を /etc/lighttpd/lighttpd.user にコピーします。
lighttpdサービスを再起動してファイルマネージャにアクセス、認証画面が表示されユーザとパスワードを入力すれば初期画面が表示されます。
$ sudo service lighttpd restart
