RailsプロジェクトをDocker化してみた

はじめに

どうも、yukiです。

この記事では既存のRailsプロジェクトをDocker化する手順をまとめてみました。

Dockerfileの作成

まずはプロジェクトに合わせたDockerfileを作成していきます。

私のプロジェクト例だと以下のようになります。

環境

FROM ruby:3.2.2

RUN apt-get update && apt-get install -y build-essential \
    libpq-dev \
    nodejs \
    postgresql-client

WORKDIR /myapp

COPY Gemfile Gemfile.lock /myapp/

RUN bundle install

RailsはGemfileを見てバージョンを決定するので、Dockerfileにコピーしておきます。 Postgresのクライアントもインストールしておきます。

docker-compose.ymlの作成

volumes:
  db-data:

services:
  web:
    build: .
    platform: linux/amd64
    command: >
      bash -c "rm -f tmp/pids/server.pid &&
               bundle exec rails server -b '0.0.0.0'"

    ports:
      - '3000:3000'
    environment:
      - 'DATABASE_PASSWORD=postgres'
    volumes:
      - .:/myapp
    tty: true
    stdin_open: true
    depends_on:
      - db
    links:
      - db
  db:
    image: postgres:12
    platform: linux/amd64
    volumes:
      - 'db-data:/var/lib/postgresql/data'
    environment:
      - 'POSTGRES_PASSWORD=postgres'
      - 'POSTGRES_USER=postgres'

mac m1チップ環境ではplatform: linux/amd64を指定しないとエラーが出ると聞きましたので、明示的に指定しました。

これを指定すると動作が重くなってしまうという話も耳に入りましたが、今回は目を瞑ります。

start.shの作成

#!/bin/bash

docker compose build

docker-compose run --rm web rails db:prepare

docker-compose up

廉価版entrypoint.shのようなものです。ビルド、データベースの作成、サーバーの起動を行います。

このアイデアはいまいちで、せっかくならちゃんとENTRYPOINTで実装すべきでした。

実行

./start.sh

localhost:3000でサーバーが起動していれば完了です。これでRailsプロジェクトがDocker化されました。

以降はbuildが必要なければ、docker compose upで起動します。

おわりに

次は自分の開発環境をDocker化するか、課題を進めるか迷っています。もっとDockerの理解度を深めたいので前者にだいぶ傾いています。

9月の学習振り返り

どうも、yukiです。

この記事では9月の学習の振り返りをしていきます。

9月の学習時間

結果: 115h

9月の後半は義父の会社を1週間ほど泊まりがけで手伝いに行ったので、全体としての学習時間は少なくなってしまいました。

その間Windowsの作業環境しかなかったので、WSL2を使ってLinux環境を構築しました。

隙間時間はvimの環境構築とDockerの勉強を8:2で行いました。スニペットやlspなどの設定を行い、少しずつvimに慣れてきました。

9月に取り組んだ学習

  • HTML/CSSの基本
  • Web開発の基礎を学ぶ
  • Docker ← 取り組み中

よかったところ

  • HTML&CSSで要件に沿ってレイアウトを作成できたことが自信に繋がりました。
    メイン画像の表示はbackground imageでcss側で設定する方が楽ですが、imgタグで表示する方法を試行錯誤することで画像の取り扱いが上達したように思います。

  • vimについても、補完プラグインやnvim builtin lspを設定することでIDEが裏で行ってくれている動作の理解が深まりました。 細かな挙動の設定がかなり面白く、それに時間をかけてしまうことが玉に瑕です。
    いずれはshell scriptで環境構築を自動化したいと思っています。

  • Dockerについては基本的な使い方を学び、実際に使ってみることでコンテナの概念やイメージの扱い方を理解できました(まだまだ基礎中の基礎ですが)。

改善点

妻との協議で土日の学習が厳しくなったので、平日の学習効率を高めることを意識していきたいです。

10月の目標

先月の目標であった月160h↑が達成できていないので、引き続き達成を目指して取り組んでいきます。

GitHub Pagesの使い方をまとめてみた。

はじめに

どうも、yukiです。

今回はGitHub Pagesの使い方について簡単にまとめてみました。

GitHub Pagesとは

自分のPC等で作成したWebページを簡単にインターネット上に公開できるサービスです。

Webページの公開方法

流れを簡単にまとめると以下のようになります。

それでは、実際に手順を見ていきましょう。

GitHubのアカウントを作成する

  • GitHubにアクセスして、アカウントを作成します。
  • アカウントが作成できたら、ログインします。
  • これでGitHubのアカウント作成は完了です。

リポジトリを作成する

  • GitHubにログインしたら、右上の「+」をクリックして「New repository」を選択します。

  • 任意のリポジトリ名を入力し(自分のpcの公開したいフォルダ名と合わせるのがおすすめ)、「Create repository」をクリックします。

  • これでリポジトリの作成は完了です。
  • ちなみに無料版では非公開(Pravate)のリポジトリは公開できないため、Publicリポジトリである必要があります。しかし、デフォルトでPublicになっているため、特に設定は必要ありません。

リポジトリにWebページのファイルをアップロードする

ここから少し難しいです。GitHub Pagesの設定をするためには、リポジトリにWebページのファイルをアップロードする必要があります。

  • まず、自分のPCにある公開したいhtml、cssjavascriptファイルを確認します。これらはひとつのフォルダにまとめておいてください。フォルダの場所は複雑化させないためにも、/ユーザ名/の配下にします。

公開したいhtmlファイルがフォルダのすぐ下(直下)にないと、ややこしい手順を踏むことになります。

以下のような構造なら問題ありません。

  • ターミナルを開いて、公開するフォルダに移動します。

ターミナルにフォーカスを当て、cdと入力して半角スペースを入力し、作成したフォルダ名を入力後 Enterを押します。

ターミナルは開いたままにしておいてください。

  • GitHubの作成したリポジトリ画面まで移動すると、以下のようなコードが記載してあるのでターミナルにコピペして実行していきます。

  • その後、以下のコードをターミナルで実行していきます。
git add .
git commit -m "main commit"
git push origin main
  • これでリポジトリにWebページのファイルがアップロードされました。

GitHub Pagesの設定をする

  • リポジトリのトップページに移動し、右上の「Settings」をクリックします。
  • 画面左のメニューから「Pages」を選択します。
  • Branchを「main」に設定し、「Save」をクリックします。

  • しばらくして画面を更新すると、GitHubPagesのURLが表示されます。

  • Visit siteをクリックすると、Webページが表示されます。
  • これでGitHub Pagesの設定は完了です。お疲れ様でした!

おわりに

はじめて自分のページを公開できた時の達成感、それはもう感動もひとしおですよね!

僕は嬉しさのあまりXでいっぱいツイートしちゃいました、、!

最近使用したgit コマンドをまとめてみた。

はじめに

どうも、yukiです。

今回は最近使用したgit コマンドをまとめてみました。

git pushを取り消す

  • 自分しか変更しないことがわかっているブランチだったので、git resetにて対応しました。
  • 以下のコマンドで前のコミットの状態に戻る。--softはローカルでの変更等を残す、--hardはcommit,add,ソース含め全部戻す。
 $ git reset --soft HEAD^
  • -fで強制的にカレントブランチをpushすると、履歴を残さず修正できます。
 $ git push -f origin HEAD

Pull requestに記録が残っていることを示す写真
Pull request上では記録に残っていました。

  • gitに履歴を残して修正したい場合は、git revertを使います。複数人で作業しているブランチだと、どちらの方法もコンフリクトがこわいですね。

削除したリモートブランチがローカルに残ってる

  • git branch -aで、削除したブランチがローカルにたくさん残っていることに気付きました。
  • feachするときに-pruneをつけて解決。
$ git fetch --prune ( git fetch -p )
  • 毎回オプションつけるのめんどくさいので、fetch時に自動でpruneしてくれるよう.gitconfigに設定しました。
[fetch]
    prune = true

参考

おわりに

ガチャガチャしているうちに、座学で得た知識の定着が始まってきました。HEAD、index、リモート/ローカルブランチとか。

git revertの理解が浅いので、どっかで実験したいなあ。

8月の学習振り返り

どうも、yukiです。

この記事では8月の学習の振り返りをしていきます。

8月の学習時間

結果: 137.1h

後半は失速気味でしたが、初月としては及第点かなと自己評価しています。

何事も習慣をつけることは大変ですが、課題の内容・順序が秀逸でストレスなく知識を身につけることができています。

8月に取り組んだ学習

よかったところ

ターミナルの認識が「難しげな黒い画面」から「作業を楽にしてくれるツール」の認識に変わったこと、単純ですがこれまたいい成果だなと感じています。

GItもVimにも言えることですが、難しそうで手が伸びなかった存在に軽々と足を踏み入れられるようになったことを大きな成長と捉えています。

あとは英語の情報にも気後れしなくなったことですね。最近ではtmux split-windowで-pを指定すると"Size missing"になる原因を日本語情報で見つけられず、以下のIssueで解決しました。

tmux Issue

改善点

学習時間が足りていないように感じるので、日曜以外は毎日学習できるように取り組んでいきたいと思います。

9月の目標

上記の継続を意識しながら、月160h↑学習時間を取りたいです。

Linuxの基本コマンドをまとめてみた。

はじめに

どうも、yukiです。

この記事では、Linuxの基本的なコマンドについてまとめてみました。

1. cd コマンド

  • 説明: cd (Change Directory) コマンドは、現在のディレクトリを移動するために使用します。

  • 書式

$ cd [オプション] ディレクトリ
  • オプション

2. pwd コマンド

  • 説明: pwd(Print Working Directory) コマンドは、現在の作業ディレクトリのパスを表示します。

  • 使用例

$ pwd  # 例えば /home/user/Documents と表示される

3. ls コマンド

$ ls [オプション] ディレクトリ
  • オプション

    • -l: 詳細情報(パーミッション、所有者、サイズなど)を表示
    • -a: 隠しファイルも含めてすべてのファイルを表示
    • -h: 人間が読みやすい形式で表示
  • 使用例

$ ls -la /home/user/Documents
total 19
drwxr-xr-x  3 user user  4096 Aug 19 12:00 . 
drwxr-xr-x 15 user user  4096 Aug 19 10:00 ..
-rw-r--r--  1 user user    50 Aug 19 10:30 .hiddenfile
  • -lオプションで表示する詳細情報の読み方については、後述します。

4. mkdir コマンド

  • 説明: mkdir (Make Directory) コマンドは、新しいディレクトリを作成します。

  • 書式

$ mkdir [オプション] ディレクトリ名
$ mkdir new_folder1
$ mkdir -p /home/user/Documents/new_folder2

# 以下は`-p`を指定していないのでエラー
$ mkdir /home/user/Documents/new_folder_error

5. rmdir コマンド

  • 説明: rmdir (Remove Directory) コマンドは、空のディレクトリを削除します。

  • 書式

$ rmdir ディレクトリ名
  • 使用例
$ rmdir old_folder

# using_folderディレクトリが空でない場合、以下はエラー
$ rmdir using_folder

6. cat コマンド

  • 説明: cat (Concatenate) コマンドは、ファイルの内容を表示したり、ファイルを結合したりします。

  • 書式

$ cat [オプション] ファイル名
  • オプション

    • -n: 行番号を付けて表示
  • 使用例

# file1.txtとfile2.txtを結合してcombined.txtに出力
# 既に出力先のファイルがある場合、上書きされるので注意

$ cat file1.txt file2.txt > combined.txt
  • リダイレクト演算子について

    • >: 標準出力を指定したファイルに上書きします。
    • >>: 標準出力を指定したファイルに追記します。
    • 2>: 標準エラー出力(エラーメッセージなど)を指定したファイルに上書きします。
    • 2>>: 標準エラー出力を指定したファイルに追記します。
    • &>: 標準出力と標準エラー出力上書きして同じファイルに書き込みます。
    • &>>: 標準出力と標準エラー出力追記して同じファイルに書き込みます。

7. less コマンド

  • 説明: less コマンドは、ファイルの内容を1ページずつ表示し、スクロールして閲覧できます。

  • 書式

$ less ファイル名

8. tail コマンド

  • 説明: tail コマンドは、ファイルの最後の数行を表示します。

  • 書式

$ tail [オプション] ファイル名
  • オプション

    • -n 数: 最後の数行を表示(デフォルトは10行)
  • 使用例

$ tail -n 30 file.txt  # 最後の30行を表示

9. touch コマンド

  • 説明: touch コマンドは、新しい空のファイルを作成するか、既存のファイルのタイムスタンプを更新します。

  • 書式

$ touch ファイル名

10. rm コマンド

  • 説明: rm (Remove) コマンドは、ファイルやディレクトリを削除します。

  • 書式

$ rm [オプション] ファイル名
  • オプション

    • -r: ディレクトリとその中身を再起的に削除
    • -f: メッセージを表示せず強制的に削除
    • -i: 削除前に確認メッセージを表示
  • 使用例

# 警告メッセージなしにディレクトリを強制削除。非常に危険なコマンド!!
$ rm -rf directory/ 
  • rmコマンドで削除したファイルはWindowsMacのようにゴミ箱から元に戻せないので注意しましょう。

11. mv コマンド

  • 説明: mv (Move) コマンドは、ファイルやディレクトリを移動または名前を変更します。

  • 書式

$ mv [オプション] ソース 目標
  • 使用例
# ソースに存在しないファイル/ディレクトリ名を指定した場合、目標の名前に変更
$ mv oldname.txt newname.txt

# ソースに存在するファイル/ディレクトリ名を指定した場合、目標へ移動
$ mv file.txt /home/user/Documents/

12. cp コマンド

  • 説明: cp (Copy) コマンドは、ファイルやディレクトリをコピーします。

  • 書式

$ cp [オプション] ソース 目標
# file.txtを目標へコピー
$ cp file.txt /home/user/Documents/

# directory/ を目標へコピー
$ cp -r directory/ /home/user/backup/

13. ln コマンド

  • 説明: ln (Link) コマンドは、ファイルのリンク(ショートカット)を作成します。

  • 書式

$ ln [オプション] ソース リンク名

使用例

$ ln -s /home/user/file.txt /home/user/link.txt

リンクの種類

  • ハードリンク
    • 一つのファイルの実体に複数の名前をつけます。
    • 元のファイルを削除しても消えません。
    • ファイルを削除したい場合、全てのハードリンクを削除する必要があります。
  • シンボリックリンク
    • リンク先のパス名が書かれたファイルです。
    • リンク先がファイルの実体です。
    • このリンクを残したまま実体のファイルを削除/移動すると、(シンボリックリンクの)ファイルを参照できなくなります。

14. find コマンド

  • 説明: find コマンドは、指定した条件に合うファイルやディレクトリを検索します。

  • 書式

$ find 検索パス [オプション] 検索ディレクトリ/ファイル名
  • オプション

    • -name: 名前に一致するファイルを検索
    • -type d: ディレクトリのみを検索
    • -type f: ファイルのみを検索
  • 使用例

# user/の拡張子が.txtのものを表示
$ find /home/user -name "*.txt"

# log/の拡張子が.logのファイルを表示
$ find /var/log -type f -name "*.log"

15. chmod コマンド

$ chmod [オプション] パーミッション ファイル名
  • 使用例
# 所有者に読み書き実行、その他に読み取り権限を付与
# 755 = それぞれのパーミッションを8進数表記で足して指定
$ chmod 755 script.sh 
  • ファイルのオーナーとグループ
    • ファイルにはオーナーとグループが設定されていて、権限管理されています。
    • オーナー・・・ファイルの所有者のことです。
    • グループ・・・グループに権限を与えることで複数のユーザーの権限を一括管理できます。

    • ls -lコマンドで確認してみます。

# `-rwxr--r--  1`以降の2単語で確認できます。順にオーナー、グループです。
$ ls -l /home/user/Documents
-rwxr--r--  1 owner group  4096 Aug 19 12:00 .  

-rwxr--r-- は、パーミッションフィールドです。最初の一文字はファイルの種類を意味します。

フィールド 説明
- 通常のファイル
d ディレクト
l シンボリックリンク

二文字目以降は、所有者、グループ、その他ユーザーのパーミッションを表しています。

フィールド 所属 説明
rwx 所有者(オーナー) 読み取り (read)、書き込み (write)、実行権あり (execute)
r-- グループ 読み取り (read) のみ
r-- その他のユーザー 読み取り (read) のみ

読み方の例として、-rwxr--r--パーミッションフィールドの意味を紐解いてみます。

フィールド 説明
- 通常のファイル
rwx 所有者(オーナー)は、読み取り、書き込み、および実行が可能
r-- グループは、読み取りのみ可能
r-- その他のユーザーも、読み取りのみ可能

16. chown コマンド

  • 説明: chown (Change Owner) コマンドは、ファイルやディレクトリの所有者を変更します。

  • 書式

$ chown [オプション] 新しい所有者/グループ ディレクトリ/ファイル名
  • オプション

    • :新しいグループ: 所有グループを変更
  • 使用例

$ chown user:group file.txt

17. ps コマンド

  • 説明: ps (Process Status) コマンドは、現在動作しているプロセスの情報を表示します。

  • 書式

$ ps [オプション]
  • オプション

    • aux: すべてのユーザーのプロセスを表示し、詳細な情報を表示
  • 使用例

# `-`はいらない
$ ps aux

18. kill コマンド

  • 説明: kill コマンドは、指定したプロセスを終了させます。

  • 書式

$ kill [オプション] プロセスID
  • オプション

    • -9: 強制終了 (SIGKILL) ← 非推奨
    • -15: 終了 (デフォルト)

おわりに

Linuxでは--helpmanコマンドで正確なコマンド情報を得ることができるので、まずはこれらのコマンドを試してみましょう!

もし誤記、間違い等ありましたらご指摘よろしくお願いいたしますm(__)m

vimの基本操作

はじめに

どうも、yukiです。
今回は最近vimに入門した自分が、基本操作についてまとめてみました。

vimとはテキストエディタの一種です。コマンドを駆使することで、キーボードのホームポジションからほとんど動かずに操作ができるといった特徴があります。

これからvimを学習しようという方は、まず「vimtutor」から取り掛かることをおすすめします。


↓ターミナルに以下のように入力し、エンターを押して始めます。

$ vimtutor

このチュートリアルの文章自体をvimで編集しながら進めていくので、ハンズオンでvimの使い方を学ぶことが出来ます。

紹介が終わったところで、さっそく本題へ参りましょう!

基本操作

モードについて

  • vimにはカーソルを移動するためのモードや、文字を入力するためのモードがあります。
モード 説明 切り替えキー
ノーマルモード カーソル移動やコマンド実行を行うモード esc
インサートモード 文字入力を行うモード i
ビジュアルモード 範囲を指定するモード v
コマンドモード 指定のコマンドを入力するモード :

コマンドについて

  • コマンドによっては、コマンドの前に数字を入力することで、その数字分効果が期待できるものがあります。

  例. 5h → カーソル位置から5つ左に移動、4dd → カーソル位置から4行削除

起動

コマンド 説明
vim hoge.txt hoge.txtを開く(読み書き可能)

カーソル移動

コマンド 説明
h 左にカーソル移動
j 下にカーソル移動
k 上にカーソル移動
l 右にカーソル移動
w 次の単語へ移動
b 前の単語へ移動
e 次の単語の最後へ移動
^ 行頭へ移動
$ 行末へ移動
gg ページの一番上に行く
G ページの一番下に行く

入力

コマンド 説明
i カーソル位置から入力
a カーソル位置の次の文字から入力
o 改行して入力
O 上に行を挿入して入力
A 行の最後から入力
I 行の最初から入力

削除/変更

コマンド 説明
x カーソル位置の文字削除
dw 次の単語まで削除
dd カーソルがある行を削除
d$ カーソルがある行のカーソルより後ろを削除
ce 単語の末尾まで変更
cc 行全体を削除してインサートモードに入る

コピー/ペースト

コマンド 説明
y コピー
yy カーソルがある行をコピー
p カーソルの後ろにペースト
P カーソルの手前にペースト

検索/置換

コマンド 説明
/hoge hogeを下方向検索
?hoge hogeを上方向検索
n 次の検索結果に移動
R カーソル位置から入力した文字で既存のテキストを置換
:s/変更前の単語/変更後の単語 カーソル行の最初にある変更前の単語を変更後の単語に置換
:s/変更前の単語/変更後の単語/g カーソル行の全ての変更前の単語を変更後の単語に置換

編集

コマンド 説明
u 変更を取り消す(undo)
Ctrl + r 直前に取り消した操作をやり直す(redo)

ファイル操作

コマンド 説明
:w 保存
:q ファイルを閉じる
:wq 保存してファイルを閉じる

おわりに

基本的なコマンドを押さえたら、応用的なコマンドにも挑戦してみたいですね!

もし誤記、間違い等ありましたらご指摘よろしくお願いいたしますm(__)m