タグ: 個人開発

  • Dockerfileの書き方入門

    「Dockerの使い方入門」では、Docker Hubにある既存のイメージ(hello-world、nginxなど)をそのまま使ってコンテナを起動する方法を紹介しました。今回は一歩進んで、自分のアプリケーション用に「独自のイメージ」を作るための設計図、Dockerfileの書き方を整理しておきます。

    Dockerfileとは

    Dockerfileは、Dockerイメージをどう組み立てるかをテキストで記述したファイルです。「どのOS・言語のイメージをベースにするか」「必要なファイルをどこに配置するか」「どんなコマンドを実行するか」といった手順を1行ずつ命令として書いていくと、その内容通りのイメージがビルドできます。既存のイメージを組み合わせるだけでは対応できない、自作のアプリケーションをコンテナ化したいときに必要になります。

    よく使う基本命令

    Dockerfileでは、次の命令を組み合わせてイメージを定義します。

    • FROM:ベースにするイメージを指定する。最初に必ず書く命令(例:FROM node:20-slim)
    • WORKDIR:以降の命令を実行するコンテナ内の作業ディレクトリを指定する
    • COPY:ホスト側のファイルをイメージの中にコピーする
    • RUN:イメージのビルド時に実行するコマンドを指定する(依存パッケージのインストールなど)
    • ENV:コンテナ内で使う環境変数を設定する
    • EXPOSE:コンテナが待ち受けるポート番号を明記する(ドキュメント的な意味合いが強く、実際の公開はdocker run -pで行う)
    • CMD:コンテナ起動時に実行するデフォルトのコマンドを指定する

    シンプルなDockerfileの例

    Node.jsアプリケーションを例に、実際のDockerfileを見てみます。

    FROM node:20-slim
    
    WORKDIR /app
    
    COPY package.json package-lock.json ./
    RUN npm ci
    
    COPY . .
    
    ENV NODE_ENV=production
    EXPOSE 3000
    
    CMD ["node", "server.js"]

    上から順に、「Node.js 20のイメージをベースにする」「作業ディレクトリを/appにする」「依存関係だけ先にコピーしてインストールする」「残りのソースコードをコピーする」「本番用の環境変数を設定する」「3000番ポートで待ち受けることを明記する」「起動時にserver.jsを実行する」という流れになっています。

    ビルドとコンテナ起動

    Dockerfileができたら、次のコマンドでイメージをビルドし、コンテナを起動します。

    docker build -t my-app .
    docker run -d -p 3000:3000 my-app

    docker build -t my-app .は「カレントディレクトリのDockerfileを使って、my-appという名前でイメージをビルドする」という意味です。ビルドしたイメージは、通常のDocker Hubのイメージと同じようにdocker runでコンテナとして起動できます。

    書くときに気をつけたい3つのポイント

    Dockerfileを書く際は、次の点を意識すると扱いやすくなります。

    1. 変更頻度の低い命令を先に書く:Dockerは各命令の結果をレイヤーとしてキャッシュするため、package.jsonだけ先にコピーしてnpm ciを実行し、その後にソースコード全体をコピーすると、依存関係が変わらない限りnpm ciのキャッシュが再利用され、ビルドが速くなります。
    2. .dockerignoreで不要なファイルを除外する:node_modulesや.gitなど、イメージに含める必要のないファイルは.dockerignoreに書いておくと、ビルドが速くなり、イメージサイズも抑えられます。
    3. 軽量なベースイメージを選ぶ:node:20よりnode:20-slimやnode:20-alpineのように軽量版のタグを使うと、イメージサイズが小さくなり、ビルドやデプロイの時間を短縮できます。

    まとめ

    Dockerfileは、自作のアプリケーションをDockerのイメージとして再現可能な形にまとめるための設計図です。FROMでベースイメージを選び、COPYやRUNで必要なファイル・処理を積み重ね、CMDで起動コマンドを指定する、という基本の流れさえ押さえれば、多くのアプリケーションはコンテナ化できます。

    Dockerの基本コマンドやコンテナの起動そのものについては「Dockerの使い方入門」で、複数コンテナをまとめて管理するdocker-composeの書き方は「Dockerの使い方入門|基本コマンドとdocker-composeの書き方を実例で解説」で紹介していますので、あわせて読んでみてください。

  • Dockerの使い方入門

    2re funでは各プロジェクトのインフラにDockerを使っています。以前「Dockerの使い方入門|基本コマンドとdocker-composeの書き方を実例で解説」でコマンドとdocker-composeの実例をまとめましたが、今回はさらに一歩前、「これからDockerを触ってみる人」向けに、インストールから最初のコンテナ起動までの流れを整理しておきます。

    Dockerを使うと何がうれしいのか

    Dockerは、アプリケーションとその実行環境をまとめて「コンテナ」として起動できるツールです。導入すると、次のようなメリットがあります。

    • 「自分のPCでは動くのに他の人の環境では動かない」という差異を防げる
    • MySQLやRedisなどのミドルウェアを、PCに直接インストールせずに試せる
    • 使い終わったら丸ごと削除でき、PC環境を汚さない
    • 本番サーバーと同じ環境をローカルで再現しやすい

    インストール方法

    環境ごとに、次の方法でDockerを導入します。

    • Windows / Mac:Docker Desktopを公式サイトからダウンロードしてインストールする
    • Linux(Ubuntuなど):各ディストリビューションのパッケージマネージャーからDocker Engineをインストールする

    インストールが終わったら、ターミナルで次のコマンドを実行し、バージョンが表示されればセットアップは完了です。

    docker --version

    はじめてのコンテナ起動

    まずは動作確認として、公式が用意しているサンプルイメージを起動してみます。

    docker run hello-world

    このコマンドを実行すると、Dockerは次の順番で処理を行います。

    1. 手元にhello-worldイメージがあるか確認する
    2. なければDocker Hub(公式のイメージ置き場)から自動でダウンロードする
    3. ダウンロードしたイメージからコンテナを起動する
    4. コンテナ内のプログラムがメッセージを表示して終了する

    「Hello from Docker!」というメッセージが表示されれば、Dockerが正しく動作しています。

    Webサーバーを起動して動作を体感する

    次に、実際にブラウザからアクセスできるコンテナを起動してみます。Webサーバーのnginxを例にします。

    docker run -d -p 8080:80 --name my-nginx nginx

    それぞれのオプションの意味は次の通りです。

    • -d:コンテナをバックグラウンドで起動する
    • -p 8080:80:ホストの8080番ポートをコンテナの80番ポートにつなぐ
    • --name my-nginx:コンテナに分かりやすい名前を付ける

    起動後、ブラウザでhttp://localhost:8080にアクセスすると、nginxのウェルカムページが表示されます。確認が終わったら、次のコマンドでコンテナを停止・削除できます。

    docker stop my-nginx
    docker rm my-nginx

    PCにnginxを直接インストールしていないのに、コマンド1つでWebサーバーを試せて、不要になったら痕跡を残さず消せる。この手軽さがDockerの基本的な使い勝手です。

    次のステップ

    単体のコンテナ起動に慣れたら、次はWordPress+MySQLのように複数のコンテナを組み合わせる場面が出てきます。そこで使うのがDocker Composeです。基本コマンドやdocker-compose.ymlの具体的な書き方は「Dockerの使い方入門|基本コマンドとdocker-composeの書き方を実例で解説」で、この2re blog自体のdocker-compose.ymlを例に詳しく解説していますので、あわせて読んでみてください。

    また、既存のイメージではなく自分のアプリケーション用に独自のイメージを作りたい場合は、「Dockerfileの書き方入門」でFROM・COPY・RUN・CMDといった基本命令とサンプルコードを紹介していますので、そちらもあわせてご覧ください。

  • Dockerの使い方入門|基本コマンドとdocker-composeの書き方を実例で解説

    2re funの各プロジェクトでは、インフラ構築に一貫してDockerを使っています。この2re blog自体もWordPress+MySQLをDocker Composeで構築しており、「2re blogの技術構成|WordPress・Docker・MySQLで作る個人ブログ基盤」で紹介した通りです。今回は一歩戻って、Dockerの基本的な使い方を、実際にこのブログで使っているdocker-compose.ymlを例にしながら整理しておきます。

    Dockerとは

    Dockerは、アプリケーションとその実行環境をまとめて「コンテナ」という単位でパッケージ化し、どのマシンでも同じように動かせるようにするツールです。「自分のPCでは動くのに本番サーバーでは動かない」といった環境差異の問題を防げるのが最大のメリットで、個人開発でもチーム開発でも広く使われています。

    基本概念:イメージ・コンテナ・Dockerfile

    Dockerを理解する上でまず押さえておきたいのが、次の3つの用語です。

    • イメージ(Image):アプリケーションの実行に必要なファイルや設定をまとめた、いわば「設計図」。読み取り専用のテンプレート。
    • コンテナ(Container):イメージを元に実際に起動した、動いているプロセスの実体。同じイメージから複数のコンテナを起動できる。
    • Dockerfile:イメージをどう作るかを記述した設計書。ベースイメージの指定やコマンドの実行手順をテキストで書く。

    「Dockerfileからイメージをビルドし、イメージからコンテナを起動する」という流れがDockerの基本サイクルです。

    よく使う基本コマンド

    単体のDockerコマンドとしては、まず次のあたりを覚えておくと一通りの操作ができます。

    • docker build -t 任意の名前 .:カレントディレクトリのDockerfileからイメージをビルド
    • docker run -d -p 8080:80 イメージ名:イメージからコンテナをバックグラウンド起動し、ポートを公開
    • docker ps / docker ps -a:起動中/すべてのコンテナ一覧を確認
    • docker logs -f コンテナ名:コンテナのログをリアルタイムで確認
    • docker exec -it コンテナ名 bash:起動中のコンテナ内でシェルを実行
    • docker stop コンテナ名 / docker rm コンテナ名:コンテナの停止・削除
    • docker images / docker rmi イメージ名:イメージの一覧・削除

    複数コンテナはDocker Composeでまとめて管理する

    WordPress+MySQLのように複数のコンテナを組み合わせて使う場合、docker runをコンテナごとに実行するのは手間がかかります。そこで使うのがDocker Composeです。docker-compose.ymlというファイルに必要なコンテナ(サービス)をまとめて定義しておけば、コマンド1つでまとめて起動・停止できます。

    • docker compose up -d:定義したサービスをまとめてバックグラウンド起動
    • docker compose ps:サービスの起動状況を確認
    • docker compose logs -f サービス名:特定サービスのログを確認
    • docker compose exec サービス名 bash:サービスのコンテナ内に入る
    • docker compose down:サービスをまとめて停止・削除(ボリュームは残る)

    実例:2re blogのdocker-compose.ymlを読み解く

    実際にこの2re blogで使っているdocker-compose.ymlを例に、書き方のポイントを見てみます。

    services:
      mysql:
        image: mysql:8.4
        container_name: blo-2refun-db
        restart: unless-stopped
        environment:
          MYSQL_DATABASE: ${MYSQL_DATABASE:-wordpress}
          MYSQL_USER: ${MYSQL_USER:-wordpress}
          MYSQL_PASSWORD: ${MYSQL_PASSWORD:-wordpress}
          MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD:-root}
        volumes:
          - blo-db-data:/var/lib/mysql
        healthcheck:
          test: ["CMD", "mysqladmin", "ping", "-h", "localhost", "-u", "root", "-p${MYSQL_ROOT_PASSWORD:-root}"]
          interval: 5s
          timeout: 5s
          retries: 20
    
      wordpress:
        image: wordpress:php8.3-apache
        container_name: blo-2refun-wordpress
        restart: unless-stopped
        environment:
          WORDPRESS_DB_HOST: mysql
          WORDPRESS_DB_NAME: ${MYSQL_DATABASE:-wordpress}
          WORDPRESS_DB_USER: ${MYSQL_USER:-wordpress}
          WORDPRESS_DB_PASSWORD: ${MYSQL_PASSWORD:-wordpress}
        volumes:
          - blo-wp-data:/var/www/html
        ports:
          - "127.0.0.1:8081:80"
        depends_on:
          mysql:
            condition: service_healthy
    
    volumes:
      blo-db-data:
      blo-wp-data:

    ポイントは次の4つです。

    1. 環境変数は.envファイルに切り出す:${MYSQL_PASSWORD:-wordpress}のように書くと、.envで値を上書きしつつ、未設定でも動くデフォルト値を持たせられます。パスワードなどの秘匿情報をコードに直書きせずに済みます。
    2. データは名前付きボリュームに永続化する:blo-db-dataやblo-wp-dataのような名前付きボリュームにデータを保存しておけば、コンテナを削除して作り直してもデータは消えません。
    3. healthcheckとdepends_onで起動順序を制御する:MySQLコンテナにhealthcheckを設定し、WordPress側のdepends_onでcondition: service_healthyを指定することで、DBが実際に接続可能になってからWordPressを起動できます。単なるdepends_onだけだと、コンテナは起動していてもDBの準備が間に合わずエラーになることがあります。
    4. ポートは必要な範囲だけ公開する:127.0.0.1:8081:80のようにホスト側のバインド先をローカルホストに絞ることで、外部から直接コンテナのポートへアクセスされるのを防いでいます。本番公開はCaddyなどのリバースプロキシ経由にしています。

    Dockerを使うときに気をつけていること

    2re funの各プロジェクトでDockerを使う際、次の点を意識しています。

    • 本番運用するコンテナにはrestart: unless-stoppedを設定し、サーバー再起動時に自動で立ち上がるようにする
    • 秘匿情報は.envにまとめ、.gitignoreでリポジトリに含めない
    • コンテナ名やボリューム名にプロジェクト名のプレフィックスを付け、複数プロジェクトを1台のVPS上で動かしても衝突しないようにする
    • まずdocker compose logsでログを確認してから、必要に応じてdocker compose execでコンテナに入って調査する

    まとめ

    Dockerは「イメージからコンテナを起動する」というシンプルな仕組みですが、Docker Composeを使うことで複数コンテナの構成もコード化でき、環境の再現性が大きく上がります。2re funでは、この2re blogに限らず各プロジェクトのインフラをDocker Composeでコード化しており、それぞれの技術構成はこのブログで随時紹介していく予定です。あわせて「2re blogの技術構成」もご覧ください。

  • 個人開発ECサイト「SoraStore」を公開しました|Next.js×Railsで作る会員制ストア

    2re funの新しいプロジェクトとして、コーヒー・紅茶・雑貨を扱うオンラインストア「SoraStore」を公開しました。今回は、SoraStoreがどんなコンセプトのサイトなのか、どんな技術スタックで作っているのか、開発でこだわったポイントは何かを、この2re blogでまとめておきます。

    SoraStoreとは

    SoraStoreは、「暮らしを豊かにする、こだわりの逸品を。」をコンセプトにした、コーヒー・紅茶・雑貨などを扱う会員制のオンラインショップです。産地や製法にこだわった商品だけを取り扱う、という架空のECサイトを題材に、実際に動く会員登録・ログイン機能を備えたストアとして構築しました。(rail-order.2re.fun)

    単なるデザインカンプではなく、会員登録・ログインをした上で商品を注文できる、実際に触れる状態までドメインを取得して公開しているのが2re funの各プロジェクトに共通するこだわりで、SoraStoreも例外ではありません。

    サイトの特徴

    SoraStoreでは、実際のECサイトを意識して次の3つの特徴を持たせています。

    • 厳選された商品:産地や製法にこだわった、上質な商品だけを取り揃えるという世界観でストアを設計
    • 会員限定のご注文:注文には会員登録・ログインが必須で、ログイン後はマイページから注文状況を確認できる導線を用意
    • 丁寧な梱包でお届け:商品ページやトップページの文言で、購入後の体験まで含めた安心感を伝える設計にした

    トップページでは「無料で会員登録」「ログイン」の2つの導線を上部に配置し、初めて訪れたユーザーがまず会員登録に進むか、既存ユーザーとしてログインするかを迷わず選べるようにしています。

    技術スタック

    SoraStoreは、次の技術スタックで構築しています。

    フロントエンド

    • Next.js
    • TypeScript

    バックエンド・インフラ

    • Ruby on Rails(会員登録・ログイン・注文管理などのAPI)
    • Docker / Docker Compose

    2re funの他プロジェクト同様、フロントエンドとバックエンドを分離した構成にしており、会員登録・ログイン・注文状況の確認といった、実際のECサイトで必要になる機能をひと通り実装しています。

    開発でこだわったポイント

    SoraStoreの開発では、次の2点を特に意識しました。

    会員登録必須の注文フロー
    実務のECサイトでよくある「会員登録・ログインをしないと注文できない」という制約をあえて設け、認証まわりの実装(サインアップ・ログイン・マイページでの注文状況確認)を一通り作り切ることをテーマにしました。

    落ち着いたトーンのUIデザイン
    コーヒーや紅茶といった商品の世界観に合わせて、ストーン系の落ち着いた配色とシンプルなレイアウトを採用しました。「厳選された商品」「会員限定のご注文」「丁寧な梱包でお届け」という3つの特徴を3カラムで並べ、サイトの価値がひと目で伝わる構成にしています。

    他のプロジェクトと同じく、企画・設計からClaude Codeを開発パートナーとして活用し、人気の高い技術構成をリサーチした上で実装・インフラ構築・ドメインでの公開までを一人で進めています。開発の進め方の詳細は「2re fun はHPやシステムを公開します。」でも紹介しています。

    今後の展望

    現時点のSoraStoreは、トップページと会員登録・ログイン・商品一覧の基本的な導線までを公開している段階です。今後は、商品詳細ページやカート機能、注文履歴の表示などを充実させ、より実際のECサイトに近い形に育てていく予定です。

    SoraStoreを含む2re funの各プロジェクトはhttps://2re.fun/から一覧できます。開発の進捗や技術的な意思決定については、引き続きこの2re blogで発信していきますので、あわせてチェックしてみてください。

  • 2re fun はHPやシステムを公開します。

    2re funは、Claude Codeなどを使いながら人気のある開発構成をリサーチし、HP(ホームページ)やWebシステムのテーマを決めて実際に作り、デプロイしたものを公開していく個人開発ポートフォリオです。企画から設計・実装、インフラ構築、本番運用まで、すべて一人で手がけています。https://2re.fun/

    まだたくさん作ったのですが、サーバーのリソースと手間が間に合っていないため、公開するペースは時間とお金の相談になりそうです。この記事では、2re funがどんなコンセプトで動いているのか、どんな技術スタックでプロジェクトを作っているのか、実際にどんなHP・システムを公開しているのかを詳しくまとめておきます。

    2re funとは

    2re funは、「個人開発者として、企画から本番運用まで一人で作り切るシステム開発」をコンセプトにしたポートフォリオサイトです。フロントエンドからバックエンド、データベース設計、Dockerによるインフラ構築、VPSでの本番公開まで一貫して手がけ、実際に稼働しているシステムをサイト内の「Projects」で紹介しています。

    単なる制作実績の紹介にとどまらず、「実際に本番で動いているかどうか」にこだわっているのが2re funの特徴です。デザインカンプだけで終わらせず、ドメインを取得し、Dockerでインフラを組み、実際にユーザーが触れる状態までデプロイしてはじめて1つのプロジェクトとして公開しています。

    一人で企画から本番運用までを担う開発スタイル

    2re funの開発では、要件定義やテーマ決めの段階からClaude CodeのようなAIコーディングツールを活用しています。まず世の中で人気のある開発構成やアーキテクチャをリサーチし、作るHP・システムのテーマや技術選定を決めます。その後、実装・インフラ構築・デプロイまでを一人称で進め、実際に動くサービスとして公開する、という流れです。

    一人で担当する分、企画の意図とコードの実装がぶれにくいというメリットがある一方、サーバーのリソースや運用の手間には限界があります。そのため、どのプロジェクトをどこまで本番運用として維持するかは、常に時間とお金のバランスを見ながら判断しています。

    2re funで採用している技術スタック

    2re fun自体、そして公開している各プロジェクトも、次のような技術スタックで構築しています。人気の高い構成を意識しつつ、プロジェクトの性質に応じてバックエンドの言語やフレームワークを使い分けているのがポイントです。

    フロントエンド

    • Next.js
    • TypeScript
    • React
    • Tailwind CSS

    バックエンド

    • Go(REST API)
    • Node.js
    • プロジェクトによってはPHP・Spring Boot・Ruby on Railsなども採用

    データ・インフラ

    • MySQL(database/sql)
    • Docker / Docker Compose
    • Caddy
    • VPS運用

    このブログ(2re blog)自体もWordPress+Docker Composeで構築しており、技術構成の詳細は「2re blogの技術構成|WordPress・Docker・MySQLで作る個人ブログ基盤」で紹介しています。

    2re funで公開しているプロジェクト

    2026年8月時点で、2re funでは次のようなHP・Webシステムを実際に本番環境で公開しています。それぞれ業種やユースケースを変えながら、技術構成も意図的に変えて作っているのが特徴です。

    • とびうお:立ち食い鮨店向けの注文・会員管理システム。スマホから注文でき、購入履歴に応じたスタンプ特典を自動計算します。Node.js / TypeScript / MySQL / Dockerで構築。(tobiuo.2re.fun)
    • ボナンザ株式会社:清掃会社向けの企業サイト。Next.js製のフロントエンドとPHP製のAPIサーバーで構築。
    • Order System:厳選した商品を会員限定で販売するオンラインストア。会員登録することで注文・購入履歴の管理ができます。Next.js / TypeScript / Spring Boot / Docker。(order.2re.fun)
    • SoraStore:コーヒー・紅茶・雑貨など、産地や製法にこだわった商品を届けるオンラインショップ。会員登録した上で注文でき、マイページから注文状況を確認できます。Next.js / TypeScript / Rails / Docker。(rail-order.2re.fun)
    • 青葉葬儀社:葬儀社向けの企業サイト(サンプル)。プラン・料金の紹介や電話でのお問い合わせ導線を備えています。(aosy.top)
    • 2reブログ:システム開発の成長記録を発信する個人ブログ。学習の過程や進捗を記事として公開しています。WordPressで構築。(blo.2re.fun)

    2re.fun自体のお問い合わせフォームも、Go製のAPIサーバー経由でMySQLに保存する構成になっており、ポートフォリオサイト自体がフルスタック開発の実例になっています。

    Claude Codeを活用した開発の進め方

    2re funの各プロジェクトは、Claude Codeを開発パートナーとして使いながら進めています。具体的には、以下のような流れです。

    1. 作りたいHP・システムの業種やユースケースを決める
    2. その領域で人気のある開発構成・技術スタックをリサーチする
    3. Claude Codeと一緒にフロントエンド・バックエンド・データベースの設計を進める
    4. Docker Composeでインフラをまとめ、VPS上に本番環境として構築する
    5. 実際に動く状態までデプロイし、2re funやこのブログで公開する

    単に「作って終わり」ではなく、実際にドメインを取得し、独自のサブドメイン(tobiuo.2re.fun、order.2re.funなど)で公開するところまで含めて1つのプロジェクトと考えているのが、2re funのこだわりです。

    現在の課題:サーバーリソースと時間・費用のバランス

    2026年8月時点で、公開・検証待ちのプロジェクトはすでにいくつも溜まっています。ただし、すべてを同時に本番運用するにはサーバーのリソースが足りず、監視や運用の手間も追いついていないのが正直なところです。

    そのため、今後どのプロジェクトを優先的に公開・維持していくかは、サーバー費用と自分の作業時間を天秤にかけながら決めていくことになりそうです。無理に全部を本番公開するのではなく、記事として構成やコードを紹介するだけにとどめるプロジェクトも出てくる可能性があります。

    今後の展望

    2re funでは今後も、実務でよく使われる技術構成を試しながら、業種の異なるHP・Webシステムを作り、実際にデプロイして公開していく予定です。開発の過程や技術的な意思決定については、この2re blogで随時アウトプットしていきます。

    2re funの最新の公開プロジェクトはhttps://2re.fun/から、開発の裏側やアップデートは2re blogから確認できますので、あわせてチェックしてみてください。