hello-programmer-world

プログラマー向けの学習コンテンツサイトです。

必要な環境

• 必須
  • Node.js (推奨: v18以上)
  • pnpm
  • Git
• 任意
  • コマンドライン操作の練習用仮想環境
    • VirtualBox
    • Vagrant
  • PHP練習用環境
    • Docker
  • AlmaLinux など Playwright 非対応環境でのサイトビルド
    • Docker

pnpmがインストールされていない場合は、以下のコマンドでインストールしてください。

npm install -g pnpm

実行手順

このソースコードの取得

git clone https://git.souken-dev.com/git/h.sakamoto/hello-programmer-world.git

Webページの準備 (ライブラリのインストール)

pnpm install

Webページの起動

pnpm dev

開発サーバーが起動し、ブラウザで http://localhost:4321 にアクセスできます。
ファイルを編集すると、自動的にブラウザがリロードされます。

AlmaLinux などで Docker / Podman を使ってビルドする

このサイトは Mermaid の画像生成のために Playwright を利用しています。
そのため、Playwright が公式サポートしていない OS では、pnpm build が失敗することがあります。

その場合は、Playwright 公式イメージの中でビルドしてください。

pnpm build:docker

Podman を使う場合は、以下のコマンドを実行してください。

pnpm build:podman

ビルドが成功すると、成果物がホスト側の ./dist/ に出力されます。
この dist/ を Web サーバーに配置すれば、そのまま公開できます。

Docker / Podman イメージとして公開する

静的サイトをそのままコンテナで公開したい場合は、以下のようにビルドして起動できます。

docker build -t hello-programmer-world .
docker run --rm -p 8080:80 hello-programmer-world

起動後は http://localhost:8080 で確認できます。

Podman の場合も、docker を podman に読み替えれば同様に実行できます。

コマンドライン操作の練習用仮想環境の利用（任意）

./vagrant/README.md をご確認ください。

PHP練習用環境の利用（任意）

PHPの練習用環境はDocker Composeで構築しています。
以下のコマンドを実行して、環境を起動してください。

docker compose up -d

起動が成功すると、以下のURLにアクセスすることでPHPの動作を確認できます。
この環境では、PHPのコードを ./public/sample/ と ./public/playground/ に配置して実行できます。

• http://localhost:8080

データベースの環境も同時に起動します。
以下のページにアクセスして、データベースの管理ツールであるPhpMyAdminを利用できます。

• http://localhost:8081

技術スタック

• Astro - 静的サイトジェネレーター
• MDX - Markdownの拡張記法
• Tailwind CSS - CSSフレームワーク
• Preact - UIコンポーネント
• Biome - リンター・フォーマッター