基於 abp vNext 和 .NET Core 開發部落格專案 - 終結篇之釋出專案

系列文章

終於到了這一步了，開發了 API，緊接著又開發了 Blazor 版的部落格專案，慶祝本系列文章完結撒花。???

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

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

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

也是第一次使用 Blazor 開發專案，不管怎麼說，這個實驗性的帶教學和宣傳目的部落格總算是搞出來了，自己用的話，完全可以，同時在開發過程中自己也有不少收穫。

釋出API

釋出自己寫的後端API專案，必須要有屬於自己的伺服器，當然如果只是為了動動手玩玩就沒啥必要了，因為 .NET Core 跨平臺我們們可以任意選擇，我這裡演示將專案釋出到 Linux 下。

在這之前可以看一下我去年的一篇文章，基於.NET Core開發的個人部落格釋出至CentOS小記，簡單瞭解下。

我的機器是很久之前擼羊毛的渣渣配置伺服器，1G記憶體，1核CPU，1M頻寬，不過對於我們這種小站來說沒啥訪問量，照樣用。??

首先肯定是需要安裝 .NET Core 執行環境，直接安裝最新的 .NET Core 3.1 即可。這一步大家根據微軟官方文件來就可以了，https://docs.microsoft.com/zh-cn/dotnet/core/install/linux 。

安裝完成後可以使用 dotnet --list-runtimes 檢視執行時。

接著就可以去安裝 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 生效，便可以用自定義域名訪問了。

結束語

本系列文章從零開始搭建了API，使用 Blazor 開發了一個簡單的部落格系統，功能不是很多。整體來說從無到有，自己也踩了一遍坑，也算有不少收穫了。

在這裡再次感謝那些在公眾號給我讚賞的人。???

可能整體涉及到的東西不是很多，廣度和深度都沒有，只是很基礎的用了用，在寫之前我也已經說過，這些系列是用來記錄自己的編碼過程，因為大佬們都不願意出來分享，所以我們渣渣只能做到這種程度。

如果對你沒啥幫助，權當看過笑過??或者右上角點一下小叉叉❌❌，因為不管你做的如何，總有人喜歡說三道四~~

如果對你有些許幫助，請多多推廣喲。✨✨✨

最後大家可以關注一下我的微信公眾號：『阿星Plus』???

因為疫情影響，今年高考推遲到7月份，每年高考便是我所在公司的業務高峰期，接下來實在太忙，估計也沒時間創作了，正好準備休息一段時間，好好思考思考後面為大家帶來更好的文章，有緣人下個系列見吧。???

本系列文章程式碼開源地址：https://github.com/meowv/blog

基於 abp vNext 和 .NET Core 開發部落格專案 - 終結篇之釋出專案

系列文章

釋出API

釋出Blog

結束語

相關文章