Add VSCode devcontainer用の設定を追加 #82

ishikawa999 · 2022-07-31T04:46:58Z

現在は https://github.com/ishikawa999/redmine_development_docker とこのリポジトリを両方cloneしてredmine_development_dockerのDockerfileを使ってVSCodeのRemote dev container機能を使った開発手法がパッチ会で主流になっていますが、
redmine_development_dockerの設定ファイルをこのリポジトリで持つことで利用するリポジトリを減らしたり利用手順を簡単にできそうです。

（まだざっくりとしか作り込めていませんが、）使ってみてフィードバックをいただきたいです。利用手順はREADMEに記載しています。

DockerfileのFROMをmcr.microsoft.com/vscode/devcontainers/ruby:3に変更
.devcontainer/overwrite_filesのファイルは.gitignoreから外して直接配置しても良いと思ったがdevcontainer以外の環境ではまた違った設定が必要になるため、コンテナの起動時にコピーするようにした

wate · 2022-08-01T07:51:25Z

素朴な疑問ですが、Rails + PostgreSQLの構成であれば、
公式から出ている以下の構成をそのまま使えばいいような気がしますが、
Dockerfile等を独自に記載する意図はどこにあるんでしょうか？

https://github.com/microsoft/vscode-dev-containers/tree/main/containers/ruby-rails-postgres/.devcontainer

ishikawa999 · 2022-08-01T11:36:31Z

素朴な疑問ですが、Rails + PostgreSQLの構成であれば、公式から出ている以下の構成をそのまま使えばいいような気がしますが、 Dockerfile等を独自に記載する意図はどこにあるんでしょうか？

https://github.com/microsoft/vscode-dev-containers/tree/main/containers/ruby-rails-postgres/.devcontainer

なるべく手順を削りたい、コンテナ起動後に rails s -b 0.0.0.0 するだけでアプリケーションが起動するようにしたいと考えていて、そのために

config/database.ymlやGemfile.lockなどのファイルを配置し終わった状態でコンテナが起動すること
bundle install, bundle update, rake db:create, rake db:migrateなどが終わった状態でコンテナが起動すること

あたりのことはできるようにしたいと思っています。
このようにカスタムする部分が多かったため、 https://github.com/ishikawa999/redmine_development_docker のDockerfileやdocker-compose.ymlをベースに https://github.com/microsoft/vscode-dev-containers/tree/main/containers/ruby-rails-postgres/.devcontainer の良さそうなところを取り込む感じでコードを書いていました。

Dockerfileの配置が.devcontainer内でないのは、イメージをビルドする時点でbundle installやbundle updateを実行するためです(親ディレクトリのコードはADDできなかったはず)

とはいえ、ある程度公式から出たモノに近づけるのは良いことだと思うので、できる範囲で変更してみました。 45d00d8

wate · 2022-08-01T12:36:07Z

@ishikawa999

Dockerfileの配置が.devcontainer内でないのは、イメージをビルドする時点でbundle installやbundle updateを実行するためです(親ディレクトリのコードはADDできなかったはず)

DockerfileでADDする必要は無く、devcontainer.jsonのライフサイクルスクリプトで、
シェルスクリプトを実行する形でできるのではないでしょうか？

上記だけではわかりにくいと思いますので、以下にサンプルコード的なものを記載しておきます。
※自分が作成したRedmine + MariaDB構成の内容をそのまま記載しています。

`.devcontainer`ディレクトリ以下のファイル構造

.devcontainer/
 ├── Dockerfile
 ├── devcontainer.json
 ├── docker-compose.yml
 ├── mariadb/
 │   ├── create-db-user.sql
 │   └── customize.cnf
 ├── postgres/
 │   └── create-db-user.sql
 ├── redmine/
 │   ├── Gemfile.local
 │   ├── admin_must_change_passwd_false.rb
 │   └── database.yml
 └── scripts/
     ├── post_create.sh
     └── post_start.sh

devcontainer.json

postCreateCommandで初回ビルド時に実行するスクリプトを指定(bundle install等のRedmineのセットアップ処理)
postStartCommandで起動時に実行するコマンド記載したスクリプトを実行(bundle update等)

{
	"name": "Redmine & MariaDB",
	"dockerComposeFile": "docker-compose.yml",
	"service": "app",
	"workspaceFolder": "/workspace",
	"customizations": {
		"vscode": {
			"extensions": [
				"stylelint.vscode-stylelint",
				"rebornix.Ruby"
			]
		}
	},
	"forwardPorts": [
		3000,
		3306
	],
	"otherPortsAttributes":{
		"onAutoForward": "ignore"
	},
	"postCreateCommand": "bash ./.devcontainer/scripts/post_create.sh",
	"postStartCommand": "bash ./.devcontainer/scripts/post_start.sh",
	"shutdownAction": "stopCompose",
	"remoteUser": "vscode"
}

Dockerfile

ほぼ公式の内容そのまま

# [Choice] Ruby version (use -bullseye variants on local arm64/Apple Silicon): 3, 3.1, 3.0, 2, 2.7, 2.6, 3-bullseye, 3.1-bullseye, 3.0-bullseye, 2-bullseye, 2.7-bullseye, 2.6-bullseye, 3-buster, 3.1-buster, 3.0-buster, 2-buster, 2.7-buster, 2.6-buster
ARG VARIANT=3.1-bullseye
FROM mcr.microsoft.com/vscode/devcontainers/ruby:0-${VARIANT}

RUN locale-gen ja_JP.UTF-8 && localedef -f UTF-8 -i ja_JP ja_JP.UTF-8

# Install Rails
RUN gem install rails webdrivers 

# Default value to allow debug server to serve content over GitHub Codespace's port forwarding service
# The value is a comma-separated list of allowed domains 
ENV RAILS_DEVELOPMENT_HOSTS=".githubpreview.dev"

# [Choice] Node.js version: lts/*, 16, 14, 12, 10
ARG NODE_VERSION="lts/*"
RUN su vscode -c "source /usr/local/share/nvm/nvm.sh && nvm install ${NODE_VERSION} 2>&1"

RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
    && apt-get -y install --no-install-recommends mariadb-client

# [Optional] Uncomment this line to install additional gems.
# RUN gem install <your-gem-names-here>

# [Optional] Uncomment this line to install global node packages.
# RUN su vscode -c "source /usr/local/share/nvm/nvm.sh && npm install -g <your-package-here>" 2>&1

docker-compose.yml

Rails + PostgreSQLからRails + MariaDBに変更し少し手を加えただけ

version: "3"
services:
  app:
    build:
      context: ..
      dockerfile: .devcontainer/Dockerfile
      args:
        # Update 'VARIANT' to pick a version of Ruby: 3, 3.1, 3.0, 2, 2.7, 2.6
        # Append -bullseye or -buster to pin to an OS version.
        # Use -bullseye variants on local arm64/Apple Silicon.
        VARIANT: "2.7-bullseye"
        NODE_VERSION: "lts/*"
    volumes:
      - ..:/workspace:cached
    environment:
      TZ: Asia/Tokyo
      LANG: ja_JP.UTF-8
      LANGUAGE: ja_JP:ja
      LC_ALL: ja_JP.UTF-8
      REDMINE_LANG: ja
    command: sleep infinity
    depends_on:
      - db
  db:
    image: mariadb:10.5
    restart: unless-stopped
    volumes:
      - ./mariadb/customize.cnf:/etc/mysql/mariadb.conf.d/customize.cnf
      - ./mariadb/create-db-user.sql:/docker-entrypoint-initdb.d/create-db-user.sql
      - mariadb-data:/var/lib/mysql
    environment:
      TZ: Asia/Tokyo
      MYSQL_ROOT_PASSWORD: mariadb
  # db:
  #   image: postgres:latest
  #   restart: unless-stopped
  #   volumes:
  #     - ./postgres/create-db-user.sql:/docker-entrypoint-initdb.d/create-db-user.sql
  #     - postgres-data:/var/lib/postgresql/data
  #   environment:
  #     TZ: Asia/Tokyo
  #     POSTGRES_USER: postgres
  #     POSTGRES_DB: postgres
  #     POSTGRES_PASSWORD: postgres
volumes:
  mariadb-data: null
#   postgres-data: null

補足事項

上記のサンプルのように.devcontainerディレクトリ以下に全てのファイルを含めてしまうことができれば、
このリポジトリだけではなく以下の各リポジトリでも同じように
.devcontainerディレクトリをそのままコピーするだけで、同じように利用可能な状態になると思います。(再利用性の向上)

https://github.com/redmine/redmine
https://github.com/redmica/redmica

wate · 2022-08-01T12:43:40Z

※上記サンプルのRubyのバージョンなどは、現行のDebian 11(bullseye)の標準パッケージで動作させることを想定しているため標準パッケージでインストールされるバージョンに合わせています。

https://packages.debian.org/bullseye/ruby
https://packages.debian.org/bullseye/mariadb-server-10.5

ishikawa999 · 2022-08-01T12:46:04Z

Dockerfileの中でbundle install, bundle updateしておくとgemを含んだ状態でイメージがつくられるので、コンテナ起動時のbundle installにかかる時間がかなり減るのが良いところなんですよね。

補足事項で書かれているとおり.devcontainerディレクトリで完結させる良さもとてもよくわかるので、悩みどころです

ishikawa999 · 2022-08-01T12:49:37Z

Dockerfileの中でbundle install, bundle updateしておくとgemを含んだ状態でイメージがつくられるので、コンテナ起動時のbundle installにかかる時間がかなり減るのが良いところなんですよね

私の場合ほぼ毎日Redmineの開発用コンテナを起動しているのでここをすごく大事に感じるのですが、Redmineパッチ会のタイミングで起動するくらいの感じなら毎回遅くても気にならないでしょうし、素直に .devcontainerディレクトリに修めるのを優先した方が良いような気がしてきました。

wate · 2022-08-01T13:06:14Z

以下のリファレンスによれば

https://code.visualstudio.com/docs/remote/devcontainerjson-reference#_lifecycle-scripts

postCreateCommand：開発コンテナ(イメージ)作成時に実行
postStartCommand：開発コンテナ起動時に実行(ライフサイクルの仕様により作成時にも実行されますが)

ってなっているので、普通にイメージに含まれてる感じですけどね？

tohosaku · 2022-08-01T13:14:32Z

イメージに bundle の gem を含めてしまうと、branch を行ったり来たりするとき辛くなりませんか? bundle config set path '/path/to/bundle' で bundle の保存場所を指定できるので、私の環境では Dockerfileで保存場所を設定しておいて、docker-compose.yml で bundle 保存用のボリュームを作成しています。定期的にボリュームを作り直して掃除することが前提ですが。

wate · 2022-08-01T13:33:58Z

イメージに bundle の gem を含めてしまうと、branch を行ったり来たりするとき辛くなりませんか?

ブランチを切り替えたときにそこまでgemパッケージのバージョンって変わります？

あと、このチケット自体が

パッチ会に来た人がサクッと開発環境を構築できるようにする

という要望が発端だと思うので、このリポジトリの各ブランチで
いきなりRedmineのバージョンが変わってしまうといったケースが無いのであれば
現状ではそこまで考慮するのは、このチケットの範囲外かなと言う気はしてますかね？

正直なところ、もしブランチを切り替えてgemパッケージのバージョン問題が出たら、
一度イメージを削除して、もう一回イメージをビルドし直してって感じの運用でもいいのかなって気はしてます。

ishikawa999 · 2022-08-01T13:37:38Z

以下のリファレンスによれば

https://code.visualstudio.com/docs/remote/devcontainerjson-reference#_lifecycle-scripts

postCreateCommand：開発コンテナ(イメージ)作成時に実行

postStartCommand：開発コンテナ起動時に実行(ライフサイクルの仕様により作成時にも実行されますが)

ってなっているので、普通にイメージに含まれてる感じですけどね？

あれ、説明をうまく飲み込めていませんでした；本当ですね
f73bf1c でpostCreateCommandとpostStartCommandを使う形に更新してみました

gemについては、私もよく5.0と4.2を行ったり来たりするんですがbundle update すれば大体動くイメージです

tohosaku · 2022-08-01T13:58:14Z

イメージに bundle の gem を含めてしまうと、branch を行ったり来たりするとき辛くなりませんか?

ブランチを切り替えたときにそこまでgemパッケージのバージョンって変わります？

一時期(今でも)、Rails を7にしてたり戻したりしたんですが、確かに過剰なやりかたかもしれません。

wate · 2022-08-01T14:28:18Z

コード的にはいい感じになったと思います。

現時点ではReadmeの内容まで精査できていないので、
以後、Readme部分のレビューに入っていきます。

wate · 2022-08-01T20:41:27Z

Readmeの記載内容について全て記載していくと重箱の隅をつつくようなことになるので、
クリティカルになりそうなところだけ以下に記載します。

ソースコードブロックのコマンド表記

そのままコピペできるように$は削ったほうが良いと思います。
(コマンドが分からない人は$ごとコピペしてしまう)

※markdownlintでも警告が表示されます

上記以外の点については、このissueの内容からは外れてしまうため、
わかりやすさ/可読性の向上といった内容については別の機会に修正するという形でいいと思います
(他の参加者から分からないと言われたときなど)

sanak · 2022-08-02T12:52:43Z

README.md

+$ cd ./redmine-dev-mirror
+```
+
+* 必要に応じて.envを書き換える(portの衝突がなければデフォルトでも動きます)


こちら、.envファイルが.devcontainer/.envに移動しているようでしたので、修正が必要と思います。

なお、Windowsのエクスプローラー、MacのFinderからドットファイルを開くのは、初心者の方には少し難しいかもしれませんので、VSCodeで先にフォルダを開いてからとかの方が分かりやすいかもしれません...。
(が、後からの修正で問題ないと思います。)

sanak · 2022-08-02T13:29:34Z

@ishikawa999
確認が遅くなりましたが、取り急ぎ、下記を確認しました。

README.md の手順に従って、Remote Containerを起動でき、bashターミナルから rails s -b 0 を実行して、Redmineにアクセスできること。
- .env のパスの箇所のみ、コメントを追記しました。
上記で起動したサービスをCtrl+Cで停止後、VSCodeのデバッグボタンからRedmineサービスを起動し、Redmineにアクセスできること、また、ブレークポイントを貼って停止、ステップ実行が可能なこと。
rails test による全件テスト (※seleniumによるシステムテストは未実施)

私の方、普段はMacホスト環境+rbenv+VSCodeでフォルダを行ったり来たりしてデバッグしている感じ😅なので、VSCode+RemoteContainerでのレスポンス周りの違いは良く分かりませんが、少し触った感じだと十分OKなように感じました。

なお、別件で、 @wate さん記載の公式のリポジトリ・フォルダの履歴を少し見たんですが、

https://github.com/microsoft/vscode-dev-containers/tree/main/containers/ruby-rails-postgres/.devcontainer

以下の今年1月のPR差分で、sqltools拡張が削除されているようでした。

Hotfix/sqltools (#1273) · microsoft/vscode-dev-containers@a8b2e82

が、リンクしているIssueを確認したところ、1月に元の開発者が新しいメンテナを募集したところ、どうも5月に新しいメンテナさんが見つかったらしく、このまま利用を続けるのも問題なさそうに思いましたので、念のため記載しておきます😄

SQLTools extension went "archived", should remove references to it in definitions · Issue #1253 · microsoft/vscode-dev-containers
- New maintainers! Meet @george-james-software and @gjsjohnmurray! · Issue #896 · mtxr/vscode-sqltools

ishikawa999 · 2022-08-03T08:55:34Z

@wate @sanak
フィードバックありがとうございます。

ソースコードブロックのコマンド表記
そのままコピペできるように$は削ったほうが良いと思います。
(コマンドが分からない人は$ごとコピペしてしまう)

コマンドとコマンドの結果を区別できるように $ で書くことが多いのですが、このREADMEの場合とくに結果を書いていないので$がない方が良いですね、対応します

こちら、.envファイルが.devcontainer/.envに移動しているようでしたので、修正が必要と思います。

気づいていませんでした、対応します！

VSCodeのデバッグを普段使っていなくて正しい挙動があまりわかっていなかったので、検証していただき助かりました 🙇

ishikawa999 · 2022-08-03T09:22:23Z

d2626ca でREADMEを更新しました。
README内のスクリーンショットにも説明文を加えてみました
https://github.com/redmine-patch-meetup/redmine-dev-mirror/blob/d2626caaaa722d87ecd18c6be15a5e033f5943f8/README.md

sanak · 2022-08-03T11:22:33Z

@ishikawa999 上記対応、ありがとうございます！
.env => .devcontainer/.env に修正されていることと、bashの行先頭の $ が削除されていること、また、各スクリーンショットが、修正前後(前, 後)で、alt含めて分かりやすく更新されていることを確認しました。😄

wate · 2022-08-03T11:31:59Z

@ishikawa999 @sanak

本件の対応で以下のissueの要件も満たせていると思うので、
マージと同時に以下のissueも閉じてしまってもいいかもしれません

refs #79

※上記のissueでは題名が動画とはなっていますが、必ずしも動画である必要はなく、
初めての人でも分かるドキュメントがほしいという意図だと思われるため

sanak · 2022-08-03T12:05:19Z

@wate (CC: @ananas3, @tohosaku, @ishikawa999)
上記コメントありがとうございます。
#79 に関しては、先週のパッチ会の終わり際のふりかえりの際も、動画までは不要かもと話していました。

#79 の方にも少しコメントを追記しておきますね。

sanak · 2022-08-05T01:04:48Z

@juno-nishizaki @matobaa (CC: @kfischer-okarin)
こちらのPRですが、マージについてはオーナー権限以上の方でないとできないようでしたので、お手すきの際に確認・マージ頂けると助かります。🙇‍♂️
お手数ですが、よろしくお願いいたします。

Resolve chrome container crashing issue

github-actions · 2022-08-08T00:40:34Z

Patch can be downloaded here

* Add VSCode devcontainer用の設定を追加 * Add docker-compose.yml * Move Dockerfile-for-redmine-dev-mirror to .devcontainer/Dockerfile * Fix Rubyのバージョン変更の手順 * Update README.md * Update DockerfileでADDしなくなったことによって機能しなくなっていたコードを削除

ishikawa999 added 2 commits July 31, 2022 04:28

Add VSCode devcontainer用の設定を追加

40d3443

Add docker-compose.yml

5a050c0

Clean up

45d00d8

Move Dockerfile-for-redmine-dev-mirror to .devcontainer/Dockerfile

f73bf1c

Fix Rubyのバージョン変更の手順

22dcf36

sanak reviewed Aug 2, 2022

View reviewed changes

Update README.md

d2626ca

sanak mentioned this pull request Aug 3, 2022

初心者向けの「進め方」のチュートリアル(録画)があるとうれしい #79

Open

ishikawa999 added 2 commits August 5, 2022 11:14

Update DockerfileでADDしなくなったことによって機能しなくなっていたコードを削除

93f0915

Update docker-compose.yml

b9f2112

Resolve chrome container crashing issue

matobaa merged commit f72861f into develop Aug 12, 2022

matobaa deleted the devcontainer branch August 12, 2022 07:25

Add VSCode devcontainer用の設定を追加 #82

Add VSCode devcontainer用の設定を追加 #82

Uh oh!

Conversation

ishikawa999 commented Jul 31, 2022

Uh oh!

wate commented Aug 1, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ishikawa999 commented Aug 1, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wate commented Aug 1, 2022

.devcontainerディレクトリ以下のファイル構造

devcontainer.json

Dockerfile

docker-compose.yml

補足事項

Uh oh!

wate commented Aug 1, 2022

Uh oh!

ishikawa999 commented Aug 1, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ishikawa999 commented Aug 1, 2022

Uh oh!

wate commented Aug 1, 2022

Uh oh!

tohosaku commented Aug 1, 2022

Uh oh!

wate commented Aug 1, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ishikawa999 commented Aug 1, 2022

Uh oh!

tohosaku commented Aug 1, 2022

Uh oh!

wate commented Aug 1, 2022

Uh oh!

wate commented Aug 1, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

ソースコードブロックのコマンド表記

Uh oh!

sanak Aug 2, 2022

Choose a reason for hiding this comment

Uh oh!

sanak commented Aug 2, 2022

Uh oh!

ishikawa999 commented Aug 3, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ishikawa999 commented Aug 3, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sanak commented Aug 3, 2022

Uh oh!

wate commented Aug 3, 2022

Uh oh!

sanak commented Aug 3, 2022

Uh oh!

sanak commented Aug 5, 2022

Uh oh!

github-actions bot commented Aug 8, 2022

Uh oh!

Uh oh!

wate commented Aug 1, 2022 •

edited

Loading

ishikawa999 commented Aug 1, 2022 •

edited

Loading

`.devcontainer`ディレクトリ以下のファイル構造

ishikawa999 commented Aug 1, 2022 •

edited

Loading

wate commented Aug 1, 2022 •

edited

Loading

wate commented Aug 1, 2022 •

edited

Loading

ishikawa999 commented Aug 3, 2022 •

edited

Loading

ishikawa999 commented Aug 3, 2022 •

edited

Loading