# Angular-Filemanagerによるファイル管理 **URL:** \ **Category:** Orange Pi\ **Created:** [2017 年 5 月 29 日午前 8:48 UTC](https://forum.ficusonline.com/t/angular-filemanager/108 "2017-05-29T08:48:15Z")\ **Posts on this page:** 3\ **Page:** 1

**Author:** ![tk-fuse](https://forum.ficusonline.com/user_avatar/forum.ficusonline.com/tk-fuse/32/255_2.png) [@tk-fuse](https://forum.ficusonline.com/u/tk-fuse)\ **Post date:** [2017 年 5 月 29 日午前 8:48 UTC](https://forum.ficusonline.com/t/angular-filemanager/108/1 "2017-05-29T08:48:16Z")

ブログ記事の転載です。インストール後の不具合・改善点などフォローします。 Raspberry PiやOrange Piなどのディスプレイを接続しないコンピュータボード内の一部設定ファイルを、他端末のウェブブラウザで一元管理するため、AngularJSによるファイルマネージャーAngular-Filemanagerをインストールします。予め指定された管理ディレクトリ内で、ファイルのアップロード・ダウンロード・編集操作などがブラウザ経由で実行でき、ユーザによるアプリ機能の修正・アップグレード・カスタマイズを容易にします。 **Angular-Filemanager** > **[GitHub - joni2back/angular-filemanager: JavaScript File Manager Material Design Folder...](https://github.com/joni2back/angular-filemanager)** > > JavaScript File Manager Material Design Folder Explorer Navigator Browser Manager in AngularJS with CSS3 Responsive (with FTP in PHP / Java / Node) ![](https://forum.ficusonline.com/uploads/default/original/1X/f7d6008ea9edd60d026843bc4e0926f7bddf2ff4.png) 前回のブログで紹介したウェブサーバ **lighttppd** と **php-cgi(php7.0-cgi)** は既にインストールされているものとします。 **１．Angular-Filemanagerのダウンロード・インストール** SSH接続でRaspberry Pi またはOrange Piにアクセスします。ウェブサーバディレクトリへ移動し **Angular-Filemanager** をダウンロードします。 > $ cd /var/www/html > $ git clone [GitHub - joni2back/angular-filemanager: JavaScript File Manager Material Design Folder Explorer Navigator Browser Manager in AngularJS with CSS3 Responsive (with FTP in PHP / Java / Node)](https://github.com/joni2back/angular-filemanager.git) **2.各種ファイルの設定・編集** > $ cd angular-filemanager **index.html** を以下の様に編集します。 **bridges/php-local** の設定が反映されるようにします。 ``` ``` **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; } ``` ---

**Author:** ![tk-fuse](https://forum.ficusonline.com/user_avatar/forum.ficusonline.com/tk-fuse/32/255_2.png) [@tk-fuse](https://forum.ficusonline.com/u/tk-fuse)\ **Post date:** [2017 年 5 月 29 日午後 12:02 UTC](https://forum.ficusonline.com/t/angular-filemanager/108/2 "2017-05-29T12:02:40Z")

**3.lighttpdダイジェスト認証** [https://redmine.lighttpd.net/projects/1/wiki/HowToBasicAuth](https://redmine.lighttpd.net/projects/1/wiki/HowToBasicAuth) ユーザ、レルム、パスワードの組合せから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** にコピーします。 lifgttpdサービスを再起動してファイルマネージャにアクセス、認証画面が表示されユーザとパスワードを入力すれば初期画面が表示されます。 > $ sudo service lighttpd restart ---

**Author:** ![tk-fuse](https://forum.ficusonline.com/user_avatar/forum.ficusonline.com/tk-fuse/32/255_2.png) [@tk-fuse](https://forum.ficusonline.com/u/tk-fuse)\ **Post date:** [2019 年 2 月 3 日午前 3:59 UTC](https://forum.ficusonline.com/t/angular-filemanager/108/3 "2019-02-03T03:59:01Z")

**現時点での最新バージョンへの対応** **index.html** 内でraw source codeを有効にするため以下の箇所をアンコメント、コメント化します。 > **変更後** > \