MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

部署Angular应用到常见服务器的方法

2022-01-087.5k 阅读

1. 准备工作

在开始部署 Angular 应用到服务器之前，确保你已经完成了以下准备工作：

  • 本地开发环境：确保本地安装了 Node.js 和 npm（Node Package Manager）。Angular 项目依赖于这些工具进行构建和管理。你可以通过在终端输入 node -v 和 npm -v 来检查是否安装以及版本号。如果未安装，可以从 Node.js 官方网站 下载并安装。
  • Angular 项目：已经在本地开发并测试完成了 Angular 应用。确保项目能够正常运行，没有任何编译错误或运行时错误。你可以在项目目录下运行 ng serve 来启动本地开发服务器，访问 http://localhost:4200 查看应用是否正常显示。
  • 服务器访问权限：获得目标服务器的访问权限，包括服务器的 IP 地址、用户名和密码（如果是基于密码认证），或者私钥（如果是基于 SSH 密钥认证）。不同类型的服务器可能有不同的访问方式，如 Linux 服务器通常通过 SSH 进行连接，Windows 服务器可能使用远程桌面连接等。

2. 构建 Angular 应用

在部署之前，需要将 Angular 应用进行构建，生成用于生产环境的静态文件。在 Angular 项目的根目录下，打开终端并执行以下命令：

ng build --prod
  • 参数解释：
    • --prod：这个参数告诉 Angular CLI 使用生产模式进行构建。在生产模式下，Angular 会启用一系列优化，如压缩代码、移除未使用的代码（tree - shaking）等，以减小输出文件的大小，提高应用的加载速度。 构建完成后，会在项目根目录下生成一个 dist 文件夹，里面包含了构建好的静态文件，这些文件就是要部署到服务器上的内容。例如，假设你的项目名称为 my - angular - app，则构建后的文件结构如下：
my - angular - app/
├── dist/
│   ├── my - angular - app/
│   │   ├── index.html
│   │   ├── main.js
│   │   ├── polyfills.js
│   │   ├── runtime.js
│   │   ├── styles.css
│   │   └──...
│   └──...
├── src/
├── node_modules/
├── angular.json
├── package.json
└──...

3. 部署到 Nginx 服务器

Nginx 是一款轻量级的高性能 Web 服务器，广泛用于部署前端应用。以下是将 Angular 应用部署到 Nginx 服务器的详细步骤：

3.1 安装 Nginx

如果服务器上尚未安装 Nginx，可以根据服务器的操作系统类型进行安装。

  • 在 Ubuntu 上安装：
sudo apt - get update
sudo apt - get install nginx
  • 在 CentOS 上安装：
sudo yum install epel - release
sudo yum install nginx

安装完成后，可以通过 sudo systemctl start nginx 启动 Nginx 服务，并使用 sudo systemctl enable nginx 使其在系统启动时自动运行。可以通过访问服务器的 IP 地址在浏览器中查看 Nginx 的默认欢迎页面，确认安装是否成功。

3.2 配置 Nginx

Nginx 的配置文件通常位于 /etc/nginx/sites - available/ 目录下。首先，创建一个新的配置文件，例如 my - angular - app.conf：

sudo nano /etc/nginx/sites - available/my - angular - app.conf

在配置文件中添加以下内容：

server {
    listen 80;
    server_name your_domain.com; # 替换为你的域名，如果使用 IP 访问，可以省略此配置

    root /var/www/my - angular - app/dist/my - angular - app; # 替换为实际的项目路径
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}
  • 配置解释：
    • listen 80：指定 Nginx 监听的端口号，80 是 HTTP 的默认端口。
    • server_name your_domain.com：设置服务器的域名。如果直接使用 IP 访问服务器，可以省略这一行。
    • root /var/www/my - angular - app/dist/my - angular - app：指定 Angular 应用构建后的静态文件所在的目录。请根据实际情况替换路径。
    • index index.html：设置默认的索引文件，即当访问根路径时，Nginx 会返回 index.html 文件。
    • location / 块中的 try_files $uri $uri/ /index.html：这是一个重要的配置，它告诉 Nginx 尝试查找请求的文件或目录，如果找不到，则返回 index.html。这对于 Angular 的路由机制很重要，因为 Angular 应用通常使用 HTML5 历史模式，所有的路由都在前端处理，服务器需要始终返回 index.html 以确保应用的正常导航。

配置完成后，保存并退出编辑器（在 nano 中按 Ctrl + X，然后按 Y，最后按 Enter）。接下来，需要将这个配置文件链接到 /etc/nginx/sites - enabled/ 目录，使 Nginx 加载该配置：

sudo ln -s /etc/nginx/sites - available/my - angular - app.conf /etc/nginx/sites - enabled/

然后，检查 Nginx 配置文件的语法是否正确：

sudo nginx - t

如果语法检查通过，重新加载 Nginx 服务使配置生效：

sudo systemctl reload nginx

此时，将 Angular 应用的 dist 目录下的所有文件上传到 /var/www/my - angular - app/dist/my - angular - app 目录（根据配置文件中的 root 路径）。可以使用 scp 命令（假设本地项目目录为 ~/my - angular - app/dist，服务器用户名为 user，IP 地址为 192.168.1.100）：

scp -r ~/my - angular - app/dist/user@192.168.1.100:/var/www/my - angular - app/dist/my - angular - app

上传完成后，通过访问服务器的 IP 地址或域名，就可以看到部署好的 Angular 应用。

4. 部署到 Apache 服务器

Apache 也是一款常用的 Web 服务器，下面介绍如何将 Angular 应用部署到 Apache 服务器。

4.1 安装 Apache

同样，根据服务器的操作系统类型安装 Apache。

  • 在 Ubuntu 上安装：
sudo apt - get update
sudo apt - get install apache2
  • 在 CentOS 上安装：
sudo yum install httpd

安装完成后，通过 sudo systemctl start apache2（在 Ubuntu 上）或 sudo systemctl start httpd（在 CentOS 上）启动 Apache 服务，并使用 sudo systemctl enable apache2 或 sudo systemctl enable httpd 使其在系统启动时自动运行。可以通过访问服务器的 IP 地址在浏览器中查看 Apache 的默认欢迎页面，确认安装是否成功。

4.2 配置 Apache

Apache 的主配置文件通常位于 /etc/apache2/apache2.conf（在 Ubuntu 上）或 /etc/httpd/conf/httpd.conf（在 CentOS 上）。不过，为了更好的管理，我们通常在 /etc/apache2/sites - available/（在 Ubuntu 上）或 /etc/httpd/conf.d/（在 CentOS 上）目录下创建一个新的虚拟主机配置文件。例如，在 Ubuntu 上创建 my - angular - app.conf：

sudo nano /etc/apache2/sites - available/my - angular - app.conf

添加以下内容：

<VirtualHost *:80>
    ServerName your_domain.com # 替换为你的域名，如果使用 IP 访问，可以省略此配置
    DocumentRoot /var/www/my - angular - app/dist/my - angular - app # 替换为实际的项目路径

    <Directory /var/www/my - angular - app/dist/my - angular - app>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>

    ErrorLog ${APACHE_LOG_DIR}/my - angular - app.error.log
    CustomLog ${APACHE_LOG_DIR}/my - angular - app.access.log combined
</VirtualHost>
  • 配置解释：
    • <VirtualHost *:80>：定义一个监听 80 端口的虚拟主机。
    • ServerName your_domain.com：设置服务器的域名，可省略如果使用 IP 访问。
    • DocumentRoot /var/www/my - angular - app/dist/my - angular - app：指定 Angular 应用构建后的静态文件所在的目录，需根据实际情况替换。
    • <Directory> 块配置了对应用目录的访问权限。Options Indexes FollowSymLinks 允许显示目录索引（如果没有 index.html 文件）并跟随符号链接；AllowOverride All 允许在 .htaccess 文件中进行配置覆盖；Require all granted 允许所有用户访问。
    • ErrorLog 和 CustomLog 分别指定了错误日志和访问日志的路径。

在 CentOS 上，配置文件结构类似，但文件路径不同。保存并退出编辑器后，在 Ubuntu 上启用该虚拟主机配置：

sudo a2ensite my - angular - app.conf

然后，检查 Apache 配置文件的语法：

sudo apache2ctl configtest

如果语法正确，重新加载 Apache 服务：

sudo systemctl reload apache2

在 CentOS 上，启用虚拟主机配置的方式略有不同，例如将配置文件保存为 /etc/httpd/conf.d/my - angular - app.conf 后，直接重新加载服务：

sudo systemctl reload httpd

同样，将 Angular 应用的 dist 目录下的所有文件上传到 /var/www/my - angular - app/dist/my - angular - app 目录（根据配置文件中的 DocumentRoot 路径）。使用 scp 命令（假设本地项目目录为 ~/my - angular - app/dist，服务器用户名为 user，IP 地址为 192.168.1.100）：

scp -r ~/my - angular - app/dist/user@192.168.1.100:/var/www/my - angular - app/dist/my - angular - app

上传完成后，通过访问服务器的 IP 地址或域名，即可访问部署好的 Angular 应用。

5. 部署到 IIS 服务器（Windows 系统）

如果你的服务器是基于 Windows 操作系统，且安装了 Internet Information Services（IIS），可以按以下步骤部署 Angular 应用。

5.1 安装 IIS

在 Windows Server 上，可以通过服务器管理器来安装 IIS。打开服务器管理器，选择“添加角色和功能”，在“服务器角色”中选择“Web 服务器（IIS）”，然后按照向导完成安装。

5.2 创建网站

打开 IIS 管理器，在左侧的“连接”面板中，右键点击“网站”，选择“添加网站”。

  • 网站名称：输入一个描述性的名称，例如“my - angular - app”。
  • 物理路径：选择 Angular 应用构建后的 dist 目录，例如 C:\inetpub\wwwroot\my - angular - app\dist\my - angular - app。
  • 绑定：通常选择“http”协议，IP 地址选择“全部未分配”，端口号为“80”。如果有域名，可以在“主机名”中填写域名。

5.3 配置 URL 重写

由于 Angular 应用使用 HTML5 历史模式，需要配置 URL 重写，使所有请求都指向 index.html。在 IIS 管理器中，找到刚刚创建的网站，双击“URL 重写”图标。 点击右侧的“添加规则集”，输入规则集名称，例如“Angular Rewrite”。然后点击“添加规则”，选择“空白规则”，并进行以下配置：

  • 名称：输入规则名称，例如“Rewrite to index.html”。
  • 匹配 URL：
    • 模式：(.*)
    • 忽略大小写：勾选
  • 操作：
    • 操作类型：重写
    • 重写 URL：/index.html 保存配置后，将 Angular 应用的 dist 目录下的所有文件复制到创建网站时指定的物理路径下。通过访问服务器的 IP 地址或域名（如果配置了域名），就可以访问部署好的 Angular 应用。

6. 部署到云服务器提供商（以 AWS S3 为例）

云服务器提供商提供了便捷的方式来部署静态网站，以 Amazon Web Services（AWS）的 Simple Storage Service（S3）为例：

6.1 创建 S3 存储桶

登录 AWS 管理控制台，进入 S3 服务。点击“创建存储桶”，填写存储桶名称（必须是全球唯一的），选择区域，然后按照向导完成创建。创建完成后，右键点击存储桶，选择“属性”，在“静态网站托管”选项中，选择“使用此存储桶托管网站”。

  • 索引文档：输入 index.html。
  • 错误文档：输入 index.html（可选，用于处理错误页面）。

6.2 上传文件

可以使用 AWS 管理控制台的“上传”功能，将 Angular 应用构建后的 dist 目录下的所有文件上传到 S3 存储桶中。或者也可以使用 AWS CLI 进行上传。首先，确保安装了 AWS CLI 并配置了访问密钥等信息。然后在本地项目的 dist 目录下执行以下命令：

aws s3 sync. s3://your - bucket - name --acl public - read
  • 参数解释：
    • . 表示当前目录，即 dist 目录。
    • s3://your - bucket - name 是要上传到的 S3 存储桶的 URL，替换 your - bucket - name 为实际的存储桶名称。
    • --acl public - read 设置上传文件的访问权限为公共可读，这样才能通过 URL 访问这些文件。

6.3 配置访问权限

为了使存储桶中的文件能够被公开访问，需要配置存储桶的访问策略。在存储桶的“权限”选项卡中，找到“存储桶策略”，点击“编辑”，添加以下策略（替换 your - bucket - name 为实际的存储桶名称）：

{
    "Version": "2012 - 10 - 17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::your - bucket - name/*"
        }
    ]
}

这个策略允许任何人读取存储桶中的对象。保存策略后，通过存储桶的网站端点（在“静态网站托管”选项中可以找到），就可以访问部署好的 Angular 应用。

7. 常见问题及解决方法

7.1 页面空白

  • 可能原因：
    • 文件未正确上传：检查服务器上的文件是否完整，特别是 index.html、JavaScript 和 CSS 文件。可以通过 SSH 登录服务器，进入部署目录，查看文件列表和文件内容。
    • 路径配置错误：在 Nginx 或 Apache 配置文件中，确保 root 或 DocumentRoot 路径设置正确。如果路径错误，服务器将无法找到应用的文件。
    • 缓存问题：浏览器可能会缓存旧版本的页面。尝试在浏览器中强制刷新（通常是 Ctrl + F5 或 Cmd + Shift + R），或者清除浏览器缓存后再次访问。

7.2 404 错误

  • 可能原因：
    • 路由配置问题：在 Angular 应用中，如果使用了 HTML5 历史模式，服务器需要正确配置以处理路由。例如，在 Nginx 中，try_files 配置不正确可能导致 404 错误。确保 try_files $uri $uri/ /index.html 配置正确，并且在 Apache 中，AllowOverride All 配置已启用，以便正确处理 .htaccess 文件中的路由规则（如果有）。
    • 文件不存在：检查请求的文件是否确实存在于服务器上。如果在应用中引用了一些动态生成的文件或者资源，确保这些文件在部署过程中被正确生成和上传。

7.3 跨域问题

  • 可能原因：
    • 服务器配置：如果 Angular 应用向后端 API 发送请求，而 API 部署在不同的域名或端口上，可能会出现跨域问题。在服务器端，需要配置 CORS（跨域资源共享）。例如，在 Node.js 后端应用中，可以使用 cors 中间件来解决这个问题。在 Nginx 中，可以通过添加以下配置来允许跨域请求：
location /api { # 假设 API 路径为 /api
    add_header 'Access - Control - Allow - Origin' '*';
    add_header 'Access - Control - Allow - Methods' 'GET, POST, OPTIONS';
    add_header 'Access - Control - Allow - Headers' 'DNT,X - User - Token,X - CSRF - Token,Keep - Alive,User - Agent,X - Requested - With,If - Modified - Since,Cache - Control,Content - Type,Content - Range,Range';

    if ($request_method = 'OPTIONS') {
        return 204;
    }
}
  • 前端配置：在 Angular 应用中，可以使用 HttpClient 模块的 withCredentials 选项来处理跨域请求中的认证信息。例如：
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
    providedIn: 'root'
})
export class ApiService {
    constructor(private http: HttpClient) {}

    public getData() {
        return this.http.get('http://api.example.com/data', { withCredentials: true });
    }
}

7.4 部署后样式错乱

  • 可能原因：
    • 文件路径问题：检查 CSS 文件中的资源引用路径是否正确。如果在构建过程中没有正确处理相对路径，可能导致样式文件无法正确加载图片、字体等资源。可以在构建配置中指定正确的 assets 路径，例如在 angular.json 文件中：
{
    "architect": {
        "build": {
            "assets": [
                "src/favicon.ico",
                "src/assets",
                {
                    "glob": "**/*",
                    "input": "./node_modules/@angular/material/prebuilt - themes/",
                    "output": "/prebuilt - themes/"
                }
            ],
            // 其他配置...
        }
    }
}
  • 缓存问题：同样，浏览器缓存可能导致样式错乱。尝试强制刷新浏览器或者清除浏览器缓存。另外，在部署新的样式文件时，可以在文件名中添加版本号或时间戳，例如 styles.v1.css，这样浏览器会将其视为新文件，而不会使用旧的缓存版本。

通过以上详细的步骤和常见问题解决方法，你应该能够顺利地将 Angular 应用部署到常见的服务器上，并使其稳定运行。在部署过程中，仔细检查每一个步骤的配置，确保服务器环境、应用配置以及文件上传等环节都没有问题。如果遇到其他问题，可以参考相关技术文档或者社区论坛，寻求解决方案。