Question

我是一个后端开发人员正致力于一个包含余烬前端的项目。我们的项目不同寻常，因为我们没有生产权;我们编写代码并交付给客户。客户端只是习惯/愿意使用Microsoft Web堆栈，因此我们构建了ember项目，将生成的内容包装到一个简单的Visual Studio项目中，并将其交给部署。

不幸的是，这位客户让我们处于一个在灰烬世界中显然不寻常的位置：

客户不愿意安装或执行任何ember-cli工具或命令
客户端为测试和生产网站使用不同的目录结构（即“http://staging.example.com/project”与“http://project.example.com/”）
为了满足上述要求，我们一直在为两种不同的环境提供单独的构建。 但从长远来看，这也被认为是不可接受的。

显然，这是一个没有人会以完美的远见选择的情况。大多数这些限制都没有明确，直到为时已晚，但实际上客户不会改变它们。我正在寻找一个看起来像这样的技术解决方案：

我们在ember中发展
我们使用ember-cli工具（或等效工具）来构建前端
我们将结果打包到一个visual studio项目中，其中可能包含客户端测试环境的web.config
压缩并发送给客户
根据web.config中的设置，我们的ember项目将自身配置为：
- 将baseURL设置为适当的值
- 连接到位于特定于环境的URL的REST API

为了解决这个问题，我一直在审查以下内容：

不幸的是，我个人并不熟悉余烬。所以我不明白baseURL是如何真正使用的，以及为什么在部署或运行时参数化ember似乎很尴尬。我在哪里可以学习如何将我们的工作混合到可接受的部署过程中？

是否可以通过将META标记放入加载网站的index.html来将baseURL或ourBackendApiURL的值发送给ember？

Answer 1

然后，当有人解释说未通信的要求确实是阻碍性的并且需要额外的工时时，他们当然明白你需要收费吗？ ;）

您可以尝试添加此内容：

<base href="project">

它应该被自动拾取。否则，在app.js中，您可以覆盖baseURL和rootURL属性：

var Router = Ember.Router.extend({
  location: 'history',
  rootURL: function(){
    return "/random/";
  }.property(),
  baseURL: function(){
    return "/more-random/";
  }.property()
});

Answer 2

我会考虑使用类似ember-cli-dotenv的内容，以便您可以在构建/运行时指定baseURL。他们需要做的就是在项目根目录中的BASE_URL=https://whatever-they-want.crazyclient.com文件中指定.env（从版本控制中忽略），或者在实际环境中指定BASE_URL。这允许您和他们使用您选择的服务器。

ember-cli实施：

// Brocfile.js or ember-cli-build.js:
var app = new EmberApp({
  dotEnv: {
    clientAllowedKeys: ['ROOT_URL', 'BASE_URL']
  }
});

// pre-generated config from ember-cli
module.exports = app.toTree();

然后：

// config/environment.js
module.exports = function(environment){
  return {
    ROOT_URL: process.env.ROOT_URL,
    BASE_URL: process.env.BASE_URL,
  }
};

最后：

var Router = Ember.Router.extend({
  location: 'history',
  rootURL: function(){
    return ENV['ROOT_URL'] || 'somedefault';
  }.property(),
  baseURL: function(){
    return ENV['BASE_URL'] || 'someotherdefault';
  }.property()
});

Answer 3

这是最终解决它的问题。基本上，我们采用了由“ember build”创建的index.html，并找到了在运行时将值从environment.js传递给我们的javascript的元标记。通过在index.cshtml中生成该元标记，我们可以使用web.config中指定的值。

现在，当我们构建要交付的应用程序时，我们只是忽略它生成的index.html，但将其余资产添加到预制的visual studio Web项目中。该项目可以配置为测试或生产。

首先，我在visual studio中创建了一个空Web应用程序。在web.config中，我添加了这个：

<appSettings>
  <add key="hostName" value="https://apps.example.com/" />
  <add key="baseURL" value="/projectDir/" />
  <add key="serverNamespace" value="api" />
  <add key="imgSrc" value="https://images.example.com" />
</appSettings>

然后编写index.cshtml以使用这些值：

@{
    if (!Request.Url.AbsoluteUri.EndsWith("/"))
    {
        Response.Redirect(Request.Url.AbsoluteUri + "/");
    }    

    var configStr = @"{{
    ""modulePrefix"": ""foo-bar"",
    ""podModulePrefix"": ""foo-bar/pods"",
    ""environment"": ""production"",
    ""baseURL"": ""{3}"",
    ""locationType"": ""hash"",
    ""namespace"": ""{0}"",
    ""host"": ""{1}"",
    ""foo-auth-host"": ""{1}"",
    ""APP"": {{
        ""name"": ""foo-bar"",
        ""version"": ""0.0.0""
    }},
    ""contentSecurityPolicy"": {{
        ""default-src"": ""'none'"",
        ""script-src"": ""'self'"",
        ""font-src"": ""'self'"",
        ""img-src"": ""'self' {2}"",
        ""style-src"": ""'self'"",
        ""media-src"": ""'self'"",
        ""connect-src"": ""'self' {1}""
    }},
    ""simple-auth"": {{
        ""authorizer"": ""authorizer:foo"",
        ""routeAfterAuthentication"": ""/"",
        ""store"": ""simple-auth-session-store:local-storage""
    }},
    ""contentSecurityPolicyHeader"": ""Content-Security-Policy-Report-Only"",
    ""exportApplicationGlobal"": false
}}";
    var serverNamespace = System.Web.Configuration.WebConfigurationManager.AppSettings["serverNamespace"];
    var hostName = System.Web.Configuration.WebConfigurationManager.AppSettings["hostName"];
    var imgSrc = System.Web.Configuration.WebConfigurationManager.AppSettings["imgSrc"];
    var baseUrl = System.Web.Configuration.WebConfigurationManager.AppSettings["baseURL"];

    var configStrPopulated = string.Format(configStr, serverNamespace, hostName, imgSrc, baseUrl);
    var configStrCompacted = System.Text.RegularExpressions.Regex.Replace(configStrPopulated, @"\s+", "");
    var configStrEncoded = HttpUtility.UrlEncode(configStrCompacted);
}<!DOCTYPE html>
<html>
<head>
    ... 
    <meta name="foo-bar/config/environment" content="@configStrEncoded" />
    ... 
</head>
<body>
    <script src="assets/vendor.js"></script>
    <script src="assets/foo-bar.js"></script>
</body>
</html>

在部署或运行时更改ember baseURL

3 个答案:

在部署或运行​​时更改ember baseURL

3 个答案:

在部署或运行时更改ember baseURL