Angular 2 应用部署在生产服务器

Question

我正在为我的 angular2 应用程序使用 angular-cli。现在我想在 ubuntu 14.04 digitalocean 服务器中部署我的应用程序。我从未在服务器中做过任何 angular 应用程序部署。部署的方式或任何推荐的方式是什么？目前我的项目结构如下-

这是我在 dist 文件夹下的 index.html

<html>

<head>
  <meta charset="utf-8">
  <title>BB</title>
  <base href="/"> 
  <link rel="stylesheet" type="text/css" href="assets/source/stable/layout-default.css">
  <link rel="stylesheet" type="text/css" href="assets/demos/css/jquery-ui.css">
  <link rel="stylesheet" href="assets/demos/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="assets/demos/dist/css/AdminLTE.css">
  <link rel="stylesheet" href="assets/demos/dist/css/skins/_all-skins.css">
  <link rel="stylesheet" href="assets/customs.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
  <link rel="stylesheet" href="assets/js/js-library/jstree/themes/default/style.css" />
  <link rel="stylesheet" href="assets/demos/css/dc.css">
  <script src="/vendor/jquery/dist/jquery.min.js" type="text/javascript"></script>
  <script src="assets/js/js-library/jstree/jstree.js"></script>
  <script src=" https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js" type="text/javascript"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-layout/1.4.3/jquery.layout.min.js" type="text/javascript"></script>
  <script type="text/javascript" src="assets/source/stable/callbacks/jquery.layout.resizePaneAccordions.js"></script>
  <script src="assets/demos/bootstrap/js/bootstrap.min.js"></script>
  <script src="assets/demos/js/adminlte/app.js"></script>
  <script src="assets/demos/js/adminlte/demo.js"></script>
  <script src="assets/datatables/jquery.dataTables.js"></script>
  <script src="assets/datatables/dataTables.bootstrap.min.js"></script>
  <link rel="stylesheet" href="assets/query-builder/css/query-builder.default.css" id="qb-theme">
  <link href="http://querybuilder.js.org/dist/jQuery-QueryBuilder/dist/css/query-builder.default.min.css" rel="stylesheet">
  <script src="assets/bootstrap-select/dist/js/bootstrap-select.js"></script>
  <link href="http://querybuilder.js.org/dist/selectize/dist/css/selectize.bootstrap3.css" rel="stylesheet">
  <script src="assets/selectize/dist/js/standalone/selectize.js"></script>
  <script src="assets/bootbox/bootbox.js"></script>
  <script src="assets/jquery-extendext/jQuery.extendext.min.js"></script>
  <script src="assets/doT/doT.js"></script>
  <script src="assets/moment/min/moment.min.js"></script>
  <script src="assets/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
  <link href="assets/seiyria-bootstrap-slider/dist/css/bootstrap-slider.min.css" rel="stylesheet">
  <script src="assets/seiyria-bootstrap-slider/dist/bootstrap-slider.min.js"></script>
  <link href="assets/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet">
  <link href="assets/bootstrap-select/dist/css/bootstrap-select.min.css" rel="stylesheet">
  <script src="assets/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
  <script src="assets/query-builder/query-builder.js"></script>
  <script type="text/javascript" src="assets/js/d3.js"></script>
  <script type="text/javascript" src="assets/js/crossfilter.js"></script>
  <script type="text/javascript" src="assets/js/dc.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico"> 
  <script src="vendor/es6-shim/es6-shim.js"></script>
  <script src="vendor/reflect-metadata/Reflect.js"></script>
  <script src="vendor/systemjs/dist/system.src.js"></script>
  <script src="vendor/zone.js/dist/zone.js"></script>
  <script>
    System.import('system-config.js').then(function() {
      System.import('main');
    }).catch(console.error.bind(console));
  </script>
</head>
<body>
  <bais-app>Loading...</bais-app>
</body>
</html>

但每当我尝试

ng serve

每次都显示这个错误

Error: Attempting to watch missing directory: typings

但是 node_modules 文件夹中的 typings 文件夹在哪里

Answer 1

Angular 不需要运行之外的任何东西（它不依赖于某些服务器端渲染引擎，如 ASP.NET 需要在后台运行ning ).您可以让服务器提供静态文件（angular 需要的文件 -> node_modules、index.html 等）。要将文件移动到 digital 海洋机器，您可以使用 git。这意味着没有真正的 "deployment" 像部署在 IIS 等上。

这就是为什么我们可以使用 angular 制作混合应用程序的原因，一切都在浏览器中完成（angular 使用客户端的资源（他们的 phone、平板电脑、PC）而不是像 ASP.NET 使用您的服务器 CPU 来呈现页面。

当然，如果您使用休息服务器，该服务器需要在某处处于活动状态。如果他们在同一个域上没关系，如果不是，你需要告诉服务器启用cors（跨源资源共享）

编辑：您甚至不必使用 npm start.. 您可以全局安装 http-server 节点模块，只需调用 http-server .，它将为您文件夹中的所有文件提供服务，包括 [=23] =] 这样你就可以像 ip-adress:port/index.html 一样打开应用程序（这里是来自那个 npmjs.com/package/http-server 的 npm link）。您也可以使用 nodejs express 像那样提供页面 + nginx 直接在 ip 地址上提供它，这样您就不需要在 url[=12= 中写下端口和 index.html 部分]

Answer 2

我运行陷入类似的问题试图运行 'ng serve'并得到''typings'未被识别为内部或外部命令，可运行的程序或批处理文件' 反而。我在项目根目录中尝试 'npm install -g typings'，它运行。

Answer 3

在生产环境中部署 Angular 2/4/5 应用程序的最简单方法之一是使用 Nginx + ng build，步骤如下：

假设您要在主机：http://example.com 和端口：8080 部署您的 angular 应用注意 - HOST 和 PORT 在您的情况下可能不同。

确保你的 index.html 头标签中有 <base href="/">。

首先，转到您机器上的 angular 存储库（即 /home/user/helloWorld）路径。
然后使用以下命令为您的生产服务器构建 /dist：

ng build --prod --base-href http://example.com:8080
现在将 /dist（即 /home/user/helloWorld/dist）文件夹从您计算机的 angular 存储库复制到您要托管生产服务器的远程计算机。

现在登录到您的远程服务器并添加以下 nginx 服务器配置。

server {

    listen 8080;

    server_name http://example.com;

    root /path/to/your/dist/location;

    # eg. root /home/admin/helloWorld/dist

    index index.html index.htm;

    location / {

        try_files $uri $uri/ /index.html;

        # This will allow you to refresh page in your angular app. Which will not give error 404.

    }

}

现在重启nginx。
就是这样！！现在您可以在 http://example.com:8080

希望对您有所帮助。

Angular 2 应用部署在生产服务器

Angular 2 application deployment in production server

angular

angular-cli