Angular項(xiàng)目從新建、打包到nginx部署

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

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

最近我在給一個(gè)不懂計(jì)算機(jī)的朋友做一個(gè)小的應(yīng)用程序，我想用Angular來做。一般我們在IDE上開發(fā)的時(shí)候都會用npm start或者ng serve來啟動(dòng)一個(gè)內(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

新建項(xiàng)目
ng new myProj

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

IDE中運(yùn)行
ng serve 或 npm install，在localhost:4200中查看

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

三、部署

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

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

修改conf/nginx.conf文件

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

點(diǎn)擊nginx.exe啟動(dòng)nginx

在瀏覽器中輸入localhost:80即可看到項(xiàng)目

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

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

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

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

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