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路径之后不能正常访问的问题。

相关文章