如何把Angular專案部署到nginx上

一直比較喜歡angular，正巧最近有個項目用到了，所以想和大家來分享下，下面這篇文章主要給大家介紹了關於Angular項目從新建、打包到nginx部署的相關資料，文中通過示例程式碼介紹的非常詳細，需要的朋友可以參考下。

前言

當前，AngularJS作為Javascript的MVC（也有人說是MV*，暫且不糾結這個）框架被廣泛使用，它為更快且更容易開發響應式的Web提供了強大的機制。作為MVC框架，它將Web前端程式碼分成三個元件Model，View和Controller。因此，在data model,應用邏輯（Controllers）和view展示之間有明確的分離，讓你更容易專注於關鍵的開發區域。 view接收model的資料來展示。當使用者透過點擊或敲擊鍵盤和應用互動時，controller會透過改變模型中的資料來回應。最終，view得到了發生在model中的變化這個通知，從而它能更新展示的內容。

最近我在給一個不懂電腦的朋友做一個小的應用程序，我想用Angular來做。一般我們在IDE上開發的時候都會用npm start或ng serve來啟動一個內部伺服器，可是如果我把開發好的程式給朋友，怎麼才能讓他能夠在自己的瀏覽器中開啟呢？我這裡選擇了nginx伺服器來部署我的程式。

一、新Angular程式

#1.安裝nodejs

2.安裝淘寶鏡像

npm install -g cnpm --registry=https://registry.npm.taobao.org

3.安裝angular cli

npm install -g @angular/cli

4.新項目

ng new myProj

5.安裝依賴套件

在有package.json的目錄下cnpm install

6.IDE中執行

ng serve 或npm install， 在localhost:4200中查看

二、打包

ng build,會在專案資料夾下產生dist文件，裡面是打包後的文件。

三、部署

在nginx官網中下載nginx

#把dist資料夾下的打包檔案拷貝到nginx/html下並重新命名為myProj

修改conf/nginx.conf文件
location / {
   root html/myProj;
   index index.html index.htm;
  }

點擊nginx.exe啟動nginx

在瀏覽器中輸入localhost:80即可看到項目

這個時候，我們只需要把nginx打包發給朋友，然後告訴他點擊nginx.exe後，在瀏覽器中輸入localhost:80即可。

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

在JavaScript中如何實作觀察者模式

如何在javascript中明確轉換與隱含轉換

在ReactNative如何使用Redux架構

以上是如何把Angular專案部署到nginx上的詳細內容。更多資訊請關注PHP中文網其他相關文章！