2019年からWordPressでDotnet9サイトを構築し、現在は自らコードを書いて開発するまでに至った経緯と、その過程で使用したリソースを余すところなく紹介します。皆様のお役に立てれば幸いです。
1. ドメイン取得、WordPressサイト構築
時期：2019年11月
「Dotnet9」というドメインを取得しました。正直なところ、管理者はDotnet1からDotnet9まで試行錯誤し、最初の8つはすべて既に登録されていました（笑）。
サイトはWordPressの有料サードパーティテーマJustNewsテーマで構築しました。
JustNewsテーマは、ブログ、メディア、情報サイト向けに設計・開発されており、スマートフォンやタブレットに自動対応し、フロントエンドのユーザーセンターをサポートし、フロントエンドから記事の公開・投稿が可能です。また、特集機能もサポートしており、記事特集を追加できます。
1.1 クラシックスタイル
- デモURL：http://demo.wpcom.cn/justnews/
このスタイルは技術系サイトに適しており、コンテンツがコンパクトにまとまっていて、一目で多くの情報を表示できます。
1.2 スタイル2
- デモURL：http://demo.wpcom.cn/justnews2/
このスタイルは昨年まで管理者が選んでいたスタイルで、約2年間使用していました。見た目は比較的大きく、サイトの最後のスクリーンショットは残っていないようなので、デモのスクリーンショットを掲載します。
2. サイト開発技術スタックの調査開始
時期：2021年10月
これは重要な時期です。それまでの2年間、管理者は基本的に上記のWordPressで構築したサイトを維持していました。
Dotnet9サイトをフォローしている方からも、「このサイトはどの言語で開発されているのか」「オープンソースなのか」「サイト開発を学びたい」という質問をよくいただいていました。
管理者も徐々に自分でサイトを開発したいと思うようになりましたが、なかなか行動に移せませんでした。というのも、自分の技術スタックは主にC/S側であり、B/Sはたまに触る程度だったからです。
そこでこの時期から、サイト開発の技術スタックの調査を始めました。まず選んだのはFlutter Webで、YouTubeの動画を参考にトップページのデモを作成しました。
- ソースコード：https://github.com/dotnet9/lequ/tree/main/src/flutter_blog
Flutter Webを選んだのは、管理者が会社でもFlutterを使ったMacプロジェクトの調査をしていたことと、クロスプラットフォーム特性を活かして後でデスクトップやアプリに展開するためでした。しかし、現時点ではFlutter Webはまだあまり成熟していません。
現在最も適していない技術と言えるでしょう。初回ロード時に約2MBのFlutter jsライブラリが読み込まれ、20～30秒の白画面待ちが発生します。SEO対応のサードパーティプラグインもありますが、まだ未成熟で、Flutterをデスクトップに選ぶのと同様、もう少し待つ必要があります。
3. ASP.NET Core MVC + Bootstrapでのサイト開発
時期：2021年12月
ソースコード：https://github.com/dotnet9/lequ/tree/main/src/dotnet_blog
これはSEOが必要なタイプのサイトに最も適した技術スタックでしょう。個人的にはモノリスで十分だと思います。
管理者は以前B/Sを担当する際、ASP.NET Core Web APIだけをやるか、フロントエンドにVue（vue-element-admin）やReact（Ant Design Pro）を組み合わせていました。ASP.NET Core MVCにはまだ触れたことがなかったので、ネットで動画を探して学習しました。
既存のブログコードを使ったチュートリアル動画を探していたところ、百度やGoogleで検索してようやく見つけたのがudemy.comです。このサイトは多くの学生が学習に使ったことがあるでしょう。世界中の教育動画があり、中国語、英語、その他の言語があります。
私はトルコ人の先生の動画を見つけました。ちょうどASP.NET Core MVC 5を使ったブログサイト開発の講座で、まさに私のニーズに合っていました。当時19.9ドル支払いましたが、少し高かったものの、本物の知識を得られました。彼は基本的に3層アーキテクチャを使って開発しており、MVCを学び始めた方にはおすすめです。ここでスクリーンショットやリンクを掲載するのは購入を推奨するわけではなく、後で続きを説明します。
- 動画リンク：https://www.udemy.com/course/kurumsal-mimaride-mvc5-ile-blog-projesi-gelistirelim/
もちろん管理者は彼の動画通りに全てを作ったわけではなく、一部のコードは老張のBlog.Coreを参考に開発しました。老張の博客園をブックマークしておくことをおすすめします。興味があれば彼のブログを見てみてください。管理者は2018年末から老張のブログでB/S開発の入門を始めました。これはおそらくネット上で最も完全なB/S入門シリーズチュートリアルです：.NET CORE Web API + Vue。
- 博客園 [老張の哲学]: https://www.cnblogs.com/laozhang-is-phi/
管理者はトルコ人の先生の動画を見て、老張のBlog.Coreを参考にブログのフロントエンドの一部を作成した後、YouTubeでトルコ人の先生のアカウントを発見しました。彼は新しい動画シリーズを始めており、これもASP.NET CORE MVC 5.0を使ったブログシステム開発の講座で、テーマが異なり、使用技術も新しいかもしれません。全150話で、管理者は80話ほど追いかけましたが、その後は見ていません。前述の有料動画と似ているので、必要な方は有料動画を買わなくても（もちろん購入しても構いません）、最新のブログ開発動画を直接見て学習できます。
- 動画URL：https://www.youtube.com/watch?v=HXKnDUb06iw&list=PLKnjBHu2xXNNkinaVhPqPZG0ubaLN63ci
言語は障壁になりません。YouTubeでは翻訳機能があります。管理者は時々2倍速で見ながらコードを入力して学習すると、効果がより良かったです。
4. Abp vNext + Blazor Serverでの開発
時期：2022年01月
管理者は前のMVC学習の過程で、フロントエンドを大体作り上げていました。テーマ切り替え、多言語切り替えが可能です。
2022年01月、管理者の会社でAbp vNext + Blazor Serverを使ったプロジェクトの要件があり、会社で技術を学び、夜も時間をかけて新しい技術でDotnet9サイトのフロントエンドを練習として作成しました。
ソースコード：https://github.com/dotnet9/Dotnet9/tree/abp-blazor-server
学習URL：https://docs.abp.io/en/abp/latest/Tutorials/Part-1?UI=BlazorServer&DB=EF
まとめ：
Abp vNextは重すぎます。「Hello World」でメモリ使用量が約400MB。個人でCRUDを手作業で書くのは時間がかかり、コード生成器があっても、ブログサイトにこの方法を選ぶべきではありません。
ただし、Abp vNextを使ってエンタープライズプロジェクトを開発するのは妨げになりません。コミュニティには多くのAbp vNextのオープンソースプロジェクトがあります。このGitHubアカウントをチェックしてみてください：EasyAbp Team
- EasyAbp Team：https://github.com/EasyAbp
5. Blazor Serverだけでサイト開発
時期：1月～2月
上記でAbp vNextを個人プロジェクトに使わなくなった理由は個人的な見解として述べました。そのため、Blazor ServerのHello Worldから再びサイトを構築し直しました。
BlazorコンポーネントライブラリにはMasa Blazorを使用： https://masa-blazor-docs-dev.lonsid.cn/
第4版のAbp vNextと統合したBlazor Serverと比べると、当時は仕事の都合で練習用に選びました。今回はネイティブのBlazor Serverを選びました。.NET開発者である私にとっては、MVCに次ぐ選択肢だと思います。
正直に言うと、Blazorで仕事を見つける可能性は非常に低いですが、個人で楽しむには非常に爽快です。Blazorを学ぶには、管理者が以前翻訳した台湾の若者の連載記事を参照してください：Blazorを学ぼう。管理者はこのBlazorバージョンで2つのオンラインツールも書き、しばらく公開していました。コードは以下を参照：
その後もBlazor Serverで個人サイトを開発する選択を続けませんでした。主な理由は、BlazorがsignalRを使って長いコネクションを維持するため、リアルタイム性は高いものの、クライアントのネットワーク環境への要求が高く、ネットワークが少し悪いとサーバーとの接続が切れ、ユーザー体験に大きな影響を与えるからです。管理者はこれ以上試行錯誤したくなかったので、その後またMVCで個人サイトを開発することにしました。
余談：途中で.NET CORE Web APIとVueを組み合わせてサイト開発を試みました。老張の新刊が発売され、管理者はそれを購入し、バックエンドとフロントページを作ってみました。新鮮な体験でした。フロントエンドとバックエンドの分離、Vueに慣れていれば快適ですが、MVCほどスムーズではありませんでした。
6. 現在の開発バージョン（2022年5月）
時期：2022年03月～現在（2022年05月03日）
初回公開：2022年04月01日
ソースコード：https://github.com/dotnet9/Dotnet9
MVCに戻ってサイトを開発し直し、現在はフロントエンドがほぼ形になりました。フロントエンドはネット上からテーマを拝借し、今後は淘宝で有料のデザイナーに美化を依頼する予定です。
トップページ：
アルバムの一例：オープンソースWPF
カテゴリの一例：Blazor
記事の一例：ASP.NET Core ビジュアルログコンポーネントの使用
フロントエンドはASP.NET Core MVCで開発し、ORMはEF Coreを使用。MVCは完璧なSEOサポートを得られ、百度やGoogleのインデックス登録について心配する必要がなくなりました。
サイトデータはシードデータとして用意しており、現在は更新のたびにデータベースを削除して再初期化する必要があります。バックエンドは開発中で、Pandaプロジェクトを参考にしています。バックエンドのフロントエンドにはVue 3.0 + Element Plusを使用。
- Panda：https://github.com/coolqingcheng/Panda
最後に、バックエンドフロントエンドの動画で本文を終わります。
7. 2023年3月11日更新
現在サイトは新たなリファクタリング中です。フロントエンドの表示効果は以下の通りです。
トップページ：
詳細ページ：
参考プロジェクト：
- フロントエンドフロント：https://github.com/linhaojun857/aurora/tree/master/aurora-vue/aurora-blog
- バックエンドフロント：https://github.com/linhaojun857/aurora/tree/master/aurora-vue/aurora-admin
- バックエンド：https://github.com/yangzhongke/NETBookMaterials/tree/main/%E6%9C%80%E5%90%8E%E5%A4%A7%E9%A1%B9%E7%9B%AE%E4%BB%A3%E7%A0%81/YouZack-VNext
Dotnet9サイトプロジェクト：
- フロントエンドフロント（Vue 3 + Element Plus）：https://github.com/dotnet9/Dotnet9/tree/develop/src/dotnet9-web-vue3
- バックエンドフロント（Vue 2 + Element UI）：https://github.com/dotnet9/Dotnet9/tree/develop/src/Dotnet9.Admin.Web/dotnet9-adminvue
- バックエンド（ASP.NET Core 7.0 Web API）：https://github.com/dotnet9/Dotnet9/tree/develop/src/Dotnet9.Admin.WebAPI
8. 2023年5月3日更新
フロントエンドはVue 3からASP.NET Core Razor Pagesに戻しました。スタイルはシンプルを重視し、コンテンツ重視で華美さを排除しました。ユーザーからは「初期の博客園に似ている」との声もあります。実際には管理者は楊青青の個人ブログ（https://www.yangqq.com/）の静的テンプレートを購入しました。バックエンドはMASA Frameworkで構築しています。フレームワークのURLは https://www.masastack.com/framework です。バックエンドは引き続きDDD設計を開発ガイドラインとし、今回はCQRSを導入しました。開発全体の計画としては、バックエンドフレームワークはMASA Frameworkで固定する予定で、フロントエンド・バックエンドともに.NET 8に全面的に移行しました。
なぜまたリファクタリングしたのか？
技術の進歩に伴い、サイトのリファクタリングは必然的な流れです。個人学習のニーズをより良く満たし、サイトのパフォーマンスとユーザー体験を向上させるために、Dotnet9サイトは新たなリファクタリングを行いました。今回のリファクタリングは主にフロントエンドとバックエンドの両面に及びます。
フロントエンドのリファクタリング
技術スタック：ASP.NET Core 8.0 Razor Pages
フロントエンドでは、Dotnet9サイトは元のVue 3をRazor Pagesに戻しました。Vue 3には多くの利点がありますが、パフォーマンスとSEOの面で問題があるためです。Razor Pagesはフロントエンドサイト（サーバーサイドレンダリング）の構築により適しており、パフォーマンスとSEO最適化効果が優れています。
同時に、Dotnet9サイトはスタイル面でも調整を行いました。サイトのスタイルはシンプルを基本とし、華美な効果を排除し、コンテンツの表示に重点を置いています。このスタイルは初期の博客園に似ており、ユーザーが読書と学習に集中できるようにしています。
バックエンドのリファクタリング
技術スタック：ASP.NET Core 8.0 Web API（MASA Framework + EF Core 8.0（PostgreSQL）、DDD + CQRS）
バックエンド側では、Dotnet9サイトはMASA Frameworkを開発フレームワークとして採用しました。MASA Frameworkは.NETの次世代マイクロサービス開発フレームワークであり、開発者と企業が新時代のモダンアプリケーション開発・デリバリー体験を実現することを支援します。
開発設計においては、Dotnet9サイトは引き続きDDD（ドメイン駆動設計）の思想を実践しています。この設計思想は、開発者がビジネス要件をよりよく理解し、ビジネスロジックと技術実装を分離し、コードの保守性と拡張性を向上させるのに役立ちます。
さらに、Dotnet9サイトにはCQRS（コマンドクエリ責務分離）の設計パターンも導入し、MASA Frameworkが技術サポートを提供しています。CQRSは、ドメイン駆動設計(DDD)やイベントソーシングに関連するアーキテクチャパターンで、イベントをコマンド側とクエリ側に分割し、システムのパフォーマンスと拡張性を向上させます。Dotnet9サイトでは、ブログ記事のクエリにはクエリ（Query）、記事の閲覧統計（開発中）にはコマンド（Command）を使用しています。
まとめ
Dotnet9サイトのリファクタリングは、サイトのパフォーマンスとユーザー体験を向上させるだけでなく、最新の技術と設計思想を採用し、サイトの保守性と拡張性を高めました。今後の発展において、Dotnet9サイトはこの理念を継承し、最適化と改良を続け、ユーザーにより良いサービスを提供します。もちろん、主に個人学習と継続的な進化が目的です。
成果表示
トップページ：
記事アルバム：
記事詳細：
ソースコード
今回は履歴ブランチも整理し、developとmainブランチのみを残しました。
リポジトリ：https://github.com/dotnet9/dotnet9
ソリューション構造は以下の通りです。
フロントエンドメインプロジェクト：Dotnet9.RazorPages
バックエンドメインプロジェクト：Dotnet9.Service
- Dotnet9.Commons：ユーティリティライブラリ
- Dotnet9.Contracts：一時的にDtoクラスを配置
- Dotnet9.RazorPages：フロントエンドメインプロジェクト、徐々に完成
- Dotnet9.Service：バックエンドメインプロジェクト、一時的に各種レイヤーファイルを一つのプロジェクトにまとめ、必要に応じて分割
- Dotnet9.Admin：バックエンドフロントエンドは仮決め
サイト開発が完了したら、Dotnet9サイトのフロントエンド・バックエンドの開発チュートリアルシリーズを共有する予定です。今年か来年には…。
9. 2024年7月
Ant Designスタイルでリファクタリング。ソースコード：https://github.com/dotnet9/CodeWF
- Blazor静的SSR採用
- データベースなし。コアデータはローカルから読み込み、メモリにロードして使用。そのためバックエンドはなし
オンライン閲覧：https://dotnet9.com
アクセス速度が格段に速くなった感覚はありますか？
本記事は随時更新されます。ご注目ください。