dockerを用いたRails環境構築（VSCode）

## 1. Dockerとは？

Dockerは、アプリケーションを簡単に動かすための「箱」を作るツールです。この箱は `コンテナ` と呼ばれます。  
コンテナの中には、アプリケーションを動かすのに必要なソフトウェアや設定が全部入っています。

たとえば、Railsアプリを動かすにはRubyやデータベースなどいろいろなものが必要ですが、Dockerを使うと、そういったものをひとまとめにして管理できます。

### 1.1. Dockerのポイント

1. **軽い！**  
   Dockerのコンテナは必要なものだけが入っているので、普通の仮想マシンよりも速くて軽いです。

2. **どこでも動く！**  
   一度作ったDockerのコンテナは、どんなパソコンやサーバーでも同じように動かせます。
   （ただし、各コンテンの対応OSを確認してください）

3. **みんなで同じ環境を使える！**  
   開発チーム全員が同じ環境を使えるので、「自分のパソコンでは動くけど、他の人のパソコンでは動かない」という問題がなくなります。

### 1.2. どんな仕組み？

Dockerには、次の3つの要素があります。

- **Dockerイメージ**  
  コンテナの「設計図」です。アプリを動かすのに必要なもの（Rubyのバージョンやライブラリなど）がここに書かれています。

- **Dockerコンテナ**  
  イメージを元に作られる「実物の箱」です。この中でアプリが動きます。

- **Dockerレジストリ**  
  イメージを保存しておく「倉庫」です。インターネット上のDocker Hubなどからイメージをダウンロードできます。

### 1.3. どんな時に便利？

- **開発環境のセットアップ**  
  初めて参加するプロジェクトでも、Dockerを使えば一瞬で同じ環境を作れます。

- **テストやデプロイ**  
  サーバーにそのままコンテナを持っていけば、アプリを動かす準備がほとんどいりません。

- **トラブル解決**  
  「動かない！」という時も、コンテナごと動かせるので問題の再現が簡単です。

---

はい、ということで、Dockerの前置きはこのぐらいにして、次からはさっそく本題に入っていきます！

## 2. 準備
### 2.1. Docker ID の登録
Dockerを使うには、まず `Dockerイメージ` というDockerで利用できる様座なソフトウェアをイメージ化したものをダウンロードする必要があります。
ダウンロードするには、 `DockerHub` というサービスへのユーザー登録が必要です。
以下のサイトからユーザー登録を行えます。

https://hub.docker.com/signup

### 2.2. Docker Desktopのインストール
以下、公式ページのインストールフォームです。
各OSに合ったものをインストールしてください。

:::note warn
注意
- mac
    - Docker Desktop for Mac with Apple silicon は `M4` などの M○系macです
- windows
    - 基本的に `Docker Desktop for Windows - x86_64` でいいです
    - ARMのWindows使ってる猛者はここには来ないよね？笑
:::

https://docs.docker.com/desktop/setup/install/mac-install/

https://docs.docker.com/desktop/setup/install/windows-install/

#### 2.2.1. Windowsの注意点
基本的に画面の指示に従ってください。
以下は、注意点です。
インストール時、以下の画面が出てきます。
チェックボックスは、チェックした状態にしてください。
![9-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1967037/f8ad036c-1fd7-fa0f-7bd3-c3c02a564624.png)

インストール完了後、起動したら、以下のメッセージが出てくる場合があります。
WSL2のインストールまたは更新が必要というメッセージです。
このメッセージが出てきたら、メッセージ内のURLからWSL2の更新をしたあとに、 `Restart` を押してください。
![9-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1967037/75dd758b-5424-263c-4898-64cf7510926b.png)

#### 2.2.2. Macの注意点
基本的に画面の指示に従ってください。
以下は注意点です。
以下のようにユーザー名、パスワードを聞かれた際には、Maxのユーザー名、パスワードを入力してください。
![4025520c-3314-4830-ba03-7cd583efb9bb.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1967037/da90bf12-1790-d9dd-11f1-6c3e08dc5558.png)

インストールが完了すると、以下のような画面が出力されます
（私はダークモードですが、デフォルトは白い画面のはずです！）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1967037/f306d776-2f10-62a8-8e42-866c0372a53a.png)

### 2.3. VSCodeのインストール
以下の指示に従ってインストールを行ってください。

https://code.visualstudio.com/

## 3. 作業ディレクトリ作成
どこでも問題ないので、ディレクトリを作成します。
以下の章、 [3.1. DockerFile](), [3.2. docker-compose.yml](), [3.3. setup.sh]() は、以下のようなディレクトリ階層になるように配置してください。
なお、ディレクトリ名は docker_test としています。

```text
+---docker_test
|       docker-compose.yml
|       Dockerfile
|       setup.sh
```

各ファイルの中身については、以下の各章の記述です。

### 3.1. Dockerfile
```dockerfile
# ベースイメージの指定
FROM --platform=linux/amd64 amazonlinux:2

# 必要なパッケージのインストール
RUN yum update -y && \
    yum groupinstall -y "Development Tools" && \
    yum install -y sudo

# ec2-user を作成し、パーミッションを設定
RUN useradd -ms /bin/bash ec2-user && \
    echo "ec2-user ALL=(ALL) NOPASSWD:ALL" >> /etc/sudoers && \
    echo "root:root" | chpasswd && \
    mkdir -p /home/ec2-user/environment && \
    echo "ec2-user:password" | chpasswd

COPY setup.sh /home/ec2-user/setup.sh
RUN chmod 755 /home/ec2-user/setup.sh

# /home/ec2-user 以下のすべてのフォルダを ec2-user の所有権限に変更
RUN chown -R ec2-user:ec2-user /home/ec2-user

# ec2-user で作業ディレクトリを使用
USER ec2-user
WORKDIR /home/ec2-user/environment

# デフォルトコマンド
CMD ["bash"]
```
軽く説明します。
- `FROM --platform=linux/amd64 amazonlinux:2`
    - `--platform=linux/amd64` は、M系macに対応するために記載しています
    - ベースイメージは `amazonlinux:2` を使用しています
- `setup.sh`については、[3.3. setup.sh]()で示します

### 3.2. docker-compose.yml
```dockerfile
version: '3.8'
services:
  web:
    build:
      context: ./
      dockerfile: Dockerfile
    container_name: web_container
    stdin_open: true
    tty: true
    user: "ec2-user"  # ec2-user でコンテナを実行
    working_dir: /home/ec2-user/environment  # 作業ディレクトリの設定

volumes:
  db_data:
```

### 3.3. setup.sh
```bash
#!/bin/bash

# 環境変数の設定
RUBY_VERSION="3.1.2"
RAILS_VERSION="6.1.4"
NODE_VERSION="v18.18.2"
NODE_DIR="/usr/local/share/node"

# パッケージ情報の更新
sudo yum update -y

# 必要なツールとライブラリのインストール
sudo yum install -y git curl bzip2 gcc gcc-c++ make openssl-devel readline-devel zlib-devel libffi-devel \
                    patch libyaml-devel zlib zlib-devel make autoconf automake libcurl-devel sqlite-devel mysql-devel

# Rubyのインストール
git clone https://github.com/rbenv/rbenv.git ~/.rbenv
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc
echo 'eval "$(rbenv init -)"' >> ~/.bashrc
source ~/.bashrc
git clone https://github.com/rbenv/ruby-build.git ~/.rbenv/plugins/ruby-build
rbenv install $RUBY_VERSION
rbenv global $RUBY_VERSION
rbenv rehash
rbenv exec gem install bundler

# Node.js のインストールに必要なパッケージをインストール
sudo yum install -y wget tar gzip

# Node.js のダウンロード＆インストール
wget -nv https://d3rnber7ry90et.cloudfront.net/linux-x86_64/node-${NODE_VERSION}.tar.gz
tar -xf node-${NODE_VERSION}.tar.gz
sudo mv node-${NODE_VERSION} ${NODE_DIR}

# バイナリへのリンクを貼る
sudo ln -s ${NODE_DIR}/bin/corepack /usr/local/bin/corepack
sudo ln -s ${NODE_DIR}/bin/node /usr/local/bin/node
sudo ln -s ${NODE_DIR}/bin/npm /usr/local/bin/npm
sudo ln -s ${NODE_DIR}/bin/npx /usr/local/bin/npx

# ダウンロードしたアーカイブファイルを削除
rm -f node-${NODE_VERSION}.tar.gz

# yarn のインストールを確認し、必要ならインストール
if ! command -v yarn > /dev/null; then
  npm install -g yarn
  sudo ln -s ${NODE_DIR}/bin/yarn /usr/local/bin/yarn
fi

# Rails のインストール
gem install rails -v $RAILS_VERSION

# Nokogiri のインストール
gem install nokogiri -v 1.16.6 -- --use-system-libraries

# シェルの設定を再読み込み
source ~/.bashrc
```

## 4. 実行
[3. DockerFile]()
[4. docker-compose.yml]()
[5. setup.sh]()
を同じディレクトリにまとめてください。

このディレクトリをVSCodeで開きます。
VSCode上のターミナル上で、以下のコマンドを実行します。
```bash
docker compose up -d
```
dockerの環境構築が実行されます。
3分ほど待つと、環境構築が完了します。

## 5. Dev Containersのインストール
vscodeの拡張機能の内、 `Dev Containers` をインストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1967037/71491169-6248-2c11-76d1-62a0ff433fcd.png)
インストールが成功すると、vscodeの左下の以下のアイコンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1967037/4d0069b8-2759-c4c5-0dbf-fed8aa34c50a.png)

するとプルダウンが表示されるので、 `実行中のコンテナにアタッチ` をクリックします。
英語表記の場合、 `Attached to Running Container` と表示されています。
ダイアログが表示された場合、すべて肯定の意をクリックしてください。

別ウィンドウでvscodeが起動されます。
ターミナルを起動し、以下のコマンドを実行します。
```bash
sh setup.sh
source $HOME/.bashrc
```

## 終わりに
閲覧頂きありがとうございました！
ご指摘等ございましたらよろしくお願いいたします！