Nginx中部署Angular项目遇到的坑巨坑

好的！下面是Nginx中部署Angular项目的完整攻略，包含两条示例说明:

准备工作

1. 安装Node.js和Angular CLI工具

确保你的电脑中已经安装了Node.js环境和Angular CLI。如果没有安装，可以参考以下链接进行安装：

Node.js下载链接：https://nodejs.org/en/download/

Angular CLI安装命令：npm install -g @angular/cli

1. 创建Angular项目

使用下面的命令创建一个新的Angular项目：

ng new my-angular-app

注意：这里的 my-angular-app 是你要创建的项目的名称，可以自己定义。

1. 构建Angular项目

使用以下命令构建上一步中创建的Angular项目：

ng build --prod

将在项目的dist目录下生成一个打包好的项目，后面需要用到。

Nginx部署Angular项目

1. 安装Nginx

首先需要安装Nginx，具体安装方法可以参考官方文档：http://nginx.org/en/docs/installation.html

1. 配置Nginx

在Nginx的配置文件（通常是在 /etc/nginx/nginx.conf）中添加以下内容：

server {
    listen       80;
    server_name  localhost;
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    location / {
        try_files $uri $uri/ /index.html;
    }
}

其中，

• listen：指定Nginx监听的端口号；
• server_name：指定访问该站点的域名；
• root：指定网站根目录的物理路径；

• try_files：Angular使用HashLocationStrategy作为路由模式，因此需要在Nginx中配置$uri $uri/ /index.html，以确保在请求不存在的URL时，仍然返回正确的内容。

• 拷贝打包好的Angular项目

将上面构建好的Angular项目dist目录下的文件拷贝到Nginx配置文件中root指定的路径下（在本示例中是 /usr/share/nginx/html）。可以使用命令：

cp -r dist/* /usr/share/nginx/html/

注意：这里是将Angular打包后生成的静态文件拷贝到Nginx的html目录下。

1. 启动Nginx

使用以下命令启动Nginx：

sudo service nginx start

至此，Angular项目已经成功部署到Nginx服务器上了。

示例说明

部署后的访问

假设在本地启动一个Angular项目，访问的URL为 http://localhost:4200。

在Nginx服务器上部署完成后，可以通过该服务器的IP地址访问部署好的Angular项目，例如 http://192.168.0.100:80。

Nginx配置解释

在示例中的Nginx配置文件中，有几个需要说明的地方：

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

try_files指令会尝试将请求的文件放在$uri和$uri/两个路径中查找，如果都找不到，则访问/index.html。

这里是为了解决Angular使用HashLocationStrategy作为路由模式时替换了URL路径之后不能正常访问的问题。