Heroku 是一款流行的云平台，可以方便地部署 Web 应用程序。本文将解释如何使用 Heroku 部署一个 Angular 应用程序。
准备工作
在开始之前，您需要先确保以下条件：
- 已经安装了 Git 和 Node.js。
- 已经创建了一个 Angular 应用程序。
- 拥有一个 Heroku 账户。
步骤
步骤 1：创建一个 Heroku 应用
登录 Heroku 账户后，单击“New”按钮，然后选择“Create New App”选项。
在弹出的窗口中，输入您的应用程序名称，并选择您偏向的部署区域。 然后单击“Create App”按钮。
步骤 2：安装 Heroku CLI
在本地安装 Heroku CLI 后，可以通过终端或命令行访问 Heroku 账户。
步骤 3：将 Angular 应用部署到 Heroku 云平台
第一步，创建一个 package.json 文件，其中包含应用程序的依赖项和脚本。 在项目根目录中运行以下命令：
npm init -y
第二步，安装 heroku-buildpack-static 插件，它将允许 Heroku 静态托管您的应用程序。 在项目根目录中运行以下命令：
npm install heroku-buildpack-static --save-dev
第三步，将 Angular 应用程序的构建文件部署到 Heroku。 在项目根目录中运行以下命令：
ng build --prod
该命令将在 dist 文件夹中生成一个构建文件。
第四步，将构建文件添加到该仓库中。 运行以下命令：
git add .
第五步，提交您的更改，然后推送到 Heroku 仓库。 在终端中运行以下命令：
git commit -m "Initial commit" git push heroku master
总结
通过以上步骤，您就可以将 Angular 应用程序部署到 Heroku 云平台上。 Heroku 提供了一个简单的方法来托管 Web 应用程序，使得开发人员可以将重心放到应用程序的开发上。 现在您可以在 Heroku 上创建自己的应用程序并将其部署到生产环境中。
示例代码
package.json 文件：
-- -------------------- ---- -------
-
------- -----------------
---------- --------
-------------- --- ------- --- -------------
---------- -
-------- --- -------
-------- --- ----- --------
------- --- ------
------- --- -----
--
----------- ---
--------- ---
---------- ------
--------------- -
---------------------- ----------
------------------ ----------
-------------------- ----------
---------------- ----------
----------------- ----------
---------------------------- ----------
------------------------------------ ----------
------------------ ----------
------- ---------
-------- ---------
---------- ---------
--
------------------ -
-------------------------------- ------------
--------------- ----------
------------------------ ----------
----------------- ---------
-------------- -----------
------------ ---------
-------------------------- ---------
--------------- ---------
------------------------ ---------
-------- ---------
------------------------ ---------
----------------- ---------
---------------- ---------
------------------------------ ---------
------------- ---------
---------- ---------
--------- ---------
------------- --------
-
-Heroku 部署脚本：（在 package.json 文件的 scripts 部分）
"scripts": {
...
"start": "ng serve",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"heroku-postbuild": "ng build --prod"
},Angular 部署插件：
"devDependencies": {
...
"heroku-buildpack-static": "^1.4.4"
},来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6482d9be48841e98942359ec