Angular項目從新建、打包到nginx部署

魏明發(fā)布于2019-07-25 14:07 / 1597人閱讀

摘要：三部署在官網(wǎng)中下載把文件夾下的打包文件拷貝到下并重命名為修改文件點擊啟動在瀏覽器中輸入即可看到項目這個時候，我們只需要把打包發(fā)給朋友，然后告訴他點擊后，在瀏覽器中輸入即可。

最近我在給一個不懂計算機的朋友做一個小的應(yīng)用程序，我想用Angular來做。一般我們在IDE上開發(fā)的時候都會用npm start或者ng serve來啟動一個內(nèi)部服務(wù)器，可是如果我把開發(fā)好的程序給朋友，怎么才能讓他能夠在自己的瀏覽器中打開呢？我這里選擇了nginx服務(wù)器來部署我的程序。
一、新建Angular程序

安裝nodejs

安裝淘寶鏡像
npm install -g cnpm --registry=https://registry.npm.taobao.org

安裝angular cli
npm install -g @angular/cli

新建項目
ng new myProj

安裝依賴包
在有package.json的目錄下cnpm install

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

二、打包
ng build,會在項目文件夾下生成dist文件，里面是打包后的文件。

三、部署

在nginx官網(wǎng)中下載nginx

把dist文件夾下的打包文件拷貝到nginx/html下并重命名為myProj

修改conf/nginx.conf文件

location / {
            root   html/myProj;
            index  index.html index.htm;
        }

點擊nginx.exe啟動nginx

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/39726.html

相關(guān)文章

一個網(wǎng)站的微服務(wù)架構(gòu)實戰(zhàn)（1）docker和 docker-compose

摘要：文件服務(wù)器項目為文章共享社區(qū)，少不了的就是一個存儲文章的文件服務(wù)器，包括存儲一些圖片之類的靜態(tài)資源。例如數(shù)據(jù)庫的數(shù)據(jù)文件的配置文件和文件服務(wù)器目錄。前言這是一次完整的項目實踐，Angular頁面+Springboot接口+MySQL都通過Dockerfile打包成docker鏡像，通過docker-compose做統(tǒng)一編排。目的是實現(xiàn)整個項目產(chǎn)品的輕量級和靈活性，在將各個模塊的鏡像...

CODING 2019-07-25 14:35 評論0 收藏0
Angular6打包的那些事

摘要：在看看的配置下其中可以防止刷新的問題。這樣我的可以用一個做代理，同時訪問我的兩個項目，兩個項目。他們的地址是項目博客項目寫著玩的，前端比較差以上可以說是解決了很大部分的坑了。 Angular在升級到6的時候，多了許多新的功能，比如ng命令，在從5升級到6的時候是無痛升級的，但是升級到了6之后，也有許多地方做了改變，比如Angular的設(shè)置，Angular的base-path等，通過在一...

CocoaChina 2019-07-25 14:28 評論0 收藏0
Angular 容器部署

摘要：很多人反應(yīng)很難訪問，所以轉(zhuǎn)移到阿里云服務(wù)器上，因此做了一次完整的容器部署。在容器化過程中，我們并未配置任何等，只是保留服務(wù)所需的配置項而已，而這一部分我們可以放在反向代理層完成。很多人反應(yīng)很難訪問 Github Page，所以 ng-alain.com 轉(zhuǎn)移到阿里云服務(wù)器上，因此做了一次完整的 Angular 容器部署。以下我會闡述 ng-alain 整個過程，其中包括 Docke...

tracy 2019-07-25 14:14 評論0 收藏0
Angular 容器部署

摘要：很多人反應(yīng)很難訪問，所以轉(zhuǎn)移到阿里云服務(wù)器上，因此做了一次完整的容器部署。在容器化過程中，我們并未配置任何等，只是保留服務(wù)所需的配置項而已，而這一部分我們可以放在反向代理層完成。很多人反應(yīng)很難訪問 Github Page，所以 ng-alain.com 轉(zhuǎn)移到阿里云服務(wù)器上，因此做了一次完整的 Angular 容器部署。以下我會闡述 ng-alain 整個過程，其中包括 Docke...

alighters 2019-06-28 16:23 評論0 收藏0
基于Flask-Angular的項目組網(wǎng)架構(gòu)與部署

摘要：基于網(wǎng)，分享項目的組網(wǎng)架構(gòu)和部署。項目組網(wǎng)架構(gòu)架構(gòu)說明流項目訪問分為兩個流，通過分兩個端口暴露給外部使用數(shù)據(jù)流用戶訪問網(wǎng)站。通過進行配置，使用作為異步隊列來存儲任務(wù)，并將處理結(jié)果存儲在中。基于Raindrop網(wǎng)，分享項目的組網(wǎng)架構(gòu)和部署。項目組網(wǎng)架構(gòu) showImg(https://cloud.githubusercontent.com/assets/7239657/1015704...

kelvinlee 2019-06-24 17:48 評論0 收藏0