Question

所以我有一个Angular和Node.js应用程序，我在Heroku上托管。我希望能够在localhost上运行这个应用程序进行测试，但也可以在Heroku上运行。所以我决定使用环境变量来定义API调用的应用程序的URL。

所以environment.ts我有

export const environment = {
  production: false,
  apiURL: 'https://localhost:8080/'
};

在environment.prod.ts我有：

export const environment = {
  production: true,
  apiURL: 'myHerokuURL'
};

因此，当我在heroku上运行时，我希望使用生产URL。我怎么能这样做？

要在本地运行，nodemon server.js然后ng serve。

但是在Heroku上我需要做ng serve --env=prod之类的事情，但不知道如何做。

Answer 1

这些应该有帮助

选项1

如果您使用的是angular-cli，那么

ng build --prod

会做到这一点。然后，您可以将.dist文件夹中的所有内容复制到服务器文件夹

选项2

您可以使用http-server为您的应用提供服务。安装http-server

npm install http-server -g

并转到您的项目文件夹

http-server ./dist

它将为您文件夹中的所有文件提供服务。您可以检查终端可以用来访问应用程序的IP地址和端口。现在打开浏览器并输入

ip-adress:port/index.html

来源：how to deploy angular2 app built using angular-cli

希望它有所帮助。

Answer 2

在您的package.json中添加

   <!DOCTYPE html>
<html>
  <head>
    <title>Babylon - Tutorials from www.FilmsByKris.com</title>
    <script src="js/babylon.js"></script>
    <script src="js/babylon.glTFFileLoader.js"></script>
    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
    <canvas id="renderCanvas"></canvas>
    <model-3d
      background-color="#ffffff"
      src="LegoRobot/ComplexRobot.gltf"
    ></model-3d>
    <script>
      var canvas = document.getElementById("renderCanvas");
      var engine = new BABYLON.Engine(canvas, true);
      var Scene = new BABYLON.Scene(engine);

      //cameras
      var Camera = new BABYLON.ArcRotateCamera(
        "Camera",
        1,
        1,
        20,
        new BABYLON.Vector3(0, 0, 0),
        Scene
      );

      //lights
      var light0 = new BABYLON.PointLight(
        "Omni",
        new BABYLON.Vector3(0, 0, 10),
        Scene
      );
      //BABYLON.SceneLoader.Append("LegoRobot/ComplexRobot.glb", scene);
      // Create a default arc rotate camera and light.
      //     scene.createDefaultCameraOrLight(true, true, true);

      //     // The default camera looks at the back of the asset.
      //     // Rotate the camera by 180 degrees to the front of the asset.
      //     scene.activeCamera.alpha += Math.PI;
      //   });
      //meshes
      //sphere parameters are: name, number of segments (highly detailed or not), size, scene to attach the mesh.
      var ball = BABYLON.Mesh.CreateSphere("Ball", 10, 1.0, Scene);
      ball.position.x = -5; //position mesh

      //box parameters are: name, size of the box, the scene to attach the mesh.
      var box = BABYLON.Mesh.CreateBox("Box", 1, Scene);
      box.position.x = -10; //position mesh

      //plane parameters are: name, size, and scene to attach the mesh.
      var plane = BABYLON.Mesh.CreatePlane("Plane", 10.0, Scene);
      plane.position.x = 5; //position mesh
      plane.rotation.y = Math.PI; //rotate 180

      //cylinder parameters are:
      //name, height, diameterTop, diameterBottom, tessellation (highly detailed or not), scene, updatable.
      var cylinder = BABYLON.Mesh.CreateCylinder(
        "cylinder",
        3,
        3,
        3,
        20,
        Scene,
        false
      );
      cylinder.position.x = 15; //position mesh

      Scene.activeCamera.attachControl(canvas);

      engine.runRenderLoop(function() {
        Scene.render();
      });

      window.addEventListener("resize", function() {
        engine.resize();
      });
    </script>
  </body>
</html>

代替

 "heroku-postbuild": "ng build --configuration=production"

这将仅在heroku上触发一个（生产）构建。如果您退出当前设置，则可以在heroku应用程序日志中看到，您首先使用--prod进行了所有构建，但是随后仅进行了常规构建。

在生产模式Heroku中运行Angular + Node.js应用程序

2 个答案:

选项1

选项2