ブログのセットアップ

サーバー運用や静的サイトジェネレータの自分の中の知識が遥か昔で止まっているため、モダンなやり方は分からないのですが、このブログを立ち上げるにあたり作業したことを記録しておきます。

概要

VPSサーバーを借りてブログ環境を構築した
他人がこの記事を読んで新しく得られる情報は無いと思うが、自分のために記録を残しておく

構成

サーバー
- Sakura VPS 2G プラン (約20,000円/年)
OS
- Ubuntu 20.04
ドメイン取得
- Google Domains (約1,000円/年)
静的サイトジェネレーター
- Hugo
デプロイ
- Github Actions

作業内容

サーバー選択

お金をかけずにブログを始めたいなら、Netlify や Github Pages などの静的サイトのホスティングサービスを使えば良いと思います。しかし、ブログ以外の何かもやりたいという気持ちがあったためレンタルサーバーを借りることにしました（ちゃんとした目的はなかったので見切り発車以外の何者でも無いですが）。ということで、最近だと AWS や GCP が良い選択肢だな、と思ってかかるコストを計算したところ思ったより高い…となったために最終的に VPS を借りることにしました。最近だと国内の VPS もいろんな選択肢があり色々見て調べていました。調べた感想を列挙すると、

WebARENA Indigo
- NTT PCコミュニケーションズのサービスということでちょっとだけ信頼できる。安いが、SSDがめちゃくちゃ少ない割に増設オプションも無い。
KAGOYA Cloud
- 安い。クレジットカード情報の入力フォームがちゃんとしてなさそう（偏見）で怖くなってやめました。
Sakura VPS
- 上2つと比べるとそこまで安いわけではないですが、一番まともな雰囲気を感じました（個人の感想）（妥協）

ということで Sakura VPS を選びました（本当は他にもVPSはいろいろありますが、ここで調べて消耗するのが嫌だったので2, 3個でやめました）。 Sakura VPS を10年ぶりぐらいに触ったのですが、コントロールパネルがだいぶ改修されていて感動しました。

ドメイン取得

面倒だから Sakura からドメイン取得もすれば良いかな〜と思っていましたが、同じドメインでも Google Domains に比べて Sakura の方が2倍近く価格が高かったので流石にそれは厳しい気持ちになり、Google Domains を使うことにしました。ところで Google Domains でドメインを取得すると、そのドメインで Google Workspace を始められるっぽくて、何か新しい事業を始めたい場合はこれを使うとめちゃくちゃ便利なのでは…？となりました。

静的サイトジェネレータ

Hugo 以外で良さそうなやつがあれば教えて下さい（他力本願寺）。ここ最近新しくて良さそうなジェネレータが出てない印象があります。

サーバーセットアップ

最初に入れた OS で色々と不都合が出たので OS の再インストールを行いました。次にSakura VPS のコントロールパネルから VNC コンソールでサーバに入って、ユーザの作成とsshの設定を行いました。 ubuntu だと useradd コマンドでホームディレクトリが作成されないので adduser コマンドを使う必要がありました（ややこしい）。また、 ufw を起動させてポート開放を行いました。

$ sudo apt-get update # パッケージ更新
$ sudo apt-get install vim git nginx hugo
$ adduser {ユーザ名} # user 作成
$ usermod -aG sudo {ユーザ名} # sudo 権限の付与
$ sudo vim /etc/ssh/sshd_config 
Port {ポート番号} # ポート変更
PermitRootLogin no # ルートユーザのログイン禁止

$ sudo ufw enable  # ファイアウォールの有効化
$ sudo ufw allow 'OpenSSH'
$ sudo ufw allow https
$ sudo ufw allow {ポート番号}/tcp

さらに、Sakura VPS ではコントロールパネルのパケットフィルター設定で ssh のポートを開放する必要がありました。ポート開放設定が終わったら、これでやっと ssh でログインする準備が整いました。このあとはユーザごとに ssh-copy-id で公開鍵をサーバに置く作業をやってもらいます。 ssh で入れるようになったら、nginx の設定やデプロイの準備を始めます。

サブドメインの blog.sunfit-brain.com で静的サイトをホスティングしたいので Google Domains のレコード登録と nginx の設定を行います。 Google Domains のレコード登録に関しては次の画像のように A レコードで登録すれば良いです。 This is a image nginx の設定として、次のコマンドの実行とファイル編集を行いました。

$ cp /etc/nginx/sites-available/default /etc/nginx/sites-available/sunfit-brain.com
$ cp /etc/nginx/sites-available/default /etc/nginx/sites-available/blog.sunfit-brain.com
$ rm /etc/nginx/sites-available/default
$ vim /etc/nginx/sites-available/blog.sunfit-brain.com
...
# listen 80 default_server;
listen 80;
# listen [::]:80 default_server;
listen [::]:80;
...
root {適当に設定}
server_name blog.sunfit-brain.com

$ ln -s /etc/nginx/sites-available/sunfit-brain.com /etc/nginx/sites-enabled/
$ ln -s /etc/nginx/sites-available/blog.sunfit-brain.com /etc/nginx/sites-enabled/
$ systemctl restart nginx

これでサーバー側の設定は終わりです。後は Hugo の準備と Github Actions の設定を Github で行います。 Hugo は特に書くことはなくて、使う theme を決めたらその theme のドキュメントやデモサイトを見て設定をすれば良いです。 Github Actions は GitHub Actions で Hugo サイトをビルドして VPS サーバーに rsync デプロイするを見ながら設定しました。

httpsでアクセスできるようにする

雑に運用するならここまででも良いと思っていましたが、https-portal を使って証明書自動更新をしたいという気持ちが生まれたので、その設定を行いました。まず、ホスト側で動いている nginx に対して

systemctl stop nginx # 停止
systemctl disable nginx.service # 自動起動の削除

を実行します。次に、docker を https://docs.docker.com/engine/install/ubuntu/ を眺めながらインストールします。インストールが終わったら、docker-compose.yml と nginx.conf 以下のように作成します。

docker-compose.yml

version: '3'

services:
  https-portal:
    image: steveltn/https-portal:1
    ports:
      - '80:80'
      - '443:443'
    links:
      - nginx
    restart: always
    environment:
      DOMAINS: 'sunfit-brain.com -> http://nginx:80, blog.sunfit-brain.com -> http://nginx:4000'
      # STAGE: 'production'
    volumes:
      - https-portal-data:/var/lib/https-portal

  nginx:
    image: nginx:latest
    volumes:
      - ./nginx.conf:/etc/nginx/conf.d/default.conf
      - {Github Actionsでデプロイしたpublicフォルダのpath}:/blog
    expose:
      - 4000

volumes:
  https-portal-data:

nginx.conf

server {
    listen 4000;
    server_name blog.sunfit-brain.com;

    root  /blog;
    index index.html index.htm;

    access_log /var/log/nginx/ssl-access.log;
    error_log  /var/log/nginx/ssl-error.log;

    location / {
        try_files $uri $uri/; 
    }
}

server {
    listen 80;
    server_name sunfit-brain.com;

    root  /var/www/html;
    index index.html index.htm;

    access_log /var/log/nginx/ssl-access.log;
    error_log  /var/log/nginx/ssl-error.log;

    location / {
        try_files $uri $uri/; 
    }
}

ということで、後は docker-compose up -d を実行すれば終わりです。記事を書いて Github に push すると自動で hugo のビルドを行い、生成された public フォルダをサーバーにデプロイするシステムを組めたので個人的に大満足です。

まとめ

ということでいろいろ設定を終えてようやくブログが書けるようになりました。これだけの設定を毎回ブログ立ち上げるときにやるのはとても面倒なので ansible とかで自動化できると良いですが、気力がありませんでした。実はこれだけやるんだったら Notion で独自ドメインを設定すれば事済む話だったのでは・・・？と思わなくもないですが、これもまたいい経験と思うことにします(じゃないとやってられなさすぎる)。

概要#

構成#

作業内容#

サーバー選択#

ドメイン取得#

静的サイトジェネレータ#

サーバーセットアップ#

httpsでアクセスできるようにする#

まとめ#

概要

構成