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

本文轉載自查看原文 2020-06-19 08:55 2760 abp vNext/ Blazor/ .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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。