Homestead nginx 提供来自通过 gulpfile 和 vinyl-fs 生成的符号链接的内容
Homestead nginx serve content from symlink generated via gulpfile and vinyl-fs
对于我的 symfony 项目,我使用以下方式管理我的前端资产 gulpfile.js
:
var gulp = require('gulp');
var rename = require('gulp-rename');
var vfs = require('vinyl-fs');
/**
* Location where to store the 3rd party libraries
*/
var frontend_folder="./frontend"
var vendor_folder=`${frontend_folder}/vendor`
var frontent_dev_folder_js=`${frontend_folder}/js`
var frontent_dev_folder_js=`${frontend_folder}/css`
/*################################### Installing Dependencies ###############################*/
//Move Bootstrap
gulp.task('move_bootstrap',function(done){
var bootstrap_dir='./node_modules/bootstrap/dist';
var dest=`${vendor_folder}/bootstrap`;
var css_files=[`${bootstrap_dir}/css/bootstrap.min.css`,`${bootstrap_dir}/css/bootstrap.min.css.map`];
var js_files=[`${bootstrap_dir}/js/bootstrap.bundle.min.js`,`${bootstrap_dir}/js/bootstrap.bundle.min.js.map`];
gulp.src(css_files).pipe(gulp.dest(`${dest}/css`));
gulp.src(js_files).pipe(gulp.dest(`${dest}/js`));
done();
})
//Jquery & miscellanous Javascript move
gulp.task('move_jquery',function(done){
var jqueryFiles=['./node_modules/jquery/dist/jquery.min.js'];
gulp.src(jqueryFiles).pipe(gulp.dest(vendor_folder));
done();
});
//For fontawesome
gulp.task('move_fontawesome',function(done){
var path='./node_modules/font-awesome';
var dest=vendor_folder+'/font-awesome';
gulp.src(path+'/fonts/*').pipe(gulp.dest(dest+'/fonts'));
gulp.src(path+'/css/font-awesome.min.css').pipe(gulp.dest(dest+'/css'));
done();
});
/******* Build Final Steps ****************************************************/
gulp.task('link_assets',function(done){
vfs.src(frontend_folder+'/*', {followSymlinks: false})
.pipe(vfs.symlink('./web/assets/'));
return done();
});
/* ############################################ Installing Dependencies ##################################### */
gulp.task('move_frontend', gulp.series(['move_bootstrap','move_jquery','move_fontawesome'],(done)=>{done()}));
gulp.task('dev',gulp.series(['move_frontend','link_assets'],(done)=>{done();}));
gulp.task('default',gulp.series(['dev'],(done)=>{done()}));
有一个任务可以为文件夹中存在的任何内容生成符号链接,该文件夹位于我的 项目根目录 中名为 frontend
的文件夹中 ./web/assets
。换句话说我的项目根目录是:
-
-- frontend
...
-- web
---assets
---- ^any folder located in frontedn symlinked here^
此外,我在 config.yml
中放置了以下资产配置:
framework:
...
assets:
packages:
vendor:
base_path: '/assets/vendor'
现在我尝试让我的 nginx 提供符号链接内容(用于开发目的)我尝试放置以下设置(基于 nginx documentation):
location ~ \/web\/assets {
disable_symlinks off;
root /home/vagrant/code/web/assets;
}
但是当我访问资产时,例如 http://192.168.10.10/assets/vendor/bootstrap/css/bootstrap.min.css 我得到错误 404。为了开发,我使用 homestead vagrant 图像和我 运行 在 vagrant 之外的 gulp 任务。
For development I use the the homestead vagrant image and i run the gulp tasks outside the vagrant.
就是这个问题!
vagrant 的符号链接 outside 正在使用完整路径进行映射,换句话说,您的符号链接指向一个不存在的文件夹,因此当遵循符号链接时,nginx 会访问一个不存在的文件,并且预期不提供任何内容。
所以我建议通过 ssh 访问 运行 vm:
vagrant ssh
然后转到文件夹 ~/code
cd ~/code
删除符号链接
rm -rf ./web/assets/*
并重新运行 gulp 个任务
gulp
这将解决您可能遇到的任何问题。
对于我的 symfony 项目,我使用以下方式管理我的前端资产 gulpfile.js
:
var gulp = require('gulp');
var rename = require('gulp-rename');
var vfs = require('vinyl-fs');
/**
* Location where to store the 3rd party libraries
*/
var frontend_folder="./frontend"
var vendor_folder=`${frontend_folder}/vendor`
var frontent_dev_folder_js=`${frontend_folder}/js`
var frontent_dev_folder_js=`${frontend_folder}/css`
/*################################### Installing Dependencies ###############################*/
//Move Bootstrap
gulp.task('move_bootstrap',function(done){
var bootstrap_dir='./node_modules/bootstrap/dist';
var dest=`${vendor_folder}/bootstrap`;
var css_files=[`${bootstrap_dir}/css/bootstrap.min.css`,`${bootstrap_dir}/css/bootstrap.min.css.map`];
var js_files=[`${bootstrap_dir}/js/bootstrap.bundle.min.js`,`${bootstrap_dir}/js/bootstrap.bundle.min.js.map`];
gulp.src(css_files).pipe(gulp.dest(`${dest}/css`));
gulp.src(js_files).pipe(gulp.dest(`${dest}/js`));
done();
})
//Jquery & miscellanous Javascript move
gulp.task('move_jquery',function(done){
var jqueryFiles=['./node_modules/jquery/dist/jquery.min.js'];
gulp.src(jqueryFiles).pipe(gulp.dest(vendor_folder));
done();
});
//For fontawesome
gulp.task('move_fontawesome',function(done){
var path='./node_modules/font-awesome';
var dest=vendor_folder+'/font-awesome';
gulp.src(path+'/fonts/*').pipe(gulp.dest(dest+'/fonts'));
gulp.src(path+'/css/font-awesome.min.css').pipe(gulp.dest(dest+'/css'));
done();
});
/******* Build Final Steps ****************************************************/
gulp.task('link_assets',function(done){
vfs.src(frontend_folder+'/*', {followSymlinks: false})
.pipe(vfs.symlink('./web/assets/'));
return done();
});
/* ############################################ Installing Dependencies ##################################### */
gulp.task('move_frontend', gulp.series(['move_bootstrap','move_jquery','move_fontawesome'],(done)=>{done()}));
gulp.task('dev',gulp.series(['move_frontend','link_assets'],(done)=>{done();}));
gulp.task('default',gulp.series(['dev'],(done)=>{done()}));
有一个任务可以为文件夹中存在的任何内容生成符号链接,该文件夹位于我的 项目根目录 中名为 frontend
的文件夹中 ./web/assets
。换句话说我的项目根目录是:
-
-- frontend
...
-- web
---assets
---- ^any folder located in frontedn symlinked here^
此外,我在 config.yml
中放置了以下资产配置:
framework:
...
assets:
packages:
vendor:
base_path: '/assets/vendor'
现在我尝试让我的 nginx 提供符号链接内容(用于开发目的)我尝试放置以下设置(基于 nginx documentation):
location ~ \/web\/assets {
disable_symlinks off;
root /home/vagrant/code/web/assets;
}
但是当我访问资产时,例如 http://192.168.10.10/assets/vendor/bootstrap/css/bootstrap.min.css 我得到错误 404。为了开发,我使用 homestead vagrant 图像和我 运行 在 vagrant 之外的 gulp 任务。
For development I use the the homestead vagrant image and i run the gulp tasks outside the vagrant.
就是这个问题! vagrant 的符号链接 outside 正在使用完整路径进行映射,换句话说,您的符号链接指向一个不存在的文件夹,因此当遵循符号链接时,nginx 会访问一个不存在的文件,并且预期不提供任何内容。
所以我建议通过 ssh 访问 运行 vm:
vagrant ssh
然后转到文件夹 ~/code
cd ~/code
删除符号链接
rm -rf ./web/assets/*
并重新运行 gulp 个任务
gulp
这将解决您可能遇到的任何问题。