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頁面;