Прокси-сервер Apache 2.4 не обслуживает CSS-файлы с сервера nodejs - PullRequest
Новая
       46

Прокси-сервер Apache 2.4 не обслуживает CSS-файлы с сервера nodejs

0 голосов
/ 04 сентября 2018

У меня есть сервер nodejs, который обслуживает веб-приложение Fractal. Я строю веб-приложение, используя gulp. Ниже приведен гулфайл:

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);
});

Я могу получить доступ к этому в браузере, и он работает как положено. Когда я использую инструменты dev в браузере и просматриваю источники, это структура каталогов: 

top
 |
 |_localhost:8000
       |
       |_themes/mandelbrot
       |       |_css
       |       |_fonts
       |       |_images
       |       |_js
       |       
       |_index.html

У меня также есть веб-сервер Apache, настроенный для работы в качестве прокси для 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>
...