首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >生产服务器中的角2应用程序部署

生产服务器中的角2应用程序部署
EN

Stack Overflow用户
提问于 2016-06-07 08:38:53
回答 3查看 2.7K关注 0票数 1

我在我的angular2应用程序中使用了角-cli。现在,我想在ubuntu14.04数字海洋服务器中部署我的应用程序。我从来没有在服务器上做过任何角度的应用程序部署。部署的方法或任何推荐的方法是什么?目前我的项目结构如下-

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

代码语言:javascript
复制
<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>

但每当我试图

代码语言:javascript
复制
ng serve

每次它显示给我这个错误

代码语言:javascript
复制
Error: Attempting to watch missing directory: typings

但是node_modules文件夹中的类型文件夹在哪里?

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2016-06-07 10:12:21

角不需要任何外部运行(它不依赖于某些服务器端呈现引擎,如需要在后台运行的ASP.NET )。您可以拥有服务静态文件的服务器(需要-> node_modules、index.html等的文件)。要将文件移动到数字海洋机器,只需使用git即可。这意味着没有像在IIS上部署那样的真正的“部署”。

这就是为什么我们可以制造混合应用程序的角度,所有的事情都是在浏览器中完成的( render是使用客户端的资源(他们的手机、平板电脑、pc),而不是像ASP.NET那样使用服务器CPU来渲染页面。

当然,如果您使用rest服务器,那么该服务器需要在某个地方处于活动状态。如果它们位于相同的域中,则需要通知服务器启用cors (跨源资源共享)。

编辑:你甚至不用使用npm启动。您可以全局安装http-服务器节点模块,只需调用http-server .,它将为您的文件夹中的所有文件提供服务,包括该index.html,这样您就可以像ip-adress:port/index.html一样打开应用程序(这里是npmjs.com/package/ http-server中的npm链接)。此外,您还可以使用nodejs像+ nginx那样为页面提供服务,直接在ip附加服务器上提供服务,因此不需要在url中写入端口和index.html部分。

票数 3
EN

Stack Overflow用户

发布于 2016-06-20 02:38:44

我遇到了一个类似的问题,试图运行'ng服务‘,得到’类型‘不被认为是一个内部或外部命令,可操作的程序或批处理文件’。我尝试了项目根目录下的'npm -g类型‘,然后它运行。

票数 0
EN

Stack Overflow用户

发布于 2019-05-06 09:47:05

在生产环境中部署Range2/4/5应用程序的最简单方法之一是使用Nginx + ng build,下面是步骤:

假设您想在主机上部署您的角应用程序:http://example.com和端口:8080,备注-主机和端口在您的情况下可能不同。

确保您的<base href="/">在您的index.html头标签。

  1. 首先,进入机器上的角度回购路径(即/home/user/helloWorld)。
  2. 然后使用以下命令为生产服务器构建/dist: ng build -prod-base-href http://example.com:8080
  3. 现在,将/dist (即/home/user/helloWorld/dist)文件夹从您的机器的角度回复复制到您希望托管生产服务器的远程机器上。
  4. 现在登录到远程服务器并添加以下nginx服务器配置。 服务器{侦听8080;server_name http://example.com;root /path/to/your/dist/location;#例如。root /home/admin/helloWorld/dist索引index.html index.htm;location /{ try_files $uri $uri/ /index.html;#这将允许您刷新角度应用程序中的页面。这不会产生错误404。}}
  5. 现在重新启动nginx。
  6. 就这样!!现在您可以在http://example.com:8080上访问您的角应用程序了。

希望这会有帮助。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/37674442

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档