部署 Angular 应用到云服务器的技巧

选择合适的云服务器提供商

在开始部署 Angular 应用之前，首先要选择一个合适的云服务器提供商。目前市面上有许多知名的云服务提供商，如阿里云、腾讯云、AWS（亚马逊云服务）、Azure（微软云服务）等。每个提供商都有其特点和优势，以下是选择云服务器提供商时需要考虑的几个关键因素：

性能与可靠性

计算能力：不同的云服务器提供多种规格的实例，CPU、内存等配置各异。对于 Angular 应用，若应用较为复杂、用户量较大，建议选择计算能力较强的实例，以确保应用能够快速响应。例如，阿里云的 ECS 实例提供了从入门级到高性能级别的多种规格，如 ecs.t6-c1m1.large 适用于一般的 Web 应用开发与测试场景，而 ecs.g6.large 则具备更高的 CPU 性能和更大的内存，适合对性能要求较高的生产环境。
存储性能：云服务器的存储类型也会影响应用性能，如普通云盘、SSD 云盘等。SSD 云盘具有更高的 I/O 性能，能加快 Angular 应用静态资源的读取速度。以腾讯云为例，SSD 云盘提供了高达 3000MB/s 的顺序读带宽和 2000MB/s 的顺序写带宽，大大提升了数据的读写效率。
网络稳定性：网络延迟和带宽直接影响用户访问 Angular 应用的体验。优质的云服务提供商通常会提供稳定且高速的网络环境，如 AWS 在全球各地的数据中心通过高速骨干网络连接，确保用户能够快速访问应用。选择具有良好网络基础设施和多节点覆盖的云服务提供商，可以有效降低网络问题对应用的影响。

价格与成本

定价模式：云服务器的定价模式多样，常见的有包年包月、按量计费等。包年包月适合长期稳定运行的应用，价格相对更优惠；按量计费则灵活性较高，根据实际使用资源量计费，适合短期测试或流量波动较大的应用。例如，Azure 的虚拟机可以按小时计费，对于开发测试阶段的 Angular 应用来说，可以根据实际使用时长灵活控制成本。
成本优化：一些云服务提供商还提供成本优化工具和策略。例如，阿里云的成本分析功能可以帮助用户详细了解各项云服务的费用使用情况，以便进行针对性的优化。用户还可以通过预留实例、使用竞价实例等方式降低成本。竞价实例是云服务提供商以较低的价格提供的闲置资源，但可能会因资源回收而中断，适合对稳定性要求不高的开发测试场景。

易用性与支持

管理控制台：直观、易用的管理控制台可以大大简化云服务器的配置和管理操作。例如，腾讯云的控制台界面简洁明了，用户可以轻松创建、启动、停止云服务器实例，管理网络配置、安全组等。通过控制台，用户还可以方便地查看服务器的监控指标，如 CPU 使用率、内存使用率、网络流量等，及时发现并解决潜在问题。
技术支持：强大的技术支持团队是选择云服务提供商的重要因素之一。当在部署 Angular 应用过程中遇到问题时，能够及时获得专业的技术支持至关重要。大多数主流云服务提供商都提供 7×24 小时的技术支持，包括在线客服、电话支持、技术论坛等多种渠道。AWS 提供了丰富的文档资源和活跃的开发者社区，用户可以在社区中提问、分享经验，获取解决问题的思路和方法。

准备云服务器环境

在选定云服务器提供商并购买实例后，需要对云服务器进行环境准备，以确保能够顺利部署 Angular 应用。以下以常见的 Linux 系统（如 CentOS 7）为例，介绍云服务器环境的准备步骤：

安装必要的软件包

更新系统软件包：在开始安装其他软件之前，首先要确保系统软件包是最新的。通过以下命令更新 CentOS 7 系统：

sudo yum update -y

此命令会自动下载并安装系统的最新更新，包括安全补丁和软件包升级，保证系统的安全性和稳定性。 2. 安装 Node.js：Angular 应用基于 Node.js 运行，因此需要在云服务器上安装 Node.js。可以通过官方仓库安装最新版本的 Node.js。首先，添加 Node.js 的官方 Yum 仓库：

curl -sL https://rpm.nodesource.com/setup_14.x | sudo bash -

然后，使用 Yum 安装 Node.js：

sudo yum install -y nodejs

安装完成后，可以通过以下命令检查 Node.js 和 npm（Node.js 的包管理器）的版本：

node -v
npm -v

安装 npm 包管理器：npm 随 Node.js 一起安装，但为了确保其版本是最新的，可以使用以下命令更新 npm：

sudo npm install -g npm

安装 Angular CLI：Angular CLI 是 Angular 应用开发和部署的重要工具。使用 npm 全局安装 Angular CLI：

sudo npm install -g @angular/cli

安装完成后，可以通过以下命令检查 Angular CLI 的版本：

ng version

配置服务器防火墙

云服务器默认会启用防火墙，以保护服务器的安全。在部署 Angular 应用时，需要配置防火墙允许相关端口的访问。常见的 Web 应用端口为 80（HTTP）和 443（HTTPS）。以下以 CentOS 7 的防火墙（firewalld）为例，介绍如何配置防火墙规则：

开放 HTTP 端口（80 端口）：

sudo firewall-cmd --zone=public --add-port=80/tcp --permanent
sudo firewall-cmd --reload

第一条命令将 80 端口添加到 public 区域，并设置为永久生效；第二条命令重新加载防火墙配置，使新规则生效。 2. 开放 HTTPS 端口（443 端口）：如果应用需要使用 HTTPS 协议，同样需要开放 443 端口：

sudo firewall-cmd --zone=public --add-port=443/tcp --permanent
sudo firewall-cmd --reload

其他必要端口：如果 Angular 应用还依赖于其他服务，如后端 API 服务运行在特定端口上，也需要开放相应的端口。例如，后端 API 服务运行在 3000 端口：

sudo firewall-cmd --zone=public --add-port=3000/tcp --permanent
sudo firewall-cmd --reload

配置域名（可选）

如果希望通过域名访问 Angular 应用，需要进行域名配置。域名配置主要包括以下几个步骤：

购买域名：可以通过域名注册商（如阿里云万网、腾讯云域名注册等）购买一个合适的域名。购买完成后，在域名管理控制台中可以看到域名的相关信息。
域名解析：在域名管理控制台中，进行域名解析设置。将域名解析到云服务器的公网 IP 地址。常见的解析记录类型为 A 记录，主机记录可以设置为 @（代表根域名）或 www（代表 www 子域名），记录值填写云服务器的公网 IP 地址。例如，在阿里云域名解析控制台中，添加一条 A 记录，主机记录为 @，记录值为云服务器的公网 IP 地址，TTL（生存时间）可以设置为默认值（如 600 秒）。
SSL 证书配置（可选，用于 HTTPS）：如果希望使用 HTTPS 协议访问应用，需要为域名配置 SSL 证书。可以通过云服务提供商提供的 SSL 证书服务（如阿里云 SSL 证书服务、腾讯云 SSL 证书服务）申请免费或付费的 SSL 证书。申请完成后，按照证书提供商的指引，将 SSL 证书部署到云服务器上。以 Nginx 服务器为例，将证书文件（.crt 和.key 文件）放置到指定目录，并在 Nginx 配置文件中添加 SSL 相关配置：

server {
    listen 443 ssl;
    server_name your_domain.com;

    ssl_certificate /path/to/your_domain.com.crt;
    ssl_certificate_key /path/to/your_domain.com.key;

    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!MD5;

    location / {
        # Angular 应用的相关配置
    }
}

构建 Angular 应用

在将 Angular 应用部署到云服务器之前，需要在本地开发环境中对应用进行构建，生成用于生产环境的静态文件。以下是构建 Angular 应用的步骤：

安装项目依赖

在 Angular 项目的根目录下，打开终端并执行以下命令安装项目所需的依赖包：

npm install

此命令会读取项目的 package.json 文件，下载并安装其中列出的所有依赖包。

构建生产版本

使用 Angular CLI 构建生产版本的 Angular 应用。在项目根目录下执行以下命令：

ng build --prod

--prod 参数表示构建生产版本，该版本会对代码进行压缩、优化等处理，以减小文件体积，提高应用加载速度。构建完成后，会在项目的 dist 目录下生成生产环境的静态文件。例如，如果项目名称为 my - app，则生成的静态文件位于 dist/my - app 目录中，其中包含 index.html、JavaScript 文件、CSS 文件、图片等资源。

优化构建配置（可选）

代码分割：Angular CLI 支持代码分割，可以将应用的代码拆分成多个较小的块，按需加载，提高应用的初始加载速度。可以通过在 angular.json 文件中配置 architect.build.splitChunks 选项来实现代码分割。例如：

{
    "architect": {
        "build": {
            "splitChunks": {
                "cacheGroups": {
                    "vendor": {
                        "name": "vendor",
                        "test": /[\\/]node_modules[\\/]/,
                        "chunks": "all"
                    }
                }
            },
            // 其他构建配置...
        }
    }
}

上述配置将来自 node_modules 的依赖代码提取到一个单独的 vendor 文件中，这样在应用加载时，如果 vendor 文件已经缓存，则可以直接使用缓存，加快加载速度。 2. 启用摇树优化（Tree - shaking）：摇树优化是一种去除未使用代码的技术，能够进一步减小生产包的体积。Angular CLI 在生产构建时默认启用摇树优化。但为了确保摇树优化能够正常工作，需要注意以下几点： - 使用 ES6 模块语法导入和导出代码，避免使用 CommonJS 模块语法。例如，使用 import { Component } from '@angular/core'; 而不是 const Component = require('@angular/core').Component; - 避免在代码中使用动态导入（如 import('./module').then(module => { /* 使用 module */ });），因为摇树优化难以分析动态导入的代码。

部署 Angular 应用到云服务器

在完成云服务器环境准备和 Angular 应用构建后，接下来可以将构建好的 Angular 应用部署到云服务器上。以下介绍几种常见的部署方式：

使用 FTP 或 SFTP 上传文件

安装 FTP 或 SFTP 客户端：在本地开发环境中，安装一个 FTP 或 SFTP 客户端工具，如 FileZilla（开源免费）、WinSCP（适用于 Windows）等。
连接云服务器：打开 FTP 或 SFTP 客户端，配置连接信息，包括云服务器的公网 IP 地址、用户名、密码等。对于 SFTP 连接，还需要指定 SSH 端口（默认为 22）。例如，在 FileZilla 中，填写主机地址为云服务器的公网 IP 地址，用户名和密码为云服务器的登录凭证，端口为 22（SFTP）或 21（FTP）。
上传文件：在本地开发环境中找到 Angular 应用的 dist 目录，将其中的所有文件和文件夹上传到云服务器的指定目录。通常，可以将文件上传到 Web 服务器的根目录，如 /var/www/html（对于 Apache 服务器）或 /usr/share/nginx/html（对于 Nginx 服务器）。在 FileZilla 中，将本地 dist 目录中的文件拖放到远程服务器的目标目录即可完成上传。

使用 Git 进行部署

初始化 Git 仓库（如果尚未初始化）：在 Angular 项目的根目录下，初始化一个 Git 仓库：

git init

添加文件并提交：将项目中的所有文件添加到 Git 仓库，并提交初始版本：

git add.
git commit -m "Initial commit"

在云服务器上设置 Git 仓库：在云服务器上创建一个空的 Git 仓库。例如，在 /var/www/my - app - git 目录下创建一个裸仓库（bare repository）：

mkdir /var/www/my - app - git
cd /var/www/my - app - git
git init --bare

配置 Git 远程仓库：在本地 Angular 项目中，添加云服务器上的 Git 仓库作为远程仓库：

git remote add origin ssh://username@server_ip:/var/www/my - app - git

其中，username 为云服务器的登录用户名，server_ip 为云服务器的公网 IP 地址。 5. 推送代码到云服务器：将本地的代码推送到云服务器的 Git 仓库：

git push -u origin master

部署脚本（可选）：为了实现自动化部署，可以在云服务器上编写一个部署脚本。例如，创建一个 deploy.sh 文件，内容如下：

#!/bin/bash
cd /var/www/my - app - git
git pull origin master
rm -rf /var/www/html/*
cp -r /var/www/my - app - git/dist/my - app/* /var/www/html/

上述脚本首先切换到 Git 仓库目录，拉取最新的代码，然后清空 Web 服务器根目录（这里以 /var/www/html 为例），最后将 dist 目录中的文件复制到 Web 服务器根目录。需要注意的是，要给 deploy.sh 文件添加可执行权限：

chmod +x deploy.sh

以后每次在本地更新代码并推送到云服务器后，只需在云服务器上执行 ./deploy.sh 脚本即可完成应用的部署更新。

使用 CI/CD 工具进行自动化部署

选择 CI/CD 工具：常见的 CI/CD 工具包括 Jenkins、GitLab CI/CD、GitHub Actions 等。这里以 GitHub Actions 为例进行介绍。
配置 GitHub Actions：在 Angular 项目的 .github/workflows 目录下创建一个 YAML 文件，如 deploy.yml。以下是一个简单的 GitHub Actions 配置示例，用于将 Angular 应用部署到云服务器：

name: Deploy Angular App
on:
  push:
    branches:
      - master
jobs:
  build - and - deploy:
    runs - on: ubuntu - latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2
      - name: Set up Node.js
        uses: actions/setup - node@v2
        with:
          node - version: '14'
      - name: Install dependencies
        run: npm install
      - name: Build app
        run: ng build --prod
      - name: Deploy to server
        uses: appleboy/scp - action@v0.1.4
        with:
          host: ${{ secrets.SERVER_IP }}
          username: ${{ secrets.SERVER_USERNAME }}
          key: ${{ secrets.SERVER_PRIVATE_KEY }}
          source: './dist/my - app'
          target: '/var/www/html'

上述配置文件定义了一个名为 Deploy Angular App 的工作流，当 master 分支有推送操作时触发。工作流包含以下几个步骤： - Checkout code：检出代码到 GitHub Actions 的运行环境。 - Set up Node.js：设置 Node.js 环境，版本为 14。 - Install dependencies：安装项目依赖。 - Build app：构建生产版本的 Angular 应用。 - Deploy to server：使用 scp - action 将构建好的 dist/my - app 目录中的文件上传到云服务器的 /var/www/html 目录。这里的 secrets.SERVER_IP、secrets.SERVER_USERNAME 和 secrets.SERVER_PRIVATE_KEY 是在 GitHub 仓库的设置中配置的机密信息，分别表示云服务器的 IP 地址、登录用户名和 SSH 私钥。 3. 配置机密信息：在 GitHub 仓库的设置中，找到 Secrets 选项，添加 SERVER_IP、SERVER_USERNAME 和 SERVER_PRIVATE_KEY 等机密信息。其中，SERVER_PRIVATE_KEY 可以通过在本地生成 SSH 密钥对（使用 ssh - keygen 命令），然后将私钥内容添加到 GitHub 机密中。公钥则需要添加到云服务器的 ~/.ssh/authorized_keys 文件中，以实现免密码登录。

配置 Web 服务器

在将 Angular 应用部署到云服务器后，还需要配置 Web 服务器，以便正确地提供应用服务。以下以 Nginx 和 Apache 为例，介绍如何配置 Web 服务器：

配置 Nginx

安装 Nginx：在 CentOS 7 上，可以使用以下命令安装 Nginx：

sudo yum install -y nginx

创建 Nginx 配置文件：在 /etc/nginx/conf.d 目录下创建一个新的配置文件，如 my - app.conf：

sudo vi /etc/nginx/conf.d/my - app.conf

配置 Nginx 服务器块：在 my - app.conf 文件中添加以下内容：

server {
    listen 80;
    server_name your_domain.com;

    root /var/www/html;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

上述配置中，listen 80 表示监听 80 端口，server_name your_domain.com 替换为实际的域名。root /var/www/html 表示 Web 服务器的根目录为 /var/www/html，即 Angular 应用的静态文件所在目录。location / 块中的 try_files 指令用于处理 Angular 应用的路由。当用户请求一个不存在的静态文件时，Nginx 会尝试将请求重定向到 index.html，以便 Angular 应用的路由系统能够处理该请求。 4. 检查配置并重启 Nginx：配置完成后，检查 Nginx 配置文件的语法是否正确：

sudo nginx -t

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

sudo systemctl restart nginx

配置 Apache

安装 Apache：在 CentOS 7 上，使用以下命令安装 Apache：

sudo yum install -y httpd

创建 Apache 虚拟主机配置文件：在 /etc/httpd/conf.d 目录下创建一个新的虚拟主机配置文件，如 my - app.conf：

sudo vi /etc/httpd/conf.d/my - app.conf

配置 Apache 虚拟主机：在 my - app.conf 文件中添加以下内容：

<VirtualHost *:80>
    ServerName your_domain.com
    DocumentRoot /var/www/html

    <Directory /var/www/html>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>

    ErrorLog /var/log/httpd/my - app.error.log
    CustomLog /var/log/httpd/my - app.access.log combined
</VirtualHost>

上述配置中，ServerName your_domain.com 替换为实际的域名。DocumentRoot /var/www/html 表示 Angular 应用的静态文件所在目录。<Directory> 块用于设置对目录的访问权限，AllowOverride All 允许使用 .htaccess 文件进行配置。 4. 检查配置并重启 Apache：配置完成后，检查 Apache 配置文件的语法是否正确：

sudo httpd -t

如果语法检查通过，重启 Apache 服务使配置生效：

sudo systemctl restart httpd

常见问题与解决方法

在部署 Angular 应用到云服务器的过程中，可能会遇到一些常见问题。以下是一些常见问题及其解决方法：

应用无法访问

检查网络连接：首先，确保云服务器的网络连接正常，可以通过在本地使用 ping 命令测试云服务器的公网 IP 地址。如果 ping 不通，可能是网络配置问题或云服务器提供商的网络故障。可以联系云服务器提供商的技术支持进行排查。
检查防火墙设置：确认防火墙是否正确配置，允许了应用所需的端口（如 80、443 等）访问。可以重新检查防火墙规则，并使用 sudo firewall - cmd --list - all 命令查看当前防火墙的配置。如果端口未开放，按照前面介绍的方法开放相应端口。
检查 Web 服务器配置：检查 Nginx 或 Apache 的配置文件是否正确，确保 server_name、root 等配置项设置正确。可以通过查看 Web 服务器的日志文件（如 Nginx 的 /var/log/nginx/error.log、Apache 的 /var/log/httpd/error.log）获取更多错误信息，根据错误信息调整配置。

应用加载缓慢

优化资源加载：检查 Angular 应用的静态资源（如 JavaScript、CSS、图片等）是否进行了压缩和优化。可以通过在构建时启用相关优化选项（如摇树优化、代码分割等）来减小文件体积，提高加载速度。同时，确保静态资源的缓存设置合理，对于不经常变化的资源设置较长的缓存时间。
检查服务器性能：查看云服务器的监控指标，如 CPU 使用率、内存使用率、网络带宽等。如果服务器性能不足，可以考虑升级云服务器的配置，选择更高规格的实例。例如，如果 CPU 使用率经常过高，可以选择 CPU 核心数更多的实例；如果网络带宽不足，可以升级网络带宽。
CDN 加速：使用内容分发网络（CDN）来加速静态资源的加载。可以将 Angular 应用的静态资源上传到 CDN 服务提供商（如阿里云 OSS CDN、腾讯云 CDN 等），并在应用中配置使用 CDN 链接。CDN 会根据用户的地理位置缓存和分发资源，大大提高资源的加载速度。

路由问题

HTML5 模式配置：如果 Angular 应用使用了 HTML5 模式的路由，需要确保 Web 服务器进行了正确的配置。对于 Nginx，在 location / 块中添加 try_files $uri $uri/ /index.html; 指令；对于 Apache，需要在 .htaccess 文件中添加以下内容：

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME}!-f
RewriteCond %{REQUEST_FILENAME}!-d
RewriteRule.(*)$ /index.html [L]

路由配置检查：检查 Angular 应用的路由配置是否正确，确保路由路径和组件的映射关系无误。可以通过在浏览器的开发者工具中查看网络请求和控制台输出，排查路由相关的错误。

通过以上步骤和技巧，应该能够顺利地将 Angular 应用部署到云服务器上，并确保应用的正常运行和良好性能。在部署过程中，要注意每个环节的细节，遇到问题时及时排查和解决，以提供高质量的 Web 应用服务。

部署Angular应用到云服务器的技巧