2021-02-11

2020-08-22

技術ノート

eyecatch
ずっと取り組んできた技術ブログの開発ですが、やっと公開できるレベルまで持ってこれました。WEB 開発に関してはフロントエンドもサーバーサイドもゼロからのスタートでしたが、何とか形にすることができました。

はじめに

最初の記事は、minbase.io の基本的な部分にふれてみたいと思います。技術ブログを開発するに至った経緯についてはこちらに書きました。minbase.io をいかに構築したかについて、シリーズ化してひとつひとつ記事にしていくことは最初から決めていました。長い道のりになりますが、学んだ技術を定着させるためにも体系だったアウトプットを心掛けます。

全体構成

インフラからフロントエンドまで、ざっくりとした全体構成から見ていきます。まずは利用している技術についてです。

利用した技術

主に以下の技術で構築しました。

レイヤー ソフトウェア 備考
インフラ基盤 AWS - Amazon EC2 Amazon Linux 2
仮想化基盤 Docker 19.03.6-ce docker-compose 1.24.1
データベース PostgreSQL 11.9 Docker 上で動作
アプリケーション Django 2.2.8  2.2.16 # 脆弱性対応でバージョンアップ Docker 上で動作 , Python 3.8.2
Web サーバー nginx 1.19 Docker 上で動作
フロントエンド Bootstrap 4.3.1 -

構成図

全体構成図です。Cloudcraft 使ってみました。スカスカですが、こんなものだとお考え下さい。

構成図

構成について

AWS

まず、サーバーを立てる環境をどうするかですが、Amazon EC2 でデプロイしました。料金は少し高いですが、仕事でも日常的に触っている AWS を使うことにしました。個人運用なので当然、最小構成です。できれば ELB 立てて Fargate でサーバーレス運用して DB は Aurora で・・・とかやりたいですがもちろんそんなお金はかけられないので、最初は t3.micro 単体でがんばることにしました。ちなみに OS は Amazon Linux 2です。Ubuntu18.04 と迷いましたが。

Docker

当サイトは Docker 上で動作しています。図の通り、1ホスト3コンテナで構成しています。リバースプロキシとして nginx を使い、WSGI モジュールは uWSGI にしました。コンテナ間の通信は Unix Domain Socket インターフェースで行っています。これは、共有ボリュームを構成することで実現できました。少し前にハマった記憶がありますが、今回はうまくいきました。

企業インフラの中で、Docker は利用する機会はあまりないと思われがちです。少なくとも私の職場環境ではそうです。そもそも OSS があまり普及していない印象を受けます。おそらく、社内プロキシがホワイトリストモードでガチガチになっているからでしょう。私は Docker に関してはホワイトリストでガチガチの企業インフラであっても利用価値は十分にあると考え、勝手に検証サーバーを立ててガリガリ検証していたので、今回 Docker で環境構築するに当たってさほどハードルは感じませんでした。yaml をちょろっと書くだけで Redmine が立ち上がるあの爽快感は忘れられません。今回構築した Docker コンテナの詳細については別の記事で触れたいと思います。

Django

minbase.io の軸となっているのは、Python 製の Web フレームワーク Django です。選定理由は、大まかに以下となります。

  • オールインワンパッケージであること
  • 使う機会の多い Python で書かれていること
  • パッケージモジュールが充実していること

Django はオールインワンパッケージといわれている通り、フロントエンドもバックエンドも包括した Web フレームワークで、これさえ覚えれば Web サイトが効率的に作れるすごいヤツだと理解しています。ある程度さわるとそれが実感できるようになります。最大の障壁は、オールインワンパッケージであるがゆえに学習コストがそれなりに高いことかと思います。これは身をもって体感しました。

Bootstrap

いわゆるフロントエンドの領域については、Bootstrap4 を使って実装しました。よくある Django のテンプレートシステムと Bootstrap の組み合わせです。とはいえ、基本的にはグリッドシステムにかかわるところだけを利用し、装飾についてはほぼほぼ CSS で独自に書いています。ここはいちばん時間がかかりました。フロントについては「エンジニアっぽい無骨なデザインだけど、意外に細かいところがしっかりしてるな」っていうのを目指しました。Cocoon に代表されるようなオーソドックスな2カラムの UI を踏襲しました。作っていくうちに欲が出てきて「流行りに合わせて中央1カラムにして、カテゴリーとかタグとか、よく読まれる記事一覧とかはフッターに組み込んで・・・」などなど考えれば切りがなかったのですが、途中で力尽きて2カラムで行くことにしました。UI については改善の余地があるので、今後フロントのフレームワークを学習するなどしてスキルを上げていきたいところです。

Cloudinary

画像等の静的リソースをどうするか問題ですが、Cloudinary で配信することにしました。とてもいいサービスです。サイズや画像形式を自動で配信最適化してくれます。例えば、HTML タグで wmv ファイルの拡張子を mp4 に変更するだけで mp4 として再生できたりします。Cloudinary のやってみた系記事は巷にいくつかありますので、下に参考リンクを貼っておきます。そのうち Cloudinary の API を使った簡単な動画ポータルの作成等も記事にしてみたいと思います。

Django で使う場合には django-cloudinary-storage という便利なパッケージがありますが、これにはひとつ注意点があって、Django3 系では動作しませんでした。どうやら Django3 系でサポートから外れたライブラリを使っていて、まだそれに対応していないようです。そのため、今回使っている Django のバージョンは 2.2.8 です(Django で Python3.8 に対応しているのは 2.2.8 からなので)脆弱性対応のため、2.2.16 にアップデートしました。開発初期は 3.1 を使っていましたが、このライブラリが使いたくてダウングレードしました。3系の LTS での対応を切に願います。

その他

コンテンツによってはいろいろなライブラリを用いてその機能を実現していますが、特に顕著なのがレポートページです。以下のライブラリを使っています。

  • グラフ描画 : chart.js
  • 日本語形態素解析 : Janome
  • ワードクラウド描画 : d3-cloud

サイト構成

Web サイト自体の構成については、以下にサイトマップをまとめます。

サイトマップ

一般ユーザー

  • 記事一覧
    • 記事詳細
    • カテゴリー一覧
    • タグ一覧
    • アーカイブ一覧
  • レポート
  • RSS フィード
  • このサイトについて
  • プライバシーポリシー
  • 問い合わせフォーム

管理者のみ

  • 下書き一覧
  • スニペット一覧
  • Google への Ping
  • 管理サイト

開発に際して

技術ブログをなぜ開発したのか等、技術以外の部分についてです。

開発した動機

私はインフラ寄りの社内 SE で、ふだんは以下のような企業インフラの管理・構築を生業としています。

  • Windows サーバーの構築・保守
  • Windows クライアントの構築・保守
  • Linux サーバーの構築・保守
  • AWS 基盤でのアーキテクチャ設計・構築
  • Windows Active Directory 管理
  • WSUS, KMS 等の管理
  • PowerShell や Python を用いたインフラ作業の自動化 等々

そんな私が Web に手を出したのは、やはり自分のサイトを自分で作りたかったからです。基本的にはこのサイトについてに書いたことがすべてなのですが、ゆくゆくは自分のポートフォリオとして発展させていきたいとも思っています。

おわりに

minbase.io の構成や開発に関することを書きました。インプットよりアウトプットのほうが知識が定着するというのは本当ですね。アウトプット下手な人生でしたが、これを機にがんばりたいです。次回からはシリーズとして、各レイヤーごとに書いていきます。それか、PowerShell とか得意な方向に走るかもしれません。いずれにせよ、まともなものが書けるかどうかわかりませんが。。。あと、技術ブログ書くのって、こんなにたいへんなのですね。すごく時間がかかりましたし、疲れました。