发布 Angular 2 应用程序（部署）

Posted 2023-03-04

【中文标题】发布 Angular 2 应用程序（部署）

【英文标题】：Publishing Angular 2 app (deployment)

【发布时间】：2016-09-29 18:05:10

【问题描述】：

最后我完成了我的 Angular 2 应用程序的困难部分，我想在服务器上看到它。

我有 Linux 网络托管 我正在托管 php 和 SQL 网站，我想知道如何托管 angular 2 应用程序，因为我使用 npm start 运行它。

有人告诉我有关 Amazon EC2 的信息，但我不确定它是如何工作的，因为这是我第一次托管此类应用程序。

我读到：About publishing Angular 2 application 并注意到我需要使用 JSPM(?) 编译我的应用程序并以某种方式使用它。所以我尝试使用它。它在我的应用程序根目录中创建了jspm_packages 文件夹，但我不知道它是什么意思或如何使用它。

任何帮助如何通过网络托管或 Amazon EC2 发布我的应用程序/我可以允许其他人查看和使用我的应用程序的任何其他方式吗？我的应用是 Angular2 和 Laravel 作为后端。

【参考方案1】：

其实这里有两个步骤：

使用 Gulp 或其他工具（如 Webpack / JSPM）打包您的应用程序。在 Gulp 的情况下看到这个问题： How do I actually deploy an Angular 2 + Typescript + systemjs app? 在静态 Web 服务器中上传相应的文件。

对于第二步，例如，服务器可以托管在 EC2 上。但是您会注意到，您甚至可以使用 gh-pages 在 Github 上托管它。我认为这个链接可以帮助你：https://gist.github.com/chrisjacob/833223。其实这取决于你的需要...

【讨论】：

谢谢，但是我需要将什么文件上传到我的服务器？在您的指南中，我生成了一个包含 app.min.js、供应商和 index.html 的 dist 文件夹。每次 .ts 文件更新后我需要再次吞下它们吗？

您需要上传dist文件夹的内容。是的，您需要在每次更新后再次执行 gulp...

【参考方案2】：

如果您指的是弹性beantalk nodejs ec2，那么这个答案最适合您，因为我花了一段时间才弄清楚，但结果比我想象的要容易：

在对this link 进行一些修改以避免/usr/bin/env: node: No such file or directory 问题之后，我添加了以下脚本

.ebextensions/angular2deployment.config

files:
  "/opt/elasticbeanstalk/env.vars" :
    mode: "000775"
    owner: root
    group: users
    content: |
      export NPM_CONFIG_LOGLEVEL=error
      export NODE_PATH=`ls -td /opt/elasticbeanstalk/node-install/node-* | head -1`/bin
  "/opt/elasticbeanstalk/hooks/appdeploy/pre/50npm.sh" :
    mode: "000775"
    owner: root
    group: users
    content: |
      #!/bin/bash
      . /opt/elasticbeanstalk/env.vars
      function error_exit
      
        eventHelper.py --msg "$1" --severity ERROR
        exit $2
      

      #install not-installed yet app node_modules
      if [ ! -d "/var/node_modules" ]; then
        mkdir /var/node_modules ;
      fi
      if [ -d /tmp/deployment/application ]; then
        ln -s /var/node_modules /tmp/deployment/application/
      fi

      OUT=$([ -d "/tmp/deployment/application" ] && cd /tmp/deployment/application && $NODE_PATH/node $NODE_PATH/npm install 2>&1) || error_exit "Failed to run npm install.  $OUT" $?
      echo $OUT
  "/opt/elasticbeanstalk/hooks/configdeploy/pre/50npm.sh" :
    mode: "000666"
    owner: root
    group: users
    content: |
       #no need to run npm install during configdeploy

删除 node_modules 和 dist 文件夹（如果有的话，这两个都不需要）。 运行npm install && npm start（这一步一定要成功），注意我用的是angular2默认的package.jsonSee Angular.IO Deployment 如果#3成功，则可以再次重新删除node_modules 选择项目中的所有文件和文件夹（确保.ebextensions也被选中），然后压缩它们，不要压缩顶部文件夹（部署时会有子目录会破坏部署） 现在您可以部署该压缩文件并开始使用了！

如果您使用的是 MacOS，在压缩时，macos 会添加 macos 文件夹，这会破坏部署，请确保使用不会添加此额外目录的工具，在我的情况下，我使用了 YemuZip

附加说明：EC2 弹性豆茎将运行 npm install 和 npm start，这就是为什么我建议运行它们并确保它们在您的本地环境中正常