【Blog】Dockerで複数環境でブログをかけるようにする手順

目次

• なぜDockerを使うのか
• 方式
• 手順
• よく使うコマンド

なぜDockerを使うのか

気分によって環境を使い分けることが多いので、複数のOS環境でお手軽に書けるようにしておきたい

方式

Ubuntuコンテナ内にクローンしてくる方式でいい気がする、nodeを使っているので、ホストOSにマウントしたディレクトリを使う方式だと異常に動作が遅くなる

• Ubuntu 22.4

VSCode + Devcontainre + Deockerでブログを書ける環境を作る。
データはボリュームに保存する方式にする

手順

1. WindowsにDocker Desktopをインストールする

   • CLIで管理できるScoopを使ってインストールしようと思ったが、どうにも使いにくかったので、やめた
   • 以下のリンクからダウンロードしてexeを実行してインストール
     • https://docs.docker.com/desktop/setup/install/windows-install/
   • インストール出来たら再起動が必要なはず

2. 再起動後WSL2などのインストールなどが必要になるのでいい感じに進める

   • 以下のような表示になれば準備OK

1. フォルダ構成・ファイルの作成

以下のファイル構造でフォルダを構成してVSCodeでDevContainerで接続する

/
└ .devcontainer/
  ├ devcontainer.json
  ├ docker-compose.yml
  └ Dockerfile

• devcontainer.json

  {
    "name": "Hexo Blog Devcontainer",
    "dockerComposeFile": "docker-compose.yml",
    "service": "hexo",
    "workspaceFolder": "/workspace",
    "shutdownAction": "stopCompose",
    "extensions": [
      "yzhang.markdown-all-in-one",
      "esbenp.prettier-vscode",
      "bierner.github-markdown-preview",
      "davidanson.vscode-markdownlint",
      "eamodio.gitlens"
    ],
    "postCreateCommand": "/bin/sh -c 'mkdir -p /home/hexo/.ssh && chmod 700 /home/hexo/.ssh && chown -R hexo:hexo /home/hexo/.ssh && sudo -u hexo ssh-keygen -f /home/hexo/.ssh/id_rsa -N \"\" -q -t rsa && cat /home/hexo/.ssh/id_rsa.pub'"
  }

• docker-compose.yml

  services:
    hexo:
      build: .
      volumes:
        - hexo_data:/workspace
        - ssh_key_data:/root/.ssh
      ports:
        - "4000:4000"
      command: sleep infinity
      network_mode: "host"
  
  volumes:
    hexo_data:
    ssh_key_data:

• Dockerfile

  FROM node:20-bookworm
  
  # 必要なパッケージをインストール
  RUN apt-get update && apt-get install -y --no-install-recommends \
    git \
    openssh-client \
    sudo \
    wget \
    gnupg \
    ca-certificates \
    fontconfig \
    fonts-dejavu \
    libatk1.0-dev \
    libatk-bridge2.0-dev \
    libcups2 \
    libdbus-1-dev \
    libgtk-3-dev \
    libnspr4 \
    libnss3 \
    libx11-xcb-dev \
    libxcomposite-dev \
    libxdamage-dev \
    libxfixes-dev \
    libxrandr-dev \
    libgbm-dev \
    libxshmfence-dev \
    xdg-utils \
    chromium \
    locales \
    && sed -i '/ja_JP.UTF-8/s/^# //g' /etc/locale.gen \
    && locale-gen \
    && update-locale LANG=ja_JP.UTF-8 \
    && rm -rf /var/lib/apt/lists/*
  
  # `hexo` ユーザーを作成し、`sudo` 権限を付与
  RUN useradd -m -s /bin/bash hexo \
    && echo "hexo ALL=(ALL) NOPASSWD:ALL" >> /etc/sudoers
  
  # `/workspace` の所有者を `hexo` に変更し、書き込み可能にする
  RUN mkdir -p /workspace \
    && chown -R hexo:hexo /workspace \
    && chmod -R 775 /workspace
  
  # `/root/.ssh` ディレクトリの作成と権限設定
  RUN mkdir -p /root/.ssh \
    && chmod 700 /root/.ssh
  
  # `hexo` ユーザーのホームにグローバル npm ディレクトリを設定
  USER hexo
  RUN mkdir -p ~/.npm-global \
    && npm config set prefix '~/.npm-global' \
    && echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.bashrc
  
  # `hexo` ユーザーの Git 設定を自動化
  RUN git config --global user.name "djima" \
    && git config --global user.email "daiki.applecreate@gmail.com"
  
  # `hexo` ユーザーの SSH キーを作成 (既にある場合は作らない)
  RUN mkdir -p ~/.ssh \
    && if [ ! -f ~/.ssh/id_rsa ]; then \
    ssh-keygen -t ed25519 -f ~/.ssh/id_rsa -N ""; \
    fi
  
  # GitHub SSH 接続の設定
  RUN echo "Host github.com\n\
    User git\n\
    IdentityFile ~/.ssh/id_rsa\n\
    StrictHostKeyChecking no" >> ~/.ssh/config
  
  # chromium を chromium-browser として認識させる(Macの場合だけなぜかchromium-browserとして実行されるのでこれがあったほうがいい)
  RUN ln -s /usr/bin/chromium /usr/bin/chromium-browser
  
  # Hexo CLI のインストール (ローカルディレクトリにインストール)
  RUN npm install -g hexo-cli
  
  # ポートを公開
  EXPOSE 4000
  
  ENV LANG=ja_JP.UTF-8
  ENV LANGUAGE=ja_JP:ja
  ENV LC_ALL=ja_JP.UTF-8
  
  # コンテナ起動時のエントリーポイント
  CMD ["sleep", "infinity"]

1. 作成したフォルダをVSCodeで開いてctrl + shift + pでコマンドパレットを開いて、「DevContainers: Open Folder in Container…」を実行して今開いているフォルダを指定する

2. コンテナがうまく構築できれば自動でGithubに接続するために使用する秘密鍵を生成するので、それをコピー、GithubのSSH接続設定に追加して、コンテナ内からGitHubのプライベートリポジトリにアクセスできるようにする

• sshキーのコピーを逃した場合は以下のコマンドで再表示できる

cat ~/.ssh/id_rsa.pub 

1. クローンする(最初だけクローンするときに何か聞かれるので「yes」を打ち込む)

/workspace # git clone git@github.com:Daiki-Iijima/Daiki-Iijima.github.io.git
Cloning into 'Daiki-Iijima.github.io'...
The authenticity of host 'github.com (20.27.177.113)' can't be established.
ED25519 key fingerprint is SHA256:+DiY3wvvV6TuJJhbpZisF/zLDA0zPMSvHdkr4UvCOqU.
This key is not known by any other names.
Are you sure you want to continue connecting (yes/no/[fingerprint])? yes
Warning: Permanently added 'github.com' (ED25519) to the list of known hosts.
remote: Enumerating objects: 40927, done.
remote: Counting objects: 100% (40927/40927), done.
remote: Compressing objects: 100% (17313/17313), done.
remote: Total 40927 (delta 17336), reused 39648 (delta 16191), pack-reused 0 (from 0)
Receiving objects: 100% (40927/40927), 140.98 MiB | 8.86 MiB/s, done.
Resolving deltas: 100% (17336/17336), done.

1. クローンしてきたフォルダに移動して、editブランチに切り替える

cd Daiki-Iijima/Daiki-Iijima.github.io.git
git fetch origin edit
git checkout edit

1. npmインストールを実行

npm install

1. テスト、ホストOS側のブラウザでブログを見ることができればOK

hexo s

よく使うコマンド

• ローカルでブログを確認する
  • hexo s
• 新規記事を書く
  • hexo new "記事のタイトル"
• ブログをデプロイ(更新)する
  • hexo d