29 发布与部署之部署到服务器

在本章中，我们将详细探讨如何将 Angular 应用程序部署到服务器。在上一篇章节中，我们讨论了如何对 Angular 应用进行构建和打包，确保我们的代码在生产环境中能够高效运行。本章将基于这些构建文件，介绍如何将它们发布到服务器上，使得最终用户能够访问到我们的应用。

1. 准备构建文件

首先，确保我们的应用已成功构建。这一步通常是在应用的根目录下通过以下命令实现的：

ng build --prod

这个命令将创建一个 dist 文件夹，其中包含构建好的代码。构建过程将为我们的应用生成压缩过的、优化过的文件，确保其在生产环境中的加载速度更快。

2. 部署到静态文件服务器

对于大多数 Angular 应用，特别是那些由 ng build --prod 生成的单页面应用（SPA），我们可以选择一个静态文件服务器来进行部署。这里我们将以 nginx 为例。

2.1 安装 Nginx

在很多 Linux 发行版中，可以通过如下命令安装 nginx：

sudo apt update
sudo apt install nginx

在安装完成后，我们可以通过如下命令启动 Nginx 服务：

sudo systemctl start nginx

2.2 配置 Nginx

然后，我们需要配置 Nginx 使其能够服务于我们 Angular 应用的文件。找到并编辑 nginx 配置文件（通常位于 /etc/nginx/sites-available/default），修改如下：

server {
    listen 80;
    server_name your_domain.com;

    root /var/www/your-angular-app/dist;  # 将此处的路径替换为实际路径
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;  # 确保 Angular 路由工作正常
    }

    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        access_log off;
        add_header Cache-Control "public, no-transform";
    }
}

在这里，root 指令指向构建输出的路径，try_files 语句确保 Angular 的路由正常工作。

2.3 复制文件

接下来，您需要将构建文件复制到 Nginx 所需的目录：

sudo cp -r dist/your-angular-app/* /var/www/your-angular-app/dist/

2.4 重启 Nginx

完成文件复制后，您需要重启 Nginx 以使得更改生效：

sudo systemctl restart nginx

现在，您应该能够通过浏览器访问 http://your_domain.com 来查看您的 Angular 应用。

3. 使用其他服务器

除了 nginx，您也可以选择其他类型的服务器。比如，您可以使用 Apache、Node.js 服务器等。以下是使用 http-server 进行快速测试的一种方法：

3.1 安装 http-server

首先，确保已安装 Node.js，然后通过 npm 安装 http-server：

npm install -g http-server

3.2 运行 http-server

导航到构建的文件夹并运行：

cd dist/your-angular-app
http-server -p 8080

您可以在浏览器中访问 http://localhost:8080 查看您的应用。

4. 处理常见部署问题

在部署过程中，您可能会遇到一些常见问题，例如：

• 路由问题：如果您在浏览器中直接访问某个子路由而不是通过主页面访问，可能会得到 404 错误。这是因为 Nginx 默认不会处理 Angular 路由。要解决此问题，请确保使用 try_files 指令（如上所述）。

• 缓存问题：若您对应用进行了更新，浏览器可能使用缓存中的旧文件。可以通过版本控制文件名或清除浏览器缓存来解决此问题。

结论

通过以上步骤，您应该可以成功地将您的 Angular 应用程序部署到服务器上，使得其他用户可以通过互联网访问它。根据您的需求，您可以选择不同的服务器和替代方案。下一章，我们将介绍如何使用 Angular Universal 进行服务器端渲染，为用户提供更快的首屏加载体验。