現在、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 コンテンツを提供するようにすることで、この問題を整理しました。