kei_log

モダンな自社開発企業を目指すための学習ログ

Docker を活用して Web アプリ環境を構築する

はじめに

この記事では、 Rails アプリを Docker 環境で構築する手順についてまとめます。 作る環境は以下です。

Rails アプリを Docker 化する手順

ローカルでの開発準備

今回は Desktop にrails-docker-appという名前でディレクトリを作成します。(お好きな名前でどうぞ) 以降で Docker を使う上で必要なファイル等もこのタイミングで作っておきます。

cd ~/Desktop
mkdir rails-docker-app && cd rails-docker-app
touch Dockerfile docker-compose.yaml Gemfile Gemfile.lock

下記のディレクトリ構造になっていれば OK です。

rails-docker-app
├── Dockerfile
├── Gemfile
├── Gemfile.lock
└── docker-compose.yaml

次に各ファイルの中身をつくっていきます。

Gemfile の作成

gem の取得先と rails のバージョンを記載しておきます。今回は7.0.6を使います。

source 'https://rubygems.org'
gem "rails", "~> 7.0.6"

Gemfile.lock の作成

こちらは中身は空のままで OK です。

Dockerfile の作成

まずは Rails(Web 側)の Dockerfile を作成していきます。

# ベースイメージの指定
FROM ruby:3.2.2

# 必要なパッケージのインストール
RUN apt-get update -qq && apt-get install -y \
    build-essential \
    libpq-dev \
    nodejs \
    postgresql-client \
    yarn

# 作業ディレクトリの指定
WORKDIR /rails-docker-app

# ホスト側のGemfile, Gemfile.lockをコンテナにコピー
COPY Gemfile Gemfile.lock /rails-docker-app/

# Gemのインストール
RUN bundle install

docker-compose.yaml の作成

docker-compose は、複数コンテナをまとめて起動したり、docker runコマンドが長くなるときに便利です! 一旦、アプリ側のコンテナの設定を記載していきます。

version: "3"

services:
  web:
    build: .
    ports:
      - "3000:3000"
    volumes:
      - ".:/rails-docker-app"
    tty: true
    stdin_open: true

ここからは、docker-compose up -dでコンテナを起動後、 docker-compose web bashでコンテナに入って作業していきます。

Rails アプリのセットアップ

rails newコマンドでアプリの雛形を作成していきます。 今回は DB を使用するので--database=postgresqlで Postgres を指定します。

root@xxxxx:/rails-docker-app# rails new . --force --database=postgresql --skip-bundle

このコマンドを実行すると、rails で使用する gem がGemfileに複数記載されるはずです。 これをインストールするためにはbundle installを再実行する必要があるため、docker-compose downで一度コンテナを抜けます。

Dockerfile の再ビルド

先程、rails new で Gemfile が更新されたので、bundle installを実行するために新しいイメージを作成する必要があります。古いイメージを使いたくないのでdocker-compose up --build -dで新しいイメージでコンテナを起動するようにします。

コンテナ起動後、コンテナに入って rails サーバーを起動してみましょう。

root@xxxxxx:/rails-docker-app# rails s -b 0.0.0.0
=> Booting Puma
=> Rails 7.0.8.3 application starting in development
=> Run `bin/rails server --help` for more startup options
Puma starting in single mode...
* Puma version: 5.6.8 (ruby 3.2.2-p53) ("Birdie's Version")
*  Min threads: 5
*  Max threads: 5
*  Environment: development
*          PID: 14
* Listening on http://0.0.0.0:3000
Use Ctrl-C to stop

しかし、データベースが作られていないことでエラー画面が表示されるはずです。 次はこちらを修正していきます。

config/database.yml に DB 情報追加

rails プロジェクト配下にあるconfig/database.ymlに下記のように追記します。

default: &default
  adapter: postgresql
  encoding: unicode
  ----- 👈 ここから
  host: db
  user: postgres
  port: 5432
  password: postgres
  password: <%= ENV.fetch("DATABASE_PASSWORD")>
  ----- 👈 ここまで
  # For details on connection pooling, see Rails configuration guide
  # https://guides.rubyonrails.org/configuring.html#database-pooling
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>

development:
  <<: *default
  database: rails_docker_app_development

次に docker-compose.yaml 側の修正も行っていきます。

docker-compose.yaml に DB 情報を追記

DB コンテナ用の定義を下記のように追記します。

version: "3"

volumes:
  db-data:

services:
  web:
    build: .
    ports:
      - "3000:3000"
    volumes:
      - ".:/rails-docker-app"
    environment:
      - "DATABASE_PASSWORD=postgres"
    tty: true
    stdin_open: true
    depends_on:
      - db
    links:
      - db

  db:
    image: postgres:12
    environment:
      - "POSTGRES_USER=postgres"
      - "POSTGRES_PASSWORD=postgres"
    volumes:
      - "db-data:/var/lib/postgresql/data"

Rails アプリの DB セットアップ

docker-compose up -dコマンドを実行して、Postgres のコンテナを起動します。この時点では web と db の2 種類のコンテナが起動しているはずです。 それではdocker-compose web bashでコンテナに入って、rails db:createコマンドを実行しましよう。

root@xxxxxxx:/rails-docker-app# rails db:create
Created database 'rails_docker_app_development'
Created database 'rails_docker_app_test'

rails g scaffoldでスキャフォールディングをします。

rails g scaffold product name:string price:integer vender:string

rails db:migrateマイグレーションを実行します。

root@xxxxxx:/rails-docker-app# rails db:migrate
== 20240520141629 CreateProducts: migrating ===================================
-- create_table(:products)
   -> 0.0048s
== 20240520141629 CreateProducts: migrated (0.0049s) ==========================

Rails アプリのサーバー起動

ここまでできたらコンテナの中でrails s -b 0.0.0.0を実行します。 ブラウザにアクセスすると、rails のマークが表示された画面が現れるはずです。

おわりに

ここまで読んでいただきありがとうございます! Docker を使うことでアプリと DB を組み合わせた環境構築を簡単に済ませられるので、とても便利だと感じるようになりました。 今回は Rails を例に説明しましたが、Node.js, Python など他にもいろんな技術スタックでもこれから試してみたいと思いました!

GitHub Pages の使い方について

GitHub Pages って何?

GitHub Pages で Web サイトを公開する手順

大きく 4 つのステップがありますので、順番に説明します。

  1. GitHub プロジェクト作成
  2. サイト用のコンテンツ追加
  3. サイトの公開設定
  4. 公開完了 🎉

1. GitHub プロジェクト作成

まず、GitHub 上で新規プロジェクトを作成しましょう! GitHub にログイン後、[New repository]をクリックすると作成画面に移ります。

作成画面でプロジェクト名を入力して、[Public]にチェックを入れます。

2. サイト用のコンテンツ追加

次に作成したプロジェクトに HTML・CSS・JS・画像など、Web サイトに使用するソースを追加します。 [Add file] をクリックすると、ファイル作成やファイルアップロードができます。

3. サイトの公開設定

ここからは実際に Web サイトを公開するための設定をします!

まず、該当のリポジトリへ行き、上部にある[Settings] をクリックします。

左側の[Pages]>を選択すると、GitHub Pages の設定が表示されるはずです。 ここでは実際に公開したいブランチを選択後、save ボタンを押下します。

4. 公開完了 🎉

数十秒ほど待つと、ウェブサイトが公開されます。 下記のようにリンクが表示されるのでクリックしてみましょう!

最後に

ここまで読んで頂きありがとうございます! 今回は GitHub Pages の使い方について、簡単に説明してみました。 GitHub と連携するだけで数分で Web サイトを公開できるのはとても楽だと思いました。 さくっとなにか作りたいときは、今後活用してみようと思います。

Linux 基礎コマンドについて

本記事では、Linux でよく使用される基礎コマンドについて、順番に説明します。

【cd コマンド】

ディレクトリを移動するためのコマンド。 現在いるディレクトリ(=カレントディレクトリ)を指定のディレクトリに変更する。

cd .  # カレントディレクトリへ
cd .. # 1つ上の階層のディレクトリへ
cd ~  # 「/home/ユーザー名」のディレクトリへ
cd /  # 「/」ディレクトリへ

pwd コマンド】

カレントディレクトリを表示するコマンド。

pwd
/Users/<ユーザー名>/desktop

【ls コマンド】

ファイルやディレクトリの一覧を表示するためのコマンド。 「*」や「?」を使えばパス名展開により、複数ファイル指定も可能。 オプションには-l(ファイル詳細の表示)、-a(隠しファイルを含む全ファイル表示)等がある。

ls /
bin dev home lib64 mnt

ls *.ts # 拡張子がtsのファイル一覧を表示

ls /bin/a?? # aから始まり3文字で終わるファイルを表示

【mkdir コマンド】

ディレクトリを作成するコマンド。 -pオプションで階層の深いディレクトリを一度に作成できる。

mkdir hoge
mkdir -p hoge/fuga

【rmdir コマンド】

空のディレクトリを削除するコマンド。

rmdir hoge

【cat コマンド】

ファイルの中身を表示するコマンド。 -nオプションで行番号を表示できる。

cat -n hoge/fuga

【less コマンド】

ファイルの中身をスクロール表示するコマンド。

less hoge

下記コマンドでいろんな操作が行える。

コマンド 説明
スペース、f 画面下にスクロール
b 画面上にスクロール
j 1 行下にスクロール
k 1 行上にスクロール
g 行の先頭へ移動
G 行の末尾へ移動
q less コマンド終了
/<文字列> 上から下に向かって検索
?<文字列> 下から上に向かって検索
n 次の検索結果へ移動
N 前の検索結果へ移動

【tail コマンド】

ファイルの最後 10 行を表示するコマンド。

tail hoge

【touch コマンド】

空ファイルを作成するコマンド。 ファイル名が存在する場合は、タイムスタンプを更新する。

touch README.md

【rm コマンド】

ファイルやディレクトリを削除するコマンド。 -rオプションにより、ディレクトリ内のファイルとディレクトリを再帰的に削除。 -fオプションにより、ファイル削除時の警告文を表示しない。

rm -r hoge1
rm -f hoge2
rm -rf hoge3 # オプションの組み合わせも可能

【mv コマンド】

ファイルを移動する、ファイル名を変更するコマンド。

mv hoge hoge1 # ファイル名変更
mv hoge1 dir/ # ファイル移動

【cp コマンド】

ファイル・ディレクトリをコピーするコマンド。 コピー先のファイルが存在する場合は、上書きされる。

cp hoge copy_hoge

【ln コマンド】

ハードリンクを貼るコマンド。 -sオプションの場合、シンボリックリンクを貼る。

ln hoge1 hoge2
ln -s hoge1 hoge3

【find コマンド】

ファイルを検索するコマンド。 -nameオプションで、ファイル名を指定した検索が可能(大文字・小文字は区別する)。 -typeオプションで、ファイルの種類を指定した検索が可能。

find . -name hoge.md
find . -name '*.ts' -print  # ワイルドカードも指定可能
find . -type f -print # 通常ファイル
find . -type d -print # ディレクトリ

【chmod コマンド】

ファイルに対する操作権限を変更するコマンド。 権限(=パーミッション)は、数値や記号の組み合わせで表現可能である(以下参考)

  • 数値の場合
    • 4: 読み取り権限
    • 2: 書き込み権限
    • 1: 実行権限
  • 記号の場合
    • r: 読み取り権限
    • w: 書き込み権限
    • x: 実行権限

数値例:chmod 755 hoge.txt

  • 755 はそれぞれファイル所有者(user)、グループ(group)、その他(others)の権限を指している。
  • 所有者に読み取り、書き込み、実行の全権限、グループとその他のユーザーに読み取りと実行の権限を与えている。

記号例 1: chmod u+x hoge.txt

  • user に実行権限を付与。

記号例 2: chmod go-rw hoge.txt

  • グループとその他のユーザーから読み取りと書き込みの権限を剥奪。

【chown コマンド】

ファイルやディレクトリの所有権を変更するコマンド。 所有権は、ユーザー:グループという書き方ができる。 -Rオプションで、ディレクトリ内のすべてのディレクトリとファイルに適用可能。

chown -R root:root hogedir/

【ps コマンド】

OS 上で実行されているプロセス一覧を表示するコマンド。

ps

PID TTY           TIME CMD
65680 ttys001    0:00.14 -zsh -g --no_rcs
14750 ttys002    2:38.07 fish (figterm)
14757 ttys004    2:08.19 fish (figterm)

【kill コマンド】

実行中のプロセスを終了するためのコマンド。 プロセス ID を指定、さらには-9オプションで強制終了も可能。

kill <プロセスID>
kill -9 <プロセスID>

Vimの基本操作について

本記事では、筆者の備忘録として Vim の基本操作をまとめます。 vimtutor と呼ばれる、vimチュートリアルの内容がベースになっています。

Vim って何?

まず、Vim とはなにかを説明します。 VimUnix 系のシステムや Linux で使用される高機能なテキストエディタです。 複数のモードと沢山のコマンドを組み合わせることで、テキスト編集操作をキーボードのみで行うことができます。

基本的なコマンドについて

Vimでよく使われるコマンドについて、下記に分類して紹介しようと思います。

  • 移動用コマンド
  • テキスト編集用コマンド
  • 検索用コマンド
  • 置換用コマンド
  • モード変更用コマンド
  • コマンドラインモード用コマンド
  • その他の便利コマンド

移動用コマンド

コマンド 意味
h カーソルを下に移動
j カーソルを下に移動
k カーソルを下に移動
l カーソルを下に移動
gg カーソルを一番上の行に移動
G カーソルを一番下の行に移動
0 カーソルを行の先頭に移動
$ カーソルを行の最後に移動
w カーソルを単語末尾に移動(空白含む)
e カーソルを単語末尾に移動(空白含まない)

テキスト編集用コマンド

コマンド 意味
dw カーソル位置から次の単語まで削除
de カーソル位置から単語の末尾まで削除
d$ カーソル位置から行末尾まで削除
dd カーソルのある行全体を削除
yy カーソルのある行全体をコピー
p 最後に削除された行をカーソルの後に貼り付け
P 最後に削除された行をカーソルの位置に貼り付け

検索用コマンド

コマンド 意味
/ /<検索文字>で検索
? ?<検索文字>で検索(逆方向)
% 対応する(, [, { 等の括弧を検索

置換用コマンド

コマンド 意味
:s/old/new/ その行で最初に見つかった old を new へ置換する
:s/old/new/g その行にある old を すべて new へ置換する
:%s/old/new/g ファイル内の old を すべて new へ置換する

モード変更用コマンド

コマンド 意味
i カーソルのある位置から編集スタート(Insert モード変更)
a カーソルのある次の位置から編集スタート(Insert モード変更)
esc キー ノーマルモードに戻る

コマンドラインモード用コマンド

ノーマルモードから:と入力することで、コマンドラインモードに入ることができる

コマンド 意味
:w ファイルを保存
:q vim を終了
:q! vim を強制終了
:wq ファイルを保存して終了

その他の便利コマンド

コマンド 意味
u 前回の動作取り消し
U 行全体の変更を取り消し
Ctrl-R 取り消し操作の取り消し

最後に

Vim は、実際に普段から使う癖をつけないと、コマンド数も無数にあるためなかなか覚えられないなと感じました。 普段は エディタで VScode を使うことが多いので、Vim拡張機能を取り入れて練習してみようと思います。

TypeScript力をつけたい

フロントエンド開発においては必須のTypeScriptを根本的に理解したい。

それがきっかけで、最近は以下の書籍を読んでいます。 まだ4分の1程度ですが、TypeScript初心者からでもわかりやすい表現で非常に詳しく書かれているので、入門書としては最適だと思います。

gihyo.jp

読んだ内容は、Zennのスクラップで残すようにしています。 まだまだ読み切るのには時間が掛かりそうですが、コツコツ進めていきたいですね🫐

zenn.dev