web_bonsaiの日記

web開発の学習日記です。誰に見せるためでもないただの日記です。

GitHub Actionsでテストを自動化する | Mac + Docker + Rails その0028

参考にさせていただいたページ

今日の環境

ローカル

  • M1 Mac
  • macOS Monterey
  • docker 20.10.14
  • docker-compose 2.5.0

リモート

  • さくらのVPS
  • CentOS 9
  • docker 20.10.16
  • docker-compose 1.29.2

概要

二つのjobを並列で実行するようにしました。

共通の処理はaction.ymlにまとめました。

.github/workflows/rails_test.ymlの作成とその記述内容

ワークフローのディレクトリとファイルを作成します。

% mkdir -p .github/workflows/
% vim .github/workflows/rails_test.yml

以下の通り記述します。

name: Rails Test Workflow
on: push
jobs:
  rubocop:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: setup_docker_compose_services
        uses: ./.github/actions/setup_docker_compose_services
      - name: docker-compose run --rm app rubocop
        run: docker-compose run --rm app rubocop
  rspec:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: setup_docker_compose_services
        uses: ./.github/actions/setup_docker_compose_services
      - name: docker-compose run --rm app rspec
        run: docker-compose run --rm app rspec

.github/actions/setup_docker_compose_services/action.ymlの作成とその記述内容

actionを格納するディレクトリとファイルを作成します。

% mkdir -p .github/actions/setup_docker_compose_services/
% vim .github/actions/setup_docker_compose_services/action.yml

以下の通り記述します。

name: "setup_docker_compose_services"
runs:
  using: "Composite"
  steps:
    - name: create docker-compose.yml
      run: cp docker-compose.sample.yml docker-compose.yml
      shell: bash
    - name: create nginx.conf
      run: cp nginx/nginx.sample.conf nginx/nginx.conf
      shell: bash
    - name: create nginx log files
      run: touch nginx/log/nginx/access.log && touch nginx/log/nginx/error.log
      shell: bash
    - name: create rails database.yml
      run: cp rails/config/database.sample.yml rails/config/database.yml
      shell: bash
    - name: docker-compose run --rm app bundle install
      run: docker-compose run --rm app bundle install
      shell: bash
    - name: docker-compose build
      run: docker-compose build
      shell: bash
    - name: docker-compose run app rails db:create
      run: docker-compose run app rails db:create
      shell: bash
    - name: docker-compose -v action
      run: docker-compose -v
      shell: bash

簡単なsystem specを書いて実行してみる | Mac + Docker + Rails その0027

参考にさせていただいたページ

今日の環境

ローカル

  • M1 Mac
  • macOS Monterey
  • docker 20.10.14
  • docker-compose 2.5.0

リモート

  • さくらのVPS
  • CentOS 9
  • docker 20.10.16
  • docker-compose 1.29.2

Gemfileについて

以下のように初めから記述されていました。

group :test do
  # Use system testing [https://guides.rubyonrails.org/testing.html#system-testing]
  gem "capybara"
  gem "selenium-webdriver"
  gem "webdrivers"
end

rails/app/views/homes/index.html.erbの編集

以下の通り編集しました。

<div>
  <h1 data-testid="PageHeading">トップページ</h1>
</div>

rails/spec/system/homes/index_spec.rbの作成とその記述内容

以下の通り記述しました。

RSpec.describe 'トップページ', type: :feature do
  it '見出し文字列が正しい' do
    visit root_path

    expect(page.find('[data-testid="PageHeading"]')).to have_text 'トップページ'
  end
end

rails/spec/system/support/capybara_setup.rbの作成とその記述内容

以下の通り記述しました。

Capybara.app_host = "http://localhost"

# 特にSeleniumを使う場合、開発者はこのmax wait timeを増やす傾向がよく見られる
# Cupriteの場合そうした設定は不要
# ここではCapybaraのデフォルト値を明示的に指定している
Capybara.default_max_wait_time = 2

# `has_text?`や同種のマッチャーでホワイトスペースを正規化する
# (つまり改行や末尾スペースなどは無視される)
# こうすることで、UIにささいな変更が入っても影響されにくくなる
Capybara.default_normalize_ws = true

# システムテストで生成されるファイル(スクショやダウンロードファイルなど)の置き場所
# このパスを外部から設定可能にしておくとCIなどで便利かもしれない
Capybara.save_path = ENV.fetch("CAPYBARA_ARTIFACTS", "./tmp/capybara")

rails/spec/system_helper.rbの作成とその記述内容

以下の通り記述しました。

# RSpec Railsの一般的な設定を読み込む
require "rails_helper"

# 設定ファイルとヘルパーを読み込む
Dir[File.join(__dir__, "system/support/**/*.rb")].each { |file| require file }

system specを実行してみる

以下のコマンドでローカルでsystem_specが実行できるようになりました。

% docker-compose run --rm app rspec

rubyのファイルを追加したのでrubocopも実行しておく

% docker-compose run --rm app rubocop -a

rubocopをインストールする | Mac + Docker + Rails その0026

参考にさせていただいたページ

今日の環境

ローカル

  • M1 Mac
  • macOS Monterey
  • docker 20.10.14
  • docker-compose 2.5.0

リモート

  • さくらのVPS
  • CentOS 9
  • docker 20.10.16
  • docker-compose 1.29.2

Gemfileの編集

以下の行をdevelopmentグループに追記しました。

group :development do
  gem 'rubocop', require: false
  gem "rubocop-performance", require: false
  gem "rubocop-rails", require: false
  gem "rubocop-rspec", require: false
end

bundle install

bundle installします。

% docker-compose run app bundle install

設定をauto-genしてみる

以下のコマンドを実行してみました。

$ docker-compose run app rubocop --auto-gen-config

上手くいきません...。

[+] Running 1/0
 ⠿ Container web_bonsai-db-1  Running                                                                                                                                                                  0.0s
[+] Running 1/1
 ⠿ Container web_bonsai-app-1  Started                                                                                                                                                                 0.2s
/usr/bin/entrypoint.sh: line 8: exec: rubocop: not found

docker-compose buildしてみる

以下の通り実行しました。

% docker-compose build

もう一度設定をauto-genしてみる

以下の通り実行しました。

% docker-compose run app rubocop --auto-gen-config

今度は上手くいきました。

rails/.rubocop.ymlの編集

RuboCopの機能を拡張する

以下の行を追記しました。

require:
  - rubocop-performance
  - rubocop-rails
  - rubocop-rspec

最新のCopを自動で有効にする

# AllCopsオプションで全てのCopsを対象にできる
AllCops:
  NewCops: enable

ここまでやったrails/.rubocop.ymlの記述内容

以下のようになりました。一行目は生成時に記述されています。

inherit_from: .rubocop_todo.yml

require:
  - rubocop-performance
  - rubocop-rails
  - rubocop-rspec

# AllCopsオプションで全てのCopsを対象にできる
AllCops:
  NewCops: enable

使い方

通常

以下のコマンドを実行します。

% docker-compose run app rubocop

ファイルを指定して実行したい場合は以下のような感じで実行します。./path/to/fileはご自身の環境に合わせて変更してください。

% docker-compose run app rubocop ./path/to/file

SafeなCopのみ自動修正

% docker-compose run app rubocop -a ./path/to/file

Safe、UnsafeなCopを自動修正

% docker-compose run app rubocop -A ./path/to/file

rspec-railsをインストールする | Mac + Docker + Rails その0025

参考にさせていただいたページ

GitHub - rspec/rspec-rails: RSpec for Rails 5+

今日の環境

ローカル

  • M1 Mac
  • macOS Monterey
  • docker 20.10.14
  • docker-compose 2.5.0

リモート

  • さくらのVPS
  • CentOS 9
  • docker 20.10.16
  • docker-compose 1.29.2

実施した手順

Gemfiileのdevelopmentとtestのグループにgemを追記

group :development, :test do
  gem 'rspec-rails'
end

bundle installする

% docker-compose run --rm app bundle install

docker-compose buildする

Gemfileを編集したのでbuildします。

% docker-compose build

定型的な設定ファイルの作成

% docker-compose run --rm app rails generate rspec:install

以下の通りファイルが生成されました。

      create  .rspec
      create  spec
      create  spec/spec_helper.rb
      create  spec/rails_helper.rb

rspecコマンドを実行してみる

% docker-compose run --rm app rspec

本番環境でブラウザからアクセスできるようにする | Mac + Docker + Rails その0024

今日の環境

ローカル

  • M1 Mac
  • macOS Monterey
  • docker 20.10.14
  • docker-compose 2.5.0

リモート

  • さくらのVPS
  • CentOS 9
  • docker 20.10.16
  • docker-compose 1.29.2

ログインして移動する

いつも通りログインします。

web_bonsaiディレクトリに移動します。

$ cd git_repos/web_bonsai

本番環境用のdocker-compose.ymlを作成する

docker-compose.sample.ymlをコピーして、docker-compose.ymlを作成します。

$ cp docker-compose.sample.yml docker-compose.yml

docker-compose.ymlのhttps-portalサービスのenvironmentのDOMAINSを以下のように書き換えます。

    environment:
      DOMAINS: 'web-bonsai.tech -> http://nginx:8000'

docker-compose.ymlのdbサービスのenvironmentのPOSTGRES_PASSWORDを何か強いパスワードに書き換えます。ここでは仮にxxxxxxxxとしておきます。

    environment:
      POSTGRES_PASSWORD: xxxxxxxx

docker-compose.ymlのappサービスの以下の記述を削除します。

    ports:
      - "3000:3000"

docker-compose.ymlのappサービスのcommandを以下の通り書き換えます。

command: bash -c 'rm -f tmp/pids/server.pid && bundle exec pumactl start'

docker-compose.ymlのappサービスのenvironmentのRAILS_ENVをproductionに書き換えて、データベース用のパスワードを先ほどのPOSTGRES_PASSWORDで設定したものと同じにします。変数名はrails/config/database.sample.ymlの記述内容に合わせてMYAPP_DATABASE_PASSWORDにしています。

    environment:
      - RAILS_SERVE_STATIC_FILES=false
      - RAILS_ENV=production
      - MYAPP_DATABASE_PASSWORD=xxxxxxxx

本番環境用のnginx.confを作成する

nginx/nginx.sample.confをコピーして、nginx/nginx.confを作成します。

$ cp nginx/nginx.sample.conf nginx/nginx.conf

以下のようになっている箇所を

    # ドメイン設定
    server_name localhost;

以下のように本番環境に設定したいドメインで書き換えます。

    # ドメイン設定
    server_name web-bonsai.tech;

一旦railsディレクトリを削除する

一回削除します。

$ rm -rf rails/

本番環境でrails newしてbundle installする

ローカル環境構築手順「Docker Composeを使ってローカルでRails7のSSL環境構築 | Mac + Docker + Rails その0006 - web_bonsaiの日記」を参考に作業をします。

以下のセクションをローカル環境と同じように実行します。

  • railsディレクトリを作成
  • rails用のDockerfileの作成とその記述内容
  • rails/Gemfileの作成とその記述内容
  • rails/Gemfile.lockを空で作成
  • entrypoint.shの作成とその記述内容

それからローカル環境と同じように rails new します。

このときサーバーのスペックが低すぎると成功しません。
メモリ512MBのプランだと失敗しました。
メモリ2GBのプランでだと成功しました。

$ docker-compose run --rm --no-deps app rails new . --force --database=postgresql

また、このとき以下のようなエラーが出るかもしれませんが、これはbundle installすれば大丈夫だと思います。

         run  bundle binstubs bundler
Could not find gem 'sprockets-rails' in locally installed gems.
       rails  importmap:install
Could not find gem 'sprockets-rails' in locally installed gems.
Run `bundle install` to install missing gems.
       rails  turbo:install stimulus:install
Could not find gem 'sprockets-rails' in locally installed gems.
Run `bundle install` to install missing gems.

ローカル環境と同じようにbundle installします。

$ docker-compose run --rm app bundle install

rails newで生成されたファイルの所有者とグループをログイン中のユーザーに変更する

$ sudo chown -R ${USER}:${USER} rails/

rails newで生成されたファイルとリポジトリとの差分を整理する

rails newによって生成されたファイルを優先するのか、web_bonsaiリポジトリのファイルを優先するのか、差分を見ながら精査して、ファイルを編集します。

差分を見て、以下の通り実行しました。

$ git checkout rails/.gitignore
$ git checkout rails/config/routes.rb
$ git checkout -f rails/app
$ git checkout -f rails/config/database.sample.yml
$ git checkout -f rails/test/controllers/homes_controller_test.rb

rails/Gemfile.lockはどうして良いかわからなかったのですが、とりあえずadd, commit, pushしました。

gitのuser.emailとuser.nameを設定します。

$ git config --local user.email "何かemail"
$ git config --local user.name "何か名前"

add, commit, pushします。

$ git add rails/Gemfile.lock
$ git commit -m "rails/Gemfile.lockを本番環境からcommit"
$ git push origin main

docker-compose buildする

ローカル環境と同じようにbuildコマンドを実行します。

railsのdefaultのデータベース設定をする

まずはローカル環境でやったのと同じように、rails/config/database.ymlのdefaultの host, username, password の項目を追記します。

productionのデータベース設定をする

以下のようにユーザー名がmyappとなっている箇所を

username: myapp

以下のようにpostgresに変更します。

username: postgres

db createする

本番環境用のdbを作成します。

$ docker-compose run app rails db:create

docker-compose upする

docker-compose upします。

$ docker-compose up

初回はhttps-portalの証明書の設定に時間がかかります。

1〜2分程度で終わるとは思います。

ポート80とポート443からのアクセスを許可する

さくらインターネットの公式のパケットフィルターの設定マニュアル「パケットフィルター — さくらの VPS マニュアル」に沿って、Web(80と443)を許可します。

「追加」ボタンをクリックした後、「設定」ボタンをクリックするのを忘れないようにしましょう。

忘れがちですね...。

ブラウザからアクセスしてみる

ブラウザ(例えばChrome)で「https://web-bonsai.tech/」にアクセスしてみます。

まだhttps-portalの設定がlocalなので、以下のような表示になります。

一旦そのままアクセスしてみます。

以下のような表示になりました。まだrailsの設定が不充分なようです。

railsのログを見る

ctrl + c を押してdocker-composeを止めます。

downもしておきます。

$ docker-compose down

ログを見てみます。

$ cat rails/log/production.log

以下のように書いてあり、cssが無いことがわかりました。

[c43a9eab-b276-48dd-9c3b-d5d17ab3a1c8] ActionView::Template::Error (The asset "application.css" is not present in the asset pipeline.

assets:precompileする

以下のコマンドを実行します。

$ docker-compose run app bundle exec rails assets:precompile RAILS_ENV=production

もう一度docker-compose upしてブラウザからアクセスしてみる

upします。

$ docker-compose up

ブラウザで「https://web-bonsai.tech/」にアクセスしてみます。

正常にrailsのrootページの閲覧ができるようになりました。

ブラウザで「https://web-bonsai.tech/index.html」にもアクセスしてみると、nginx/html/index.htmlのページが表示できました。

SSL証明書を設定する

ctrl + c を押してdocker-composeを止めます。

downもしておきます。

$ docker-compose down

https-portalの設定をproductionにします。

docker-compose.ymlのhttps-portalサービスのenvironmentのSTAGEを以下のように書き換えます。

    environment:
      DOMAINS: 'web-bonsai.tech -> http://nginx:8000'
      STAGE: production

upしなおします。

$ docker-compose up

最初にアクセスしたのとは違うブラウザ(例えばFirefox)で「https://web-bonsai.tech/」にアクセスしてみます。

以下の画像はFirefoxのものですが、SSL証明書が設定されて、安全な接続ができるようになったことが確認できました。

最初にアクセスしたブラウザの方はすぐには「安全な接続」には切り替わらないかもしれません。

docker-compose up -dで起動しなおす

ctrl + c を押してdocker-composeを止めます。

downもしておきます。

$ docker-compose down

up -d します。

$ docker-compose up -d

本番環境にgit cloneする | Mac + Docker + Rails その0023

今日の環境

ローカル

  • M1 Mac
  • macOS Monterey
  • docker 20.10.14
  • docker-compose 2.5.0

リモート

  • さくらのVPS
  • CentOS 9
  • docker 20.10.16
  • docker-compose 1.29.2

サーバーにログインしてsshキーペアを作成

sshでログインします。

sshキーペアを作成します。

$ ssh-keygen -t rsa -b 4096 -C "どの端末で使う鍵か"

GitHubに公開鍵を登録

公開鍵をGitHubに登録します。

公開鍵を開いて

ssh-rsa 〜〜〜〜

の文字列をGitHubに登録します。

公開用のディレクトリ作成

ディレクトリを作成して、ディレクトリの所有者とグループを確認します。

$ mkdir git_repos
$ ls -al

ディレクトリの所有者とグループがログイン中のユーザーでない場合は変更します。

$ sudo chown ${USER}:${USER} ./git_repos/
$ cd git_repos

git cloneする

git cloneします。exampleとしてある箇所は、読み替えてください。

$ git clone git@github.com:example/web_bonsai.git

これで、~/git_repos/web_bonsaiがcloneされました。

Docker Composeをインストールする | Mac + Docker + Rails その0022

参考にさせていただいたページ

今日の環境

ローカル

  • M1 Mac
  • macOS Monterey
  • docker 20.10.14
  • docker-compose 2.5.0

リモート

  • さくらのVPS
  • CentOS 9
  • docker 20.10.16
  • docker-compose 1.29.2

DockerComposeのインストール

公式ページの「Compose のインストール — Docker-docs-ja 20.10 ドキュメント」を参考にインストールしていきます。

docker/composeのreleasesページ( Releases · docker/compose · GitHub ) で、「Compare」をクリックして、v1の最新バージョンを確認します。

v1の最新バージョンをダウンロードします。以下のコマンドをそのままコピペすると1.29.2がダウンロードされてしまうので、適宜変更してください。

$ sudo curl -L https://github.com/docker/compose/releases/download/1.29.2/docker-compose-`uname -s`-`uname -m` -o /usr/local/bin/docker-compose

ダウンロードしたバイナリに対して実行権限を付与します。

$ sudo chmod +x /usr/local/bin/docker-compose

インストールを確認します。

$ docker-compose --version

以下のように表示されました。

docker-compose version 1.29.2, build 5becea4c