Angular 应用程序自动部署的正确方法是什么? (Angular cli, express, digital ocean droplet)

What is right approach of automatic deployment of Angular app? (Angular Cli, express, digital ocean droplet)

我正在使用 Angular Cli 开发一个 Angular 应用程序。还使用 express 应用程序作为后端服务器。 我在 Ubuntu 16.04 的 DigitalOcean 液滴上有一个 BitBucket 存储库和一个生产服务器 所以我的项目文件夹结构很简单:

- src - angular app sources
- server - express app

所以当我进行生产构建时 Angular Cli 将所有文件编译到 server/public 文件夹(我已经将默认的 dist 替换为 angular 中的 outDir- cli.json)

我在这里看到两种将我的应用程序部署到生产服务器的方法:

1) Simply push the whole project to remote repository on BitBucket (excluding server/public - otherwise that's not the best practice, right?), then clone it on my droplet, install all the dependencies, create production build and run it via pm2

2) Create production build on my local machine, then copy just server folder to droplet, install only production dependencies needed for express app, and run it via pm2

我想通过创建一些脚本或其他东西使这个过程变得简单和自动化。

是的,我知道这两种方式都是可行的,但由于我是开发 SPA 的新手,我没有任何经验,可能看不到这两种方式的一些隐藏的优缺点。

就目前而言,我认为第二个更正确,因为我的生产服务器上不会安装任何额外的文件、依赖项和进程,只有应用程序运行所需的那些。但!我还没有找到任何有关该方法的教程。

最佳做法是什么?

正确的做法是:视情况而定。正确的方法取决于您的 setup/stack。您描述的方法可行,但无论如何都不是自动化的,因为您仍在手动将文件复制到您的 Droplet。

更好的方法是使用自动化工具,例如 Travis CI or CircleCI. For example, I use Travis for my personal site automated deployment. My .travis.yml file can be found here

它的作用是:

  • 执行测试 npm 脚本。
  • 缓存 node_modules,以缩短构建时间。
  • 如果提交是标记的提交,则执行部署步骤。
    • 在部署之前,它会构建用于生产的项目。

现在我用Firebase Hosting since my personal website is just a static site built with Hugo。您需要编排步骤以封装重新部署到您的 Droplet、重新启动 pm2 以及成功部署所需的任何其他过程。