---
# System prepended metadata

title: 基礎STEPの環境構築をDockerで行う

---

# 基礎STEPの環境構築をDockerで行う

## 手順
### 1.cloneして来たリポジトリにDockerfileとcompose.ymlを追加する

Dockerfileの中身(rubyのバージョンは課題に合わせて変えてください)

```dockerfile
# 課題に合わせてrubyのバージョンを変更してください
ARG RUBY_VERSION=ruby:2.6.4
ARG NODE_VERSION='16'

FROM $RUBY_VERSION
ARG RUBY_VERSION
ARG NODE_VERSION
ENV LANG C.UTF-8
ENV TZ Asia/Tokyo
RUN curl -sL https://deb.nodesource.com/setup_${NODE_VERSION}.x | bash - \
&& wget --quiet -O - /tmp/pubkey.gpg https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - \
&& echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list \
&& apt-get update -qq \
&& apt-get install -y build-essential nodejs yarn chromium
RUN mkdir /app
WORKDIR /app
RUN gem install bundler:2.3.17
COPY Gemfile /app/Gemfile
COPY Gemfile.lock /app/Gemfile.lock
RUN bundle install
COPY . /app
```

compose.ymlの中身

```yml
services:
  web:
    platform: linux/arm64/v8
    build: .
    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    tty: true
    stdin_open: true
    volumes:
      - .:/app
      - bundle_data:/usr/local/bundle:cached
      - node_modules:/app/node_modules
    environment:
      TZ: Asia/Tokyo
      SELENIUM_DRIVER_URL: http://chrome:4444/wd/hub
    ports:
      - "3000:3000"
    depends_on:
      - chrome
  chrome:
    image: seleniarm/standalone-chromium:latest
    ports:
      - 4444:4444
volumes:
  bundle_data:
  node_modules:
```

### 2.Dockerの環境準備のためのコマンドを打つ

```
docker compose build
```

### バックグラウンドでのコンテナの起動(同時にrailsサーバーの立ち上げを行っています)

```
docker compose up -d
```

止める時は`docker compose down`を打つとコンテナを停止できます

### コンテナの中に入る(Dockerを使う時はコンテナの中にはいって`rails g ~`とか`bundle install`みたいなコマンドを打つと楽です)

```
docker compose exec web bash
```

`root@なんちゃらかんちゃら:/app#`みたいなのが表示されればコンテナに入れてます

`exit`と打つとコンテナから出られます

### 上記のDockerのセットアップが出来たら課題のREADMEに合わせて環境構築をしていきましょう(`rails s`はコンテナ起動時に実行されているので打たないでください)

基礎編の例
```
bundle install --path vendor/bundle
cp config/database.yml.default config/database.yml
bundle exec rails db:setup
```

### `http://localhost:3000`にアクセス出来れば成功です

### RSpecを実行したい場合
自動レビュー課題のようにRSpecを自分のPC上で実行して確認することをしたい場合Capybaraの設定を変えれば実行できます

課題ごとにダウンロードする`spec`フォルダの`spec/support/capybara.rb`を変更してください

`spec/support/capybara.rb`を下記の記述で置き換える

```ruby=
RSpec.configure do |config|
  config.before(:each, type: :system) do
    Capybara.register_driver :remote_chrome do |app|
      options = Selenium::WebDriver::Chrome::Options.new
      options.add_argument('no-sandbox')
      options.add_argument('headless')
      options.add_argument('disable-gpu')
      options.add_argument('window-size=1680,1050')
      Capybara::Selenium::Driver.new(app, browser: :remote, url: ENV['SELENIUM_DRIVER_URL'], options: options)
    end
    driven_by :remote_chrome
    Capybara.server_host = IPSocket.getaddress(Socket.gethostname)
    Capybara.server_port = 4444
    Capybara.app_host = "http://#{Capybara.server_host}:#{Capybara.server_port}"
    Capybara.ignore_hidden_elements = false
  end
end
```

自動レビューは独自のspecフォルダを利用するので変更後pushしてしまっても基本的には問題ないはずです