nginx部署angular

官方部署教程

本文将angular官网的示例项目 heroes(英雄指南) 部署到nginx.

使用angular cli编译项目

ng build

执行完成后会生成一个 dist 目录.

服务器配置

首先, 把刚才dist目录下的文件复制到服务器上的某个位置, 一会再nginx的配置文件中要用到;

我把它放到了: /root/Web/Site/angular-heroes/angular-heroes-front

假设已经安装好nginx了;

在 /etc/nginx/conf.d/ 目录下新建angular-heroes.conf 文件;

在该文件中配置虚拟服务器:

server {
    listen       5001;
    access_log /var/log/nginx/angular-heroes.log  main;
    #默认请求
    location / {
          root   /root/Web/Site/angular-heroes/angular-heroes-front;      #定义服务器的默认网站根目录位置
          index index.html index.htm;   #定义首页索引文件的名称

          fastcgi_param  SCRIPT_FILENAME  $document_root/$fastcgi_script_name;
          include /etc/nginx/fastcgi_params;
    }

    # 配置404页面为angular编译生成的index.html

    error_page  404  /index.html;

    location = /index.html {

    root /root/Web/Site/angular-heroes/angular-heroes-front;
    }

}

主要修改root属性, 改为你存放网站的目录, 就是刚才生成的dist文件夹下的内容复制到服务器的位置;

errorpage属性也是必要的, 如果没有的话, 你每次用浏览器刷新网站都会出现404页面;