基於 abp vNext 和 .NET Core 開發博客項目 - 終結篇之發佈項目

時間 2020-06-29

標籤基於 abp vnext core 開發博客項目終結發佈简体版

原文原文鏈接

系列文章

終於到了這一步了，開發了 API，緊接着又開發了 Blazor 版的博客項目，慶祝本系列文章完結撒花。🎉🎉🎉前端

既然開發完成了，仍是拿出來溜溜比較好，本篇是本系列文章的最後一篇了，準備將 API 部署到 Linux，把前端 Blazor 開發的博客部署到 GitHub Pages。node

blog：https://blazor.meowv.com/
api：https://api2.meowv.com/

先放地址，體驗一下，要有點耐心，第一次訪問會下載資源文件到本地瀏覽器，後面訪問就賊快了。python

也是第一次使用 Blazor 開發項目，無論怎麼說，這個實驗性的帶教學和宣傳目的博客總算是搞出來了，本身用的話，徹底能夠，同時在開發過程當中本身也有很多收穫。linux

發佈API

發佈本身寫的後端API項目，必需要有屬於本身的服務器，固然若是隻是爲了動動手玩玩就沒啥必要了，由於 .NET Core 跨平臺我們能夠任意選擇，我這裏演示將項目發佈到 Linux 下。nginx

在這以前能夠看一下我去年的一篇文章，基於.NET Core開發的我的博客發佈至CentOS小記，簡單瞭解下。git

個人機器是好久以前擼羊毛的渣渣配置服務器，1G內存，1核CPU，1M帶寬，不過對於咱們這種小站來講沒啥訪問量，照樣用。🤣🤣github

首先確定是須要安裝 .NET Core 運行環境，直接安裝最新的 .NET Core 3.1 便可。這一步你們根據微軟官方文檔來就能夠了，https://docs.microsoft.com/zh-cn/dotnet/core/install/linux 。數據庫

安裝完成後可使用 dotnet --list-runtimes 查看運行時。json

接着就能夠去安裝 Nginx ，高性能 Web 服務器，在這裏使用它反向代理的功能，固然它的功能遠不止於此。關於 Nginx 的安裝我也不說了，若是你不懂，網上太多教程了。後端

安裝完成後可使用 nginx -V 查看安裝版本等信息。

到這一步就能夠把咱們API項目部署上去了，直接利用 Visual Studio 將項目打包發佈，appsettings.json配置文件信息填好，這一步不用多說吧，相信你們都會。

利用 WinSCP 工具將發佈好的代碼上傳至服務器，我這裏新建了文件夾 qix/api2 方便本身管理，順便提一句，WinSCP 是一個 Windows 環境下使用的 SSH 的開源圖形化 SFTP 客戶端。

那麼如今咱們能夠在終端中定位到API所在目錄，cd /qix/api2，而後執行命令啓動項目dotnet run Meowv.Blog.HttpApi.Hosting.dll這時候便會看到輸出信息，咱們就可使用服務器IP+端口的方式訪問到API了。

若是隻是這樣確定不是我想要的，這時候就引入了 Linux 下的守護進程，就相似於 Windows 下面的服務同樣，讓守護進程幫助咱們運行項目，當關機、重啓或者其它異常問題出現時，能夠自動幫咱們重啓應用，就是自動執行dotnet run xxx.dll這句命令。

關於守護進程用的比較多的，supervisor 與 pm2 ，前者基於Python開發的，後者是基於nodejs開發的。

咱這裏就選用 supervisor 了，固然 pm2 也不錯也能夠用用。

在 centos 下安裝 supervisor 也很簡單，直接貼幾行代碼，照着執行便可。

yum install python-setuptools

easy_install supervisor

mkdir /etc/supervisor
echo_supervisord_conf > /etc/supervisor/supervisord.conf

安裝成功後還須要花點時間去配置它，找到文件 /etc/supervisor/supervisord.conf 去掉文件最後的註釋，能夠改爲向下面這樣。

...
[include]
files = conf.d/*.ini

這時候就能夠監聽到 conf.d 文件夾下面的 ini 配置文件了，在 /etc/supervisor/ 下新建文件夾 conf.d，conf.d 文件夾下新建一個配置文件 api2_meowv.conf 文件，名字隨便起，內容以下：

[program:api2_meowv] # api2_meowv程序名稱
command=dotnet Meowv.Blog.HttpApi.Hosting.dll # 執行的命令
directory=/qix/api2  # 命令執行的目錄
environment=ASPNETCORE__ENVIRONMENT=Production # 環境變量
user=root
stopsignal=INT 
autostart=true # 是否自啓動
autorestart=true # 是否自動重啓
startsecs=3 # 自動重啓時間間隔（s）
stderr_logfile=/var/log/api2.meowv.com.err.log #錯誤日誌文件指向目錄
stdout_logfile=/var/log/api2.meowv.com.out.log #輸出日誌文件指向目錄

每行都帶有註釋，很清楚知道是幹啥用的，順便貼幾條經常使用的命令：

supervisorctl start program_name   #啓動某個進程(program_name=配置的進程名稱)
supervisorctl stop program_name    #中止某一進程
supervisorctl reload               #從新啓動配置中的全部程序
supervisorctl stop all             #中止所有進程
supervisorctl update               #更新新的配置到supervisord
supervisorctl restart program_name #重啓某一進程
supervisorctl                      #查看正在守候的進程

使用上面命令成功啓動項目，使用IP+端口的方式去訪問API確定是不友好的，這時候就須要一個域名了，我這裏將新建一個二級域名 api2.meowv.com 執行新開發的API項目。

關於域名的解析啥的不說了，配置完域名我順便去申請了一個SSL證書，使用HTTPS的方式訪問。

這時能夠去配置 Nginx 方向代理了。來到 nginx 安裝目錄，我這裏是 /etc/nginx ，新建一個文件夾 ssl ，將申請的SSL證書放進去，而後再 conf.d 文件夾下新建一個 api2_meowv.conf 文件，寫入下面的配置信息。

server {
        listen 443 ssl;
        server_name api2.meowv.com;
        ssl_certificate ssl/1_api2.meowv.com_bundle.crt; 
        ssl_certificate_key ssl/2_api2.meowv.com.key; 
        ssl_session_timeout 5m;
	ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
	ssl_ciphers AESGCM:ALL:!DH:!EXPORT:!RC4:+HIGH:!MEDIUM:!LOW:!aNULL:!eNULL;
	ssl_prefer_server_ciphers on;
        location / {
             if ($request_method = 'OPTIONS') {
		add_header Access-Control-Allow-Headers 'Authorization,Content-Type';
             	add_header Access-Control-Allow-Origin *;
             	add_header Access-Control-Allow-Credentials true; 
             	add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
             	return 204;
             }
             proxy_pass http://localhost:5009;
             proxy_set_header   X-Real-IP        $remote_addr;
             proxy_set_header   Host             $host;
             proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
	     client_max_body_size 20M;
        }
}

server {
	listen 80;
	server_name api2.meowv.com;
	rewrite ^(.*)$ https://api2.meowv.com;
}

關於配置信息你們能夠本身去學習一下，我這裏也是簡單的使用，我這裏監聽的端口是 5009，這個端口在 API 項目中是能夠自定義的，相信你們都知道。作好以上操做後，在終端執行 nginx -s reloa，刷新 nginx 配置使其生效，而後就大功告成了。

關於項目中的數據庫和Redis緩存，你們能夠自行安裝。數據庫能夠選擇使用Sqlite，項目中已經作了一鍵切換數據庫。安裝Redis也很簡單，相信你們能夠本身完成，Redis可用可不用，能夠直接關閉。

如今API項目便發佈成功，將其部署在Linux系統下面，有了線上正常運行的API，接下來把前端 Blazor 開發的博客也發一下。

發佈Blog

爲了節省服務器資源，如今裏面已經容納了超級多的東西了，我準備將 Blog 部署在 GitHub Pages 上。

使用 Blazor WebAssembly 發佈後是純靜態的文件，因此啊，其實放在哪裏均可以。無關乎環境，只要能夠開啓一個WEB服務便可。

在GitHub上建立一個倉庫來放咱們的發佈後的代碼，關於建立倉庫不會的看這裏，https://pages.github.com 。

接下來去發佈 Blazor 項目，發佈以前改一下API地址，固然這個也能夠作成配置文件形式的。

而後將建立好的倉庫克隆下來，把博客靜態文件拷貝進去，這時候還不能直接push到倉庫中，爲了適配 GitHub Pages 咱們還要作幾點改動。

GitHub Pages 使用的是 Jekyll，以特殊字符開頭的文件夾是不會被映射到路由中去的，咱們發佈的靜態文件中恰好有以_開頭的文件夾_framework，爲了解決這個問題能夠在倉庫下面建立一個以.nojekyll命名的空文件便可。

根據實際操做和踩坑，如今若是發佈仍是會報一個沒法加載資源的錯誤The resource has been blocked.，而後在GitHub找到了解決辦法，詳見：https://github.com/dotnet/aspnetcore/issues/19907#issuecomment-600054113 。

新建一個.gitattributes文件，寫入內容：* binary，便可，如今將文件 push 到倉庫。

而後在倉庫的settings下面開啓 GitHub Pages 功能選項。

我這裏自定義了一個域名，若是你也想自定義域名能夠在根目錄添加一個名爲CNAME的文件，裏面的內容就是你的域名，我這裏就是：blazor.meowv.com 。

最後在去配置一下域名的 CNAME 解析便可，等待 DNS 生效，即可以用自定義域名訪問了。