騰訊雲centos 7部署 dotnetcore+Angular2 實踐

版權聲明：本文由屈政斌原創文章，轉載請註明出處: 
文章原文連接：https://www.qcloud.com/community/article/239

來源：騰雲閣 https://www.qcloud.com/community

 

服務器: 騰訊雲主機(Centos 7.1)

項目:aspnetcore+angular2 開源項目模版

該項目使用webpack 打包Angular2, 內網涉及到npm請使用tnpm

環境安裝

1.安裝dotnetcore

根據官方指導進行安裝;

官網給出的安裝引導是安裝dotnet core 1.1 ,可是咱們項目使用的dotnetcore 1.0.1

因此必須再安裝1.0.1 (備註dotnet core 能夠多個版本並存)

curl -sSL -o dotnet.tar.gz https://go.microsoft.com/fwlink/?LinkID=827529
tar zxf dotnet.tar.gz -C /opt/dotnet

(下載的地址不同)

2.禁用防火牆

systemctl stop firewalld.service #中止firewall
systemctl disable firewalld.service #禁止firewall開機啓動

因爲是學習項目,能夠先關閉防火牆, 生成環境請配置防火牆iptable

3.安裝Nginx

　yum install nginx

　systemctl start nginx

使用命令行測試 curl http://127.0.0.1 能訪問到html內容則正常

項目構建

1.構建項目

在windows環境 構建 指引 參考

npm若是訪問問題可使用tnpm

npm install -g yo
npm install -g generator-aspnetcore-angular2

2.建立項目

選擇高級模版

取消npm 安裝 使用 tnpm

3.編譯項目

編譯dotnet ,編譯angular2

dotnet 程序集restore,webpack 打包Angular2 ,本地運行項目

有興趣的同窗能夠多瞭解快命令具體作了啥

4.本地訪問

http://localhost:3000/

部署項目

1.執行發佈腳本

dotnet publish

該命令會執行project.json 的構建命令

"scripts": {
"prepublish": [ "npm install", "npm run rebuild-sass", "npm run build" ],
"postpublish": [ "dotnet publish-iis --publish-folder %publish:OutputPath% --framework %publish:FullTargetFramework%" ]
}

2.壓縮生成文件

目錄:

\test\src\test\bin\Debug\netcoreapp1.0\publish

壓縮成zip ,稍後上傳到linux進行部署

3.上傳項目

使用ftp工具上傳只centos (我使用的xshell+xftp)

解壓文件: unzip test.zip

4.啓動項目

set ASPNETCORE_ENVIRONMENT=Development
dotnet test.dll server.urls=http://127.0.0.1:3000/

(備註 此處沒有使用localhost ,是由於ip6 下bind錯誤 )

已經監聽了
5.測試

發現上面雖然打開了咱們的頁面實際上是爆了一個錯誤
須要修改 Views\Home\Index.cshtml 文件

<app-root asp-prerender-module="wwwroot/src/server" asp-prerender-webpack-config="webpack.config.js">
    Loading...
</app-root>

去掉以下代碼

asp-prerender-module="wwwroot/src/server" asp-prerender-webpack-config="webpack.config.js"

curl 測試html正常

6.配置代理

3000端口不適合暴露外網, 配置Nginx 反向代理

vim /etc/nginx/nginx.conf

添加 cgi

proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection keep-alive;
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
       proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

檢查nginx配置

重啓nginx

/usr/sbin/nginx -t


service nginx restart
#獲取使用reload
nginx -s reload

7.查當作果

使用外網ip訪問站點, 直接訪問80端口就行了

其餘

該項目目前只是用於學習dotnetcore ,Angular2 , 順便熟悉一下 npm,webpack,linux。