# 终结篇之发布项目

终于到了这一步了，开发了 API，紧接着又开发了 Blazor 版的博客项目，庆祝本系列文章完结撒花。🎉🎉🎉

既然开发完成了，还是拿出来溜溜比较好，本篇是本系列文章的最后一篇了，准备将 API 部署到 Linux，把前端 Blazor 开发的博客部署到 GitHub Pages。

blog：https://blazor.meowv.com/ (opens new window)
api：https://api2.meowv.com/ (opens new window)

先放地址，体验一下，要有点耐心，第一次访问会下载资源文件到本地浏览器，后面访问就贼快了。

也是第一次使用 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 (opens new window) 。

安装完成后可以使用 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

1
2
3
4
5
6

安装成功后还需要花点时间去配置它，找到文件 /etc/supervisor/supervisord.conf 去掉文件最后的注释，可以改成向下面这样。

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

1
2
3

这时候就可以监听到 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 #输出日志文件指向目录

1
2
3
4
5
6
7
8
9
10
11

每行都带有注释，很清楚知道是干啥用的，顺便贴几条常用的命令：

supervisorctl start program_name   #启动某个进程(program_name=配置的进程名称)
supervisorctl stop program_name    #停止某一进程
supervisorctl reload               #重新启动配置中的所有程序
supervisorctl stop all             #停止全部进程
supervisorctl update               #更新新的配置到supervisord
supervisorctl restart program_name #重启某一进程
supervisorctl                      #查看正在守候的进程

1
2
3
4
5
6
7

使用上面命令成功启动项目，使用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;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

关于配置信息大家可以自己去学习一下，我这里也是简单的使用，我这里监听的端口是 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 (opens new window) 。

接下来去发布 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 (opens new window) 。

新建一个.gitattributes文件，写入内容：* binary，即可，现在将文件 push 到仓库。

然后在仓库的settings下面开启 GitHub Pages 功能选项。

我这里自定义了一个域名，如果你也想自定义域名可以在根目录添加一个名为CNAME的文件，里面的内容就是你的域名，我这里就是：blazor.meowv.com 。

最后在去配置一下域名的 CNAME 解析即可，等待 DNS 生效，便可以用自定义域名访问了。

# 结束语

本系列文章从零开始搭建了API，使用 Blazor 开发了一个简单的博客系统，功能不是很多。整体来说从无到有，自己也踩了一遍坑，也算有不少收获了。

在这里再次感谢那些在公众号给我赞赏的人。🌹🌹🌹

可能整体涉及到的东西不是很多，广度和深度都没有，只是很基础的用了用，在写之前我也已经说过，这些系列是用来记录自己的编码过程，因为大佬们都不愿意出来分享，所以我们渣渣只能做到这种程度。

如果对你没啥帮助，权当看过笑过😀😀或者右上角点一下小叉叉❌❌，因为不管你做的如何，总有人喜欢说三道四~~

如果对你有些许帮助，请多多推广哟。✨✨✨

最后大家可以关注一下我的微信公众号：『阿星Plus』🤞🤞🤞

因为疫情影响，今年高考推迟到7月份，每年高考便是我所在公司的业务高峰期，接下来实在太忙，估计也没时间创作了，正好准备休息一段时间，好好思考思考后面为大家带来更好的文章，有缘人下个系列见吧。😊😊😊

本系列文章代码开源地址：https://github.com/meowv/blog (opens new window)

← Blazor 实战系列（九）