Nginx 中部署 Angular 項目遇到的坑

Nginx 中部署 Angular 項目遇到的坑

巨坑

網上搜索Angular 項目編譯後部署到 Nginx 中的方法，多數文章都介紹了需要在 Nginx 中的配置文件的 location 中特別指定跳轉到首頁來避免刷新導致404的問題，那麼完整的server 代碼是：

server {
    listen       80;
    server_name  192.168.190.131;

    #sendfile on;
    #charset koi8-r;
    access_log  /var/log/nginx/host.access.log  main;

    location / {
      root /chanchaw/app/angular;
      index index.html index.html;
      try_files $uri $uri/ /index.html;
    }

    error_page  404  /index.html;

    location = /index.html {
      root /chanchaw/app/angular;
    }
}

上面的 server_name 後面是 CentOS7.3 的IP地址，後面的 location 中要特別注意：try_files $uri $uri/ /index.html，這裏是防止瀏覽器中刷新導致404，那麼重點來了，部署到Nginx 後瀏覽器測試出現下面的問題：

明明index.html 和 js 文件是在同一個目錄下爲什麼會找不到？chrome 這樣，firefox 也這樣，好吧，換換IE試試吧。

解決

原來chrome 和 firefox 都會自動將 http 轉換爲 https 來發出請求，而自己試驗用的 CentOS 是安裝在虛擬機中的，壓根就沒想過要部署 ssl ，由於 ie 不會轉換協議，所以 ie 上測試是沒問題的。