我有一个nodejs服务器，用于提供Fractal Web应用程序。我使用gulp构建Web应用程序。以下是gulpfile：
gulpfile.js
'use strict';
const gulp = require('gulp');
/*
* Configure a Fractal instance.
*
* This configuration could also be done in a separate file, provided that this file
* then imported the configured fractal instance from it to work with in your Gulp tasks.
* i.e. const fractal = require('./my-fractal-config-file');
*/
const fractal = require('@frctl/fractal').create();
fractal.set('project.title', 'MyApp'); // project title
fractal.web.set('builder.dest', 'build'); // destination for the static export
fractal.web.set('static.path', `${__dirname}` + '/src/public'); // specify a directory of static assets
fractal.docs.set('path', `${__dirname}/src/docs`); // location of the documentation directory.
fractal.components.set('path', `${__dirname}/src/components`); // location of the component directory.
// any other configuration or customisation here
const logger = fractal.cli.console; // keep a reference to the fractal CLI console utility
/*
* Start the Fractal server
*
* In this example we are passing the option 'sync: true' which means that it will
* use BrowserSync to watch for changes to the filesystem and refresh the browser automatically.
* Obviously this is completely optional!
*
* This task will also log any errors to the console.
*/
gulp.task('fractal:start', function(){
const server = fractal.web.server({
sync: true
});
server.on('error', err => logger.error(err.message));
return server.start().then(() => {
logger.success(`Fractal server is now running at ${server.url}`);
});
});
/*
* Run a static export of the project web UI.
*
* This task will report on progress using the 'progress' event emitted by the
* builder instance, and log any errors to the terminal.
*
* The build destination will be the directory specified in the 'builder.dest'
* configuration option set above.
*/
gulp.task('fractal:build', function(){
const builder = fractal.web.builder();
builder.on('progress', (completed, total) => logger.update(`Exported ${completed} of ${total} items`, 'info'));
builder.on('error', err => logger.error(err.message));
return builder.build().then(() => {
logger.success('Fractal build completed!');
});
});
server.js
var connect = require('connect');
var serveStatic = require('serve-static');
connect().use(serveStatic(__dirname + '/build')).listen(8000, function() {
console.log('Server running on ' + host + ':' + port);
});
我可以在浏览器中访问它，并且它按预期运行。当我在浏览器中使用开发工具并查看源代码时，这是目录结构：
top
|
|_localhost:8000
|
|_themes/mandelbrot
| |_css
| |_fonts
| |_images
| |_js
|
|_index.html
我还有一个正在运行的Apache Web服务器，它设置为http://localhost:8000的代理，即NodeJs服务器。以下是我编写的VirtualHost指令：
<VirtualHost *:80>
ServerName styleguide.com
ProxyRequests Off
ProxyPreserveHost On
ProxyVia Full
<Proxy *>
Require all granted
</Proxy>
<Location /styleguide>
ProxyPass http://127.0.0.1:8000
ProxyPassReverse http://127.0.0.1:8080
</Location>
<Directory "C:/workarea/poc/styleguide/build">
AllowOverride None
</Directory>
</VirtualHost>
我可以通过http://locahost/styleguide访问服务器，但是网站上没有CSS。当我在浏览器中打开开发工具并查看网站的资源时，这就是我看到的：
top
|
|_localhost
|
|_themes/mandelbrot/css
|
|_styleguide
两个服务器提供的index.html页如下：
<!DOCTYPE html>
<html lang="en" dir="ltr" class="no-js">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
window.frctl = {
env: 'static'
};
</script>
<script>var cl = document.querySelector('html').classList; cl.remove('no-js'); cl.add('has-js');</script>
<link rel="shortcut icon" href="themes/mandelbrot/favicon.ico" type="image/ico">
<link rel="stylesheet" href="themes/mandelbrot/css/default.css?cachebust=1.2.0" type="text/css">
<title>MyApp | MyApp</title>
</head>
<body>
<div class="Frame" id="frame">
<div class="Frame-header">
<div class="Header">
<button class="Header-button Header-navToggle" data-action="toggle-sidebar">
<svg class="Header-navToggleIcon Header-navToggleIcon--open" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M19 6.4L17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z"/>
</svg>
<svg class="Header-navToggleIcon Header-navToggleIcon--closed" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
</svg>
</button>
<a href="" class="Header-title" data-pjax>MyApp</a>
</div>
</div>
<div class="Frame-body" data-role="body">
<div class="Frame-panel Frame-panel--main" data-role="main">
<div class="Frame-inner" id="pjax-container">
<div class="Document">
<div class="Document-header">
<h1 class="Document-title">MyApp</h1>
</div>
<div class="Document-content">
<div class="Prose">
<p>This is the component library for MyApp. <strong> Feel free to look around</strong></p>
</div>
</div>
</div>
</div>
</div>
<div class="Frame-handle" data-role="frame-resize-handle"></div>
<div class="Frame-panel Frame-panel--sidebar" data-role="sidebar">
<nav class="Navigation">
<div class="Navigation-group">
<div class="Tree" data-behaviour="tree" id="tree-components">
<h3 class="Tree-title">components</h3>
<ul class="Tree-items Tree-depth-1">
<li class="Tree-item Tree-entity" data-role="item">
<a class="Tree-entityLink" href="components/detail/alert.html" data-pjax>
<span>Alert</span>
<div class="Status Status--unlabelled">
<div class="Status-dots">
<span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="Navigation-group">
<div class="Tree" data-behaviour="tree" id="tree-docs">
<h3 class="Tree-title">documentation</h3>
<ul class="Tree-items Tree-depth-1">
<li class="Tree-item Tree-entity is-current" data-state="current" data-role="item">
<a class="Tree-entityLink" href="" data-pjax>
<span>Overview</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
<script src="themes/mandelbrot/js/mandelbrot.js?cachebust=1.2.0"></script>
</body>
</html>