面试题：Angular应用部署到Nginx服务器的基本步骤

Question

请详细描述将Angular应用部署到Nginx服务器的基本步骤，包括如何构建Angular项目以及Nginx相关配置的修改。

Answer 1

构建Angular项目

1. 安装依赖：确保本地环境安装了Node.js和npm（或yarn）。进入Angular项目目录，运行 npm install 或 yarn install 安装项目所需的依赖包。
2. 构建项目：运行构建命令，在项目根目录执行 ng build 。该命令会在项目目录下生成一个 dist 文件夹，里面包含编译后的静态文件，这些文件就是要部署到Nginx服务器上的内容。可以通过传递参数来自定义构建输出，例如 ng build --prod 用于生产环境构建，会启用一些优化，如压缩代码等。

部署到Nginx服务器

1. 将构建产物传输到服务器：使用工具如 scp （Linux/macOS）或 WinSCP （Windows），将 dist 目录下的所有文件上传到Nginx服务器指定目录，例如 /var/www/html/your - angular - app 。
2. 配置Nginx：
   • 找到Nginx配置文件：通常在 /etc/nginx/nginx.conf 或 /etc/nginx/sites - available/ 目录下（具体位置可能因操作系统和Nginx安装方式而异）。
   • 创建或修改配置文件：假设在 /etc/nginx/sites - available/your - angular - app.conf 创建新配置文件。内容大致如下：

server {
    listen 80;
    server_name your_domain.com; # 替换为你的域名或服务器IP

    root /var/www/html/your - angular - app; # 指向你上传的Angular项目目录
    index index.html;

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

上述配置中，listen 指令指定监听端口为80；server_name 设置服务器域名或IP；root 指向Angular项目构建产物所在目录；location / 块中的 try_files 指令确保所有请求都能正确处理，在找不到对应静态文件时，返回 index.html ，这对于单页应用（SPA）很重要，因为SPA的路由是在前端处理的。

• 启用配置：如果配置文件在 sites - available 目录，需要在 sites - enabled 目录创建一个符号链接，例如 ln -s /etc/nginx/sites - available/your - angular - app.conf /etc/nginx/sites - enabled/ 。

3. 重启Nginx服务：运行 sudo systemctl restart nginx （适用于systemd管理的系统），使新的配置生效。此时，访问服务器域名或IP，应该能看到部署的Angular应用。