java部署环境构建_配置角度环境构建一次部署到任何地方

最新推荐文章于 2024-04-08 22:26:17 发布

郝ren

最新推荐文章于 2024-04-08 22:26:17 发布

阅读量288

点赞数

文章标签： java 大数据人工智能 python docker

原文链接：https://medium.com/mighty-ghost-hack/configure-angular-environments-build-once-deploy-anywhere-c74ed53f0191

版权

java部署环境构建

All right Guys! In this article, I am going to explain to you an amazing technique that is most commonly know as build once deploy anywhere so before proceed further I would love to explain to you the real-world scenario why we need such a technique in our application instead of using the default environment files. 🤔

好的，伙计们！在本文中，我将向您介绍一种惊人的技术，该技术通常被称为一次构建到任何地方，因此在继续进行之前，我很乐意向您解释为什么在我们的应用程序中需要这种技术的现实情况使用默认环境文件的说明。 🤔

Also, if you landing on this page so I guess you also run into the same problem. if not then before trying this solution you at least know why we implement this technique on our project bcoz this technique is not necessary to implement in all angular projects.

另外，如果您登陆到此页面，那么我想您也会遇到相同的问题。如果不是，那么在尝试此解决方案之前，您至少知道为什么我们要在我们的项目中实施此技术，因为在所有角度项目中都不需要实施该技术。

实际情况😵 (Actual Scenario 😵)

In my last projects, I used to build the angular project every time by keeping all configuration of the project in the environment file. so most of the time if I have to deliver the project to another client I need to change the credential as well bcoz we cannot give one credential to every client. whenever a requirement is a change we have to build the whole project base of change credential. so how long you will going to build the same project again ? and it might cause some other issue on the production level as well.

在我的最后一个项目中，我每次都会通过将项目的所有配置都保留在环境文件中来构建角度项目。因此，在大多数情况下，如果我必须将项目交付给另一位客户，我也需要更改凭据，因为我们无法为每个客户提供一个凭据。每当需求是变更时，我们都必须建立变更凭证的整个项目基础。那么您将花多长时间再次构建相同的项目？并可能在生产水平上引起其他问题。

so I would love to offer a solution to this problem 🙂

所以我很想为这个问题提供解决方案

Now you know the problem statement so I will walk you through the different steps.

现在您知道了问题陈述，因此我将引导您完成不同的步骤。

First, read the below Sentence which is the Golden rule of programming

首先，请阅读下面的句子，这是编程的黄金法则

If its Works Don’t Touch it!!!

如果它的作品不碰它！

Now you might be asking why I put these rules in the middle of the post bcoz I wanted you should try this approach first on sample code. Once it works in sample code then you can try it on your live project.

现在您可能会问为什么我将这些规则放在bcoz的中间，我希望您首先在示例代码上尝试这种方法。一旦它在示例代码中起作用，您就可以在您的实时项目中尝试它。

So let’s begin by creating a new angular project.

因此，让我们开始创建一个新的角度项目。

步骤1建立专案并设定环境 (Step 1 Create A Project & Configure environment)

ng new env-demo

A new project is created. simply run the project by the following command.

创建一个新项目。只需通过以下命令运行项目。

ng serve -o

Once you run the serve command you will land into this page which contains the default template of Angular Framework.

一旦运行serve命令，您将进入该页面，其中包含Angular Framework的默认模板。

so first and foremost for the demonstration purpose, I will make the project name dynamically for that I will keep the project name-value under the environment files. so make it dynamically by adding it into environment files.

因此，出于演示目的，我首先要动态创建项目名称，以便将项目名称-值保留在环境文件下。因此，通过将其添加到环境文件中来使其动态化。

You can see this in the below screenshot. I added the project name on both production and non-production files.

您可以在下面的屏幕截图中看到它。我在生产和非生产文件上都添加了项目名称。

now let’s make the changes in app components and provide environment variable value as below shown in the code snippet.

现在，让我们在应用程序组件中进行更改，并提供环境变量值，如代码段所示。

And lastly, save the project and look into the HTML page and check project name is assign dynamically or not. if it is working then our main task to change the project name from production build without rebuilding the project. so I assume you done the above steps.

最后，保存项目并查看HTML页面，并检查项目名称是否动态分配。如果它正在工作，那么我们的主要任务是从生产版本中更改项目名称，而无需重建项目。因此，我假设您已完成上述步骤。

步骤2建立外部env.js档案并建立连结 (Step 2 Create an External env.js file and link)

now we have to create an external env.js file just inside the src directory. and add the following few lines of code. also, make sure to keep the variable name which you want but the prefix must be the same which is windows.__env.VARIBALE_NAME just what I have shown below.

现在我们必须在src目录中创建一个外部env.js文件。并添加以下几行代码。另外，请确保保留所需的变量名，但前缀必须与windows .__ env.VARIBALE_NAME相同，这正是我在下面显示的内容。

(function (window) {   window.__env = window.__env || {};   window.__env.projectName = "External_ENV";}(this));

now we have to load this js file. while index.html is rendered so add the below script tag inside of index.html

现在我们必须加载此js文件。呈现index.html时，请在index.html内添加以下脚本标记

<html l
  <head>
    <!-- Load environment variables -->
    <script src="env.js"></script>
  </head>
  <body>  </body>  
</html>

now we have to add this file path in the angular.json file. bcoz By default, JavaScript files such as env.js are not copied to the output directory when we build our application. so in order to copy the file into the output directory, we must include the env.js path into the angular.json.

现在我们必须在angular.json文件中添加此文件路径。 bcoz默认情况下，在构建应用程序时，JavaScript文件(例如env.js不会复制到输出目录。因此，为了将文件复制到输出目录，我们必须将env.js路径包含在angular.json中。

{
  "projects": {
    "app-name": {
      "architect": {
        "build": {
          "options": {
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/env.js" // <== Add env.js here
            ]
          }
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            }
          }
        }
      }
    }
  }
}

so far we create a new env.js file and linked it with the angular.json file and index.html successfully. so before we move further we have to verify after building its appear in our output directory or not by running the below command.

到目前为止，我们创建了一个新的env.js文件，并将其成功链接到angular.json文件和index.html。因此，在继续操作之前，我们必须通过运行以下命令来验证其是否出现在输出目录中。

ng build --prod

Below snippet, you can see env.js appear on output directory

在摘要下方，您可以看到env.js出现在输出目录中

so far we completed step 2 as well.

到目前为止，我们还完成了步骤2。

步骤3建立环境服务及其提供者 (Step 3 Create Environment Service & Its Provider)

Now we have to create an env service file and its provider also we need to register the provider with the angular module.ts file.

现在我们必须创建一个环境服务文件及其提供者，还需要在angular模块.ts文件中注册提供者。

In the first place, we have to create an env service file.

首先，我们必须创建一个环境服务文件。

so In angular, we can achieve this by a single command.

所以在角度上，我们可以通过一个命令来实现。

also, I will create a service under the app/service directory bcoz it considers as a best practice to keep it file separately. so simply enter the following command.

另外，我将在app / service目录下的bcoz下创建一个服务，该服务被认为是分开保存文件的最佳实践。因此只需输入以下命令。

ng g s env

Once you entered the above command. you will see two main files is created. but Angular CLI does not come with a recipe to create a provider, so let’s create the env.service.provider.ts file manually in the same directory.

输入以上命令后。您将看到两个主要文件已创建。但是Angular CLI并未附带创建提供程序的方法，因此让我们在同一目录中手动创建env.service.provider.ts文件。

Now we need to add some piece of code inside a created provider file.

现在，我们需要在创建的提供程序文件中添加一些代码。

Below you will find its code simply copy and past it into your provider class file.

在下面，您将找到其代码，只需将其复制并粘贴到提供程序类文件中即可。

import { EnvService } from './env.service'; // import environment service


export const EnvServiceFactory = () => {  
  
  const env = new EnvService(); // Create env Instance


  // Read environment variables from browser window
  const browserWindow = window || {};
  const browserWindowEnv = browserWindow['__env'] || {};


  // Assign environment variables from browser window to env
  // In the current implementation, properties from env.js overwrite defaults from the EnvService.
  // If needed, a deep merge can be performed here to merge properties instead of overwriting them.
  for (const key in browserWindowEnv) {
    if (browserWindowEnv.hasOwnProperty(key)) {
      env[key] = window['__env'][key];
    }
  }


  return env;
};


export const EnvServiceProvider = {  
  provide: EnvService,
  useFactory: EnvServiceFactory,
  deps: [],
};

Now we have to add the same variable into the created env service and it necessary to keep the variable name the same.

现在，我们必须将相同的变量添加到创建的env服务中，并且必须保持变量名称相同。

Congrats we finish the main steps 😀

恭喜，我们完成了主要步骤😀

步骤3最终步骤注册和导入 (Step 3 Finial Steps Registration and importing)

here we will register the provider in the angular module.ts file and import the env service file in the app component file. you can import wherever is required. in my case, I just use this in-app environment only for demonstration.

在这里，我们将在angular module.ts文件中注册提供程序，并将env服务文件导入到应用程序组件文件中。您可以在任何需要的地方导入。就我而言，我仅将此应用内环境用于演示。

First register provider in the angular module file.

角度模块文件中的第一个注册提供程序。

In the below snippet you can see clearly.

在下面的代码段中，您可以清楚地看到。

Now import env service under the app component file and replace the environment files variable with the service variable as shown in the below snippet.

现在，在应用程序组件文件下导入env服务，并将环境文件变量替换为服务变量，如下面的代码片段所示。

one side note its better to make env service instance with name environment bcoz if you use an environment variable in multiple places so it becomes hard to change its name with another variable.

一方面请注意，如果您在多个位置使用环境变量，则使用环境名称为bcoz的env服务实例会更好，因此很难使用另一个变量来更改其名称。