Angular部署到服务器的详细步骤

环境准备

在将 Angular 应用部署到服务器之前，首先要确保开发环境和目标服务器环境满足一定的要求。

本地开发环境

1. 安装 Node.js：Angular 依赖 Node.js 运行时环境，你可以从 Node.js 官方网站 下载并安装适合你操作系统的版本。安装完成后，通过在命令行输入 node -v 和 npm -v 来检查 Node.js 和 npm（Node 包管理器）是否安装成功。如果成功安装，会显示相应的版本号。

node -v
npm -v

2. 安装 Angular CLI：Angular CLI 是 Angular 应用开发的重要工具，用于创建项目、生成组件、服务等。使用 npm 全局安装 Angular CLI，命令如下：

npm install -g @angular/cli

安装完成后，通过 ng --version 命令检查 Angular CLI 是否安装成功并查看其版本。

目标服务器环境

1. Web 服务器：常见的选择有 Apache、Nginx 等。以 Nginx 为例，在大多数 Linux 发行版上，可以通过包管理器安装。例如在 Ubuntu 上：

sudo apt - get update
sudo apt - get install nginx

安装完成后，Nginx 服务会自动启动。可以通过浏览器访问服务器的 IP 地址，如果看到 Nginx 的默认欢迎页面，说明安装成功。

2. 服务器操作系统：通常选择 Linux 系统，如 Ubuntu、CentOS 等。不同的系统在安装软件包和配置方面可能略有差异，但基本的原理是相通的。

构建 Angular 应用

在将 Angular 应用部署到服务器之前，需要先在本地构建生产版本。

1. 进入项目目录：打开命令行，导航到你的 Angular 项目的根目录。例如，如果你的项目位于 ~/my - angular - project 目录下，使用以下命令进入：

cd ~/my - angular - project

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

ng build --prod

--prod 标志用于启用生产模式构建，这会对代码进行优化，包括压缩、移除未使用的代码等，以减小输出文件的大小，提高应用的加载速度。构建完成后，在项目的 dist 目录下会生成生产版本的文件。

部署到服务器

通过 SFTP 上传文件

1. 安装 SFTP 客户端：在本地机器上安装 SFTP 客户端，如 FileZilla。这是一款免费且功能强大的 SFTP 客户端软件，支持 Windows、Mac 和 Linux 系统。
2. 连接到服务器：打开 FileZilla，在“站点管理器”中添加一个新站点。填写服务器的主机名（IP 地址）、用户名、密码等信息。连接类型选择 SFTP。点击“连接”按钮连接到服务器。
3. 上传文件：在 FileZilla 界面中，左侧显示本地文件，右侧显示服务器文件。导航到本地 Angular 项目的 dist 目录，选中所有文件，然后右键点击选择“上传”。等待文件上传完成，这些文件将被上传到服务器指定的目录。

使用 rsync 同步文件

1. 安装 rsync：如果本地机器和服务器都支持 rsync（大多数 Linux 系统默认安装或可通过包管理器安装），可以使用 rsync 命令进行文件同步。在本地机器上，如果是 Ubuntu 系统，使用以下命令安装：

sudo apt - get install rsync

2. 同步文件：假设服务器的用户名是 user，IP 地址是 192.168.1.100，服务器上的目标目录是 /var/www/html/my - angular - app，本地 Angular 项目的 dist 目录路径是 ~/my - angular - project/dist，使用以下 rsync 命令进行同步：

rsync -avz ~/my - angular - project/dist/ user@192.168.1.100:/var/www/html/my - angular - app

-a 选项表示以归档模式传输，保留文件的所有属性；-v 表示详细输出，显示同步过程的信息；-z 表示在传输过程中压缩数据，减少传输的数据量。

配置 Web 服务器（以 Nginx 为例）

1. 创建 Nginx 配置文件：在 Nginx 的配置目录中创建一个新的配置文件，例如 /etc/nginx/sites - available/my - angular - app。使用文本编辑器（如 vim）打开该文件：

sudo vim /etc/nginx/sites - available/my - angular - app

2. 配置 Nginx：在打开的文件中，添加以下内容：

server {
    listen 80;
    server_name your_domain.com www.your_domain.com;

    root /var/www/html/my - angular - app;
    index index.html;

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

上述配置中：

• listen 80 表示监听 80 端口，即通过 HTTP 访问。
• server_name 配置你的域名，如果有多个域名可以用空格隔开。
• root 指向你上传的 Angular 应用的目录。
• index 指定默认的索引文件为 index.html。
• location / 块中的 try_files 指令用于处理 Angular 的路由。当请求的资源不存在时，会尝试返回 index.html，这样可以确保 Angular 的路由正常工作。

3. 启用配置文件：创建好配置文件后，需要将其链接到 sites - enabled 目录，以启用该配置。使用以下命令：

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

4. 检查 Nginx 配置并重启服务：在重启 Nginx 服务之前，先检查配置文件是否有语法错误。使用以下命令：

sudo nginx -t

如果配置文件没有错误，会显示“Syntax OK”。然后重启 Nginx 服务，使新的配置生效：

sudo systemctl restart nginx

处理 HTTPS

1. 获取 SSL 证书：可以从证书颁发机构（CA）购买 SSL 证书，也可以使用 Let's Encrypt 等免费的证书颁发机构。以 Let's Encrypt 为例，在 Ubuntu 上可以使用 Certbot 工具来获取证书。首先安装 Certbot：

sudo apt - get update
sudo apt - get install certbot python3 - certbot - nginx

2. 获取并配置证书：运行以下命令来获取证书并自动配置 Nginx：

sudo certbot --nginx -d your_domain.com -d www.your_domain.com

Certbot 会自动检测 Nginx 的配置，并为你的域名申请证书，同时更新 Nginx 配置以启用 HTTPS。

3. 强制 HTTP 重定向到 HTTPS：为了确保所有的 HTTP 请求都被重定向到 HTTPS，可以在 Nginx 配置文件中添加以下内容：

server {
    listen 80;
    server_name your_domain.com www.your_domain.com;
    return 301 https://$server_name$request_uri;
}

这样，当用户通过 HTTP 访问你的网站时，会被自动重定向到 HTTPS 版本。

部署过程中的常见问题及解决方法

1. 404 错误：在访问 Angular 应用时，如果出现 404 错误，可能是 Nginx 的 try_files 配置不正确。确保 try_files 指令正确指向 index.html。另外，检查文件是否成功上传到服务器的指定目录，以及文件权限是否正确。可以通过在服务器上直接访问 index.html 文件来验证其是否存在且可访问。
2. 白屏问题：如果页面出现白屏，可能是资源文件（如 JavaScript、CSS）没有正确加载。检查浏览器的开发者工具中的“网络”选项卡，查看资源文件的请求是否成功。可能是文件路径配置错误，或者服务器配置中没有正确设置静态文件的访问规则。在 Nginx 配置中，可以添加以下内容来确保静态文件能够正确缓存：

location ~ \.(js|css|html|png|jpg|gif)$ {
    expires 30d;
    access_log off;
}

3. 跨域问题：如果 Angular 应用在与后端 API 交互时出现跨域问题，可以在后端服务器上配置 CORS（跨域资源共享）。以 Node.js 为例，可以使用 cors 中间件。首先安装 cors：

npm install cors

然后在 Node.js 应用中添加以下代码：

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());

// 其他路由和中间件配置

在 Nginx 中，也可以通过添加响应头来解决跨域问题。在 server 块中添加以下内容：

add_header Access - Control - Allow - Origin *;
add_header Access - Control - Allow - Methods 'GET, POST, PUT, DELETE, OPTIONS';
add_header Access - Control - Allow - Headers 'DNT,X - Requested - With,Keep - Alive,User - Agent,X - Moible - Browser,Content - Type,Authorization';

持续集成与部署（CI/CD）

1. 选择 CI/CD 工具：常见的 CI/CD 工具如 Jenkins、GitLab CI/CD、GitHub Actions 等。以 GitHub Actions 为例，它与 GitHub 紧密集成，使用起来相对方便。
2. 配置 GitHub Actions：在 Angular 项目的根目录下创建 .github/workflows 目录，然后在该目录下创建一个 YAML 文件，例如 deploy.yml。以下是一个基本的部署示例：

name: Angular Deployment
on:
  push:
    branches:
      - main
jobs:
  build - and - deploy:
    runs - on: ubuntu - latest
    steps:
      - name: Checkout
        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 Angular app
        run: ng build --prod
      - name: Deploy to server
        uses: easingthemes/ssh - deploy@v21.10.0
        env:
          SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
          ARGS: '-avz --delete'
          SOURCE: 'dist/'
          REMOTE_HOST: ${{ secrets.REMOTE_HOST }}
          REMOTE_USER: ${{ secrets.REMOTE_USER }}
          TARGET: '/var/www/html/my - angular - app'

上述配置中：

• name 定义工作流的名称。
• on.push.branches 表示当 main 分支有推送时触发该工作流。
• jobs.build - and - deploy 定义了构建和部署的任务。
• steps 中的步骤依次为检出代码、设置 Node.js 环境、安装依赖、构建 Angular 应用，最后通过 SSH 部署到服务器。需要在 GitHub 仓库的设置中添加 SSH_PRIVATE_KEY、REMOTE_HOST、REMOTE_USER 等机密信息。

3. 触发 CI/CD 流程：每次在 main 分支推送代码时，GitHub Actions 会自动触发构建和部署流程，将最新的 Angular 应用部署到服务器上。

优化部署性能

1. 代码压缩与优化：在构建 Angular 应用时，使用 --prod 标志已经进行了一定程度的代码优化。可以进一步通过配置 terser 等工具来优化 JavaScript 代码的压缩。在 angular.json 文件中，可以找到 architect.build.optimizer 选项，确保其为 true。同时，可以配置 terser 的其他选项，如 terserOptions，来进一步调整压缩的行为。
2. 图片优化：对于 Angular 应用中的图片，可以使用工具如 ImageOptim、Optipng 等对图片进行压缩，减小图片文件的大小，提高加载速度。在构建过程中，可以集成这些工具，自动对图片进行优化。
3. 缓存策略：在 Nginx 配置中，合理设置缓存策略可以显著提高应用的性能。除了前面提到的对静态资源设置缓存时间外，还可以根据实际情况设置不同类型资源的缓存策略。例如，对于不经常变化的 CSS 和 JavaScript 文件，可以设置较长的缓存时间；对于可能经常变化的图片，可以设置相对较短的缓存时间。

location ~ \.js$ {
    expires 365d;
    access_log off;
}
location ~ \.css$ {
    expires 365d;
    access_log off;
}
location ~ \.(png|jpg|gif)$ {
    expires 7d;
    access_log off;
}

4. 负载均衡：如果应用的访问量较大，可以考虑使用负载均衡器，如 Nginx 本身的负载均衡功能或专门的负载均衡工具如 HAProxy。通过负载均衡，可以将请求均匀分配到多个服务器实例上，提高应用的可用性和性能。在 Nginx 中，可以通过 upstream 指令来配置后端服务器池，并在 server 块中使用 proxy_pass 指向 upstream。

upstream my - angular - app - backend {
    server 192.168.1.101:8080;
    server 192.168.1.102:8080;
}
server {
    listen 80;
    server_name your_domain.com www.your_domain.com;

    location /api/ {
        proxy_pass http://my - angular - app - backend/;
    }
    // 其他配置
}

多环境部署

在实际开发中，通常会有开发、测试、生产等多个环境。可以通过 Angular CLI 的环境配置来轻松实现多环境部署。

1. 创建环境文件：在 src/environments 目录下，已经有 environment.ts 和 environment.prod.ts 文件，分别用于开发环境和生产环境。如果需要添加更多环境，如测试环境，可以复制 environment.ts 文件，并重命名为 environment.test.ts。
2. 配置环境变量：在各个环境文件中，可以定义不同的环境变量。例如，在 environment.test.ts 中，可以设置 API 的地址为测试环境的地址：

export const environment = {
    production: false,
    apiUrl: 'http://test - api.example.com'
};

3. 构建不同环境的应用：使用 Angular CLI 构建不同环境的应用时，可以通过 --configuration 选项指定环境。例如，构建测试环境的应用：

ng build --prod --configuration=test

4. 部署到不同环境的服务器：根据不同环境的配置和构建结果，将应用部署到相应的开发、测试或生产服务器上。可以通过 CI/CD 流程来自动化不同环境的部署，通过设置不同的部署目标和环境变量来实现。

总结部署过程中的要点

1. 环境一致性：确保本地开发环境、构建环境和目标服务器环境的一致性，包括 Node.js 版本、Angular CLI 版本等。不同的版本可能会导致构建或运行时的问题。
2. 文件权限：在服务器上，确保上传的文件和目录具有正确的权限，以保证 Web 服务器能够正确读取和执行这些文件。通常，Web 服务器运行的用户（如 www - data）需要对相关文件和目录有读取权限。
3. 配置正确性：仔细检查 Nginx 等 Web 服务器的配置文件，确保服务器名称、根目录、路由配置等信息正确无误。一个小的配置错误可能导致应用无法正常访问。
4. 安全设置：在部署过程中，要重视安全设置，如使用 HTTPS 来加密数据传输，设置合理的文件权限避免敏感信息泄露，以及配置防火墙限制不必要的网络访问。

通过以上详细的步骤和注意事项，你应该能够成功地将 Angular 应用部署到服务器上，并进行优化和多环境管理。在实际操作过程中，可能会遇到各种具体的问题，需要根据实际情况进行分析和解决。不断学习和积累经验，能够更好地应对 Angular 应用部署过程中的挑战。