在前端开发中，使用 Angular 开发单页应用（SPA）已经成为主流。而在部署时，我们往往会将应用打包成静态文件进行部署。本文将以 Angular 应用为例，详细讲解如何将打包后的静态文件部署到 Tomcat 服务器上。
打包 Angular 应用
在部署 Angular 应用之前，我们需要先打包应用。使用 Angular CLI 提供的 ng build 命令可以将应用打包成静态文件。
ng build --prod
其中，--prod 表示应用会被打包成生产环境下的文件。在打包过程中，Angular CLI 会将应用中的 JavaScript、CSS、HTML、图片等资源压缩、合并，这样可以使应用的加载速度更快，性能更好。
打包完成后，会在项目根目录下生成一个 dist 文件夹，其中包含了所有打包后的静态文件。
部署到 Tomcat
准备工作
在将应用部署到 Tomcat 之前，我们需要对 Tomcat 进行一些配置。首先，我们需要打开 Tomcat 的 manager 应用，并添加一个管理员用户。在 conf/tomcat-users.xml 文件中添加如下代码：
<role rolename="manager-gui"/> <user username="admin" password="password" roles="manager-gui"/>
其中，username 和 password 分别为管理员用户的用户名和密码。添加完成后重启 Tomcat 生效。
接下来，在将应用部署到 Tomcat 之前，我们需要将应用的静态文件放置到 Tomcat 的 webapps 目录下。在将静态文件放置到 webapps 目录下时，需要为应用指定一个上下文路径。
将静态文件放置到 webapps 目录下
将打包后的静态文件放置到 Tomcat 的 webapps 目录下的步骤如下：
- 在 webapps 目录下创建一个新的目录，目录名即为应用的上下文路径，例如
my-app。 - 将
dist目录下的所有文件复制到my-app目录下。此时，应用的地址为http://localhost:8080/my-app。
配置反向代理
在将应用部署到 Tomcat 后，如果需要在多个应用程序中使用同一个端口号，就需要使用反向代理。反向代理会将来自客户端的请求转发到 Tomcat 服务器上提供的服务。
反向代理可以通过 Apache、Nginx 等第三方服务器实现，这里以使用 Apache 服务器作为反向代理为例。
安装 Apache
首先，需要安装 Apache 服务器。在 Ubuntu 上使用下面的命令即可安装 Apache：
sudo apt-get update sudo apt-get install apache2
配置反向代理
完成 Apache 的安装后，需要对反向代理进行配置。
进入 Apache 的 sites-available 目录，复制一个默认的配置文件模板：
cd /etc/apache2/sites-available/ sudo cp 000-default.conf my-app.conf
修改配置文件 my-app.conf，添加反向代理配置：
-- -------------------- ---- -------
------------ -----
----------- -------------------
---------- ----------
----------- --------------
--------- - ---------------------
---------------- - ---------------------
-------- ----------------------------------
--------- ----------------------------------- --------
--------------其中，my-tomcat-server-url 是 Tomcat 服务器的 URL 地址。例如，如果 Tomcat 运行在本机的端口 8080 上，则该地址为 http://localhost:8080/。
完成反向代理配置后，重新启动 Apache 服务器。
sudo service apache2 restart
此时，就可以通过访问 http://my-app.com 来访问部署在 Tomcat 上的 Angular 应用了。
结语
通过本文的介绍，相信读者已经掌握了将 Angular 应用部署到 Tomcat 的方法。同时，我们也提到了如何使用反向代理来将多个应用程序映射到同一个端口上。希望本文的内容能够为读者提供一些有价值的参考和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6782a3e9935627c900147d6e
