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

系列文章

  1. 基於 abp vNext 和 .NET Core 開發博客項目 – 使用 abp cli 搭建項目
  2. 基於 abp vNext 和 .NET Core 開發博客項目 – 給項目瘦身,讓它跑起來
  3. 基於 abp vNext 和 .NET Core 開發博客項目 – 完善與美化,Swagger登場
  4. 基於 abp vNext 和 .NET Core 開發博客項目 – 數據訪問和代碼優先
  5. 基於 abp vNext 和 .NET Core 開發博客項目 – 自定義倉儲之增刪改查
  6. 基於 abp vNext 和 .NET Core 開發博客項目 – 統一規範API,包裝返回模型
  7. 基於 abp vNext 和 .NET Core 開發博客項目 – 再說Swagger,分組、描述、小綠鎖
  8. 基於 abp vNext 和 .NET Core 開發博客項目 – 接入GitHub,用JWT保護你的API
  9. 基於 abp vNext 和 .NET Core 開發博客項目 – 異常處理和日誌記錄
  10. 基於 abp vNext 和 .NET Core 開發博客項目 – 使用Redis緩存數據
  11. 基於 abp vNext 和 .NET Core 開發博客項目 – 集成Hangfire實現定時任務處理
  12. 基於 abp vNext 和 .NET Core 開發博客項目 – 用AutoMapper搞定對象映射
  13. 基於 abp vNext 和 .NET Core 開發博客項目 – 定時任務最佳實戰(一)
  14. 基於 abp vNext 和 .NET Core 開發博客項目 – 定時任務最佳實戰(二)
  15. 基於 abp vNext 和 .NET Core 開發博客項目 – 定時任務最佳實戰(三)
  16. 基於 abp vNext 和 .NET Core 開發博客項目 – 博客接口實戰篇(一)
  17. 基於 abp vNext 和 .NET Core 開發博客項目 – 博客接口實戰篇(二)
  18. 基於 abp vNext 和 .NET Core 開發博客項目 – 博客接口實戰篇(三)
  19. 基於 abp vNext 和 .NET Core 開發博客項目 – 博客接口實戰篇(四)
  20. 基於 abp vNext 和 .NET Core 開發博客項目 – 博客接口實戰篇(五)
  21. 基於 abp vNext 和 .NET Core 開發博客項目 – Blazor 實戰系列(一)
  22. 基於 abp vNext 和 .NET Core 開發博客項目 – Blazor 實戰系列(二)
  23. 基於 abp vNext 和 .NET Core 開發博客項目 – Blazor 實戰系列(三)
  24. 基於 abp vNext 和 .NET Core 開發博客項目 – Blazor 實戰系列(四)
  25. 基於 abp vNext 和 .NET Core 開發博客項目 – Blazor 實戰系列(五)
  26. 基於 abp vNext 和 .NET Core 開發博客項目 – Blazor 實戰系列(六)
  27. 基於 abp vNext 和 .NET Core 開發博客項目 – Blazor 實戰系列(七)
  28. 基於 abp vNext 和 .NET Core 開發博客項目 – Blazor 實戰系列(八)
  29. 基於 abp vNext 和 .NET Core 開發博客項目 – Blazor 實戰系列(九)

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

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

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

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

發佈API

發佈自己寫的後端API項目,必須要有屬於自己的服務器,當然如果只是為了動動手玩玩就沒啥必要了,因為 .NET Core 跨平台咱們可以任意選擇,我這裡演示將項目發佈到 Linux 下。

在這之前可以看一下我去年的一篇文章,基於.NET Core開發的個人博客發佈至CentOS小記 ,簡單了解下。

我的機器是很久之前擼羊毛的渣渣配置服務器,1G內存,1核CPU,1M帶寬,不過對於我們這種小站來說沒啥訪問量,照樣用。🤣🤣

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

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

1

接着就可以去安裝 Nginx ,高性能 Web 服務器,在這裡使用它反向代理的功能,當然它的功能遠不止於此。關於 Nginx 的安裝我也不說了,如果你不懂,網上太多教程了。

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

2

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

3

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

4

那麼現在我們可以在終端中定位到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                      #查看正在守候的進程

5

使用上面命令成功啟動項目,使用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 //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 ^(.*)$ //api2.meowv.com;
}

6

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

關於項目中的數據庫和Redis緩存,大家可以自行安裝。數據庫可以選擇使用Sqlite,項目中已經做了一鍵切換數據庫。安裝Redis也很簡單,相信大家可以自己完成,Redis可用可不用,可以直接關閉。

7

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

發佈Blog

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

使用 Blazor WebAssembly 發佈後是純靜態的文件,所以啊,其實放在哪裡都可以。無關乎環境,只要可以開啟一個WEB服務即可。

在GitHub上創建一個倉庫來放我們的發佈後的代碼,關於創建倉庫不會的看這裡,//pages.github.com

接下來去發佈 Blazor 項目,發佈之前改一下API地址,當然這個也可以做成配置文件形式的。

7

8

然後將創建好的倉庫克隆下來,把博客靜態文件拷貝進去,這時候還不能直接push到倉庫中,為了適配 GitHub Pages 我們還要做幾點改動。

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

根據實際操作和踩坑,現在如果發佈還是會報一個無法加載資源的錯誤The resource has been blocked.,然後在GitHub找到了解決辦法,詳見://github.com/dotnet/aspnetcore/issues/19907#issuecomment-600054113

新建一個.gitattributes文件,寫入內容:* binary,即可,現在將文件 push 到倉庫。

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

9

我這裡自定義了一個域名,如果你也想自定義域名可以在根目錄添加一個名為CNAME的文件,裏面的內容就是你的域名,我這裡就是:blazor.meowv.com 。

10

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

結束語

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

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

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

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

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

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

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

本系列文章代碼開源地址://github.com/meowv/blog

11