5

現在、Meteor、ReactJS、React Router (ルーティング用) を使用してアプリケーションを開発しています。ユーザーが圧縮された Web サイトをアップロードできる必要があり、Meteor アプリケーションがこの Web サイトをそのページの一部として表示する必要があるという要件があります。

一般的な zip ファイルには、以下のようなパターンが含まれます。

ZippedFolder
    |-- css
    |    |-- bootstrap.css
    |    |-- bootstrap.min.css 
    |    +-- style.css
    |-- js
    |    |-- bootstrap.js
    |    |-- bootstrap.min.js
    |    +-- script.js 
    +- index.html

CollectionFS をセットアップして zip ファイルをファイル システムに保存し、meteorhacks:npm といくつかの npm パッケージを使用して、そのファイルを既知の場所に解凍できます。

HTMLContent = new FS.Collection("html_content", {
  stores: [new FS.Store.FileSystem("html_content"]
});

HTMLContent.on('stored', Meteor.bindEnvironment(function (fileObj) {
  let unzip = Meteor.npmRequire('unzip'),
    fs = Meteor.npmRequire('fs'),
    path = fs.realpathSync(process.cwd() +  '/../../../cfs/files/html_content/'),
    file = fs.realpathSync(path + '/' + fileObj.copies.html_content.key),
    output = path + '/' + fileObj._id;

    // TODO: Not the best ways to pick the paths. For demo only.

  if (!fs.existsSync(output)) {
    fs.mkdirSync(output);
  }
  fs.createReadStream(file).pipe(unzip.Extract({
    path: output
  }));
})); 

React コンポーネントでは、次のコード スニペットを使用して、圧縮された HTML コンテンツをアップロードしています。

handleZIPUpload(event) {
  FS.Utility.eachFile(event, function(file) {
    HTMLContent.insert(file, function(err, fileObj) {
      if (err) {
        console.log(err);
      } else {
        console.log(fileObj);
      }
    });
  });
},

render(){
  return (
    <input id="html_content" type="file" onChange={this.handleZIPUpload}/>
  )
}

アップロードと解凍が機能します。ただし、CollectionFS は、解凍されたパスから HTML またはその他のコンテンツを提供しません。

 http://meteorhost/cfs/files/html_content/file_id/index.html

また、html コンテンツを meteor フォルダー構造の public フォルダーに解凍してみました。ただし、Meteor のドキュメントには、public フォルダーは静的アセット用であると記載されています。public フォルダー内のアセットのインデックスを維持するため。そのため、インデックスを更新するにはサーバーを再起動する必要があります。

そのまま提供できる HTML コンテンツを配置できる他の場所はありますか?

更新nginx 仮想ディレクトリを設定し、その場所にファイルをアップロードして、nginx が HTML コンテンツを提供するようにすることで、この問題を整理しました。

4

0 に答える 0