Warum erstellt Ember-CLI mit falschem Host?

Question

Ich bin gerade dabei, eine meiner Ember-Anwendungen auf einem Server mit Ubuntu LTS + Apache/Nginx-Konfiguration bereitzustellen.

Es scheint jedoch, dass der Build-Prozess etwas falsch macht, vielleicht aufgrund fehlender Informationen von meiner Seite.

Meine Konfiguration sieht wie folgt aus:

// config/environment.js 
/* jshint node: true */ 

module.exports = function (environment) { 
    var ENV = { 
    modulePrefix: 'app-name', 
    environment: environment, 
    baseURL: '/', 
    locationType: 'auto', 
    bingMapsApiKey: null, 
    EmberENV: { 
     FEATURES: { 
     // Here you can enable experimental features on an ember canary build 
     // e.g. 'with-controller': true 
     } 
    }, 
    contentSecurityPolicy: { 
     'default-src': "'none'", 
     'script-src': "'self' 'unsafe-inline' 'unsafe-eval'", 
     'font-src': "'self'", 
     'connect-src': "'self'", 
     'img-src': "'self'", 
     'report-uri': "'localhost'", 
     'style-src': "'self' 'unsafe-inline'", 
     'frame-src': "'none'" 
    }, 
    APP: { 
     // Here you can pass flags/options to your application instance 
     // when it is created 
    } 
    }; 

    if (environment === 'development') { 
    //ENV.APP.LOG_RESOLVER = true; 
    //ENV.APP.LOG_ACTIVE_GENERATION = true; 
    //ENV.APP.LOG_TRANSITIONS = true; 
    //ENV.APP.LOG_TRANSITIONS_INTERNAL = true; 
    //ENV.APP.LOG_VIEW_LOOKUPS = true; 
    ENV.bingMapsApiKey = process.env.BING_MAPS_API_KEY; 
    } 

    if (environment === 'test') { 
    // Testem prefers this... 
    ENV.baseURL = '/'; 
    ENV.locationType = 'none'; 

    // keep test console output quieter 
    ENV.APP.LOG_ACTIVE_GENERATION = false; 
    ENV.APP.LOG_VIEW_LOOKUPS = false; 

    ENV.APP.rootElement = '#ember-testing'; 
    } 

    if (environment === 'production') { 
    ENV.bingMapsApiKey = process.env.BING_MAPS_API_KEY; 
    } 

    return ENV; 
}; 

// ember-cli-build.js 
/*jshint node:true*/ 
/* global require, module */ 
var EmberApp = require('ember-cli/lib/broccoli/ember-app') 
var Funnel = require('broccoli-funnel') 

module.exports = function(defaults) { 
    var app = new EmberApp(defaults, { 
    // Add options here 
    }); 

    var CesiumAsset = new Funnel('vendor/cesium/') 

    app.import('vendor/cesium/Cesium/Cesium.js') 
    app.import('vendor/cesium/Cesium/Widgets/widgets.css') 

    // Use `app.import` to add additional libraries to the generated 
    // output files. 
    // 
    // If you need to use different assets in different 
    // environments, specify an object as the first parameter. That 
    // object's keys should be the environment name and the values 
    // should be the asset to use in that environment. 
    // 
    // If the library that you are including contains AMD or ES6 
    // modules that you would like to import into your application 
    // please specify an object with the list of modules as keys 
    // along with the exports of each module as its value. 
    return app.toTree(CesiumAsset) 
}; 

Es scheint, dass die App auf localhost verbunden: 4200, da ich Fehler wie die Folgenden erhalten:

Mixed Content: The page at 'https://social-journey.com/' was loaded over HTTPS, but requested an insecure image 'http://localhost:4200/Cesium/Widgets/Images/ImageryProviders/bingAerial.png'. This content should also be served over HTTPS. 

Image from origin 'http://localhost:4200' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://social-journey.com' is therefore not allowed access. 

Sieht jemand eine fehlende Aufbau?

Vielen Dank im Voraus.

Answer 1

Ich habe endlich herausgefunden, dass es kein Glutproblem ist.

Die Drittanbieter-Komponente cesium.js, die ich in mein Ember-Projekt integriert habe, benötigt eine Basis-URL.

Diese Basis-URL wurde statisch in der index.html gesetzt:

// app/index.html 
<script type="text/javascript"> 
    var CESIUM_BASE_URL = "http://localhost:4200/Cesium"; 
</script> 

Allerdings habe ich diese npm module gefunden, die das Laden von Variablen aus der environments.js Konfigurationsdatei ermöglicht.

So endlich sieht meine Lösung wie folgt aus:

// app/index.html 
<script> 
    var CESIUM_BASE_URL = '{{content-for 'config.CESIUM_BASE_URL'}}'; 
</script> 

// config/environment.js 
    ... 
    if (environment === 'development') { 
    ENV.CESIUM_BASE_URL = "http://localhost:4200/Cesium"; 
    } 


    if (environment === 'production') { 
    ENV.CESIUM_BASE_URL = "https://domain/Cesium"; 
    } 
    ...