【旧】Bitnami Redmineをdevelopmentで起動する(VSCode編)


※3章についてよりよい手順が分かりました。こちらの記事を参照してください
Preparing VSCode environment for Bitnami Redmine

はじめに

RedmineプラグインをVSCode上で開発したい方のためのページです。プログラミングを専門としてない人には開発環境の導入でまずつまずくと思いますので,導入手順の細部をまとめます。以下のような方が対象です。

  • Windows環境にRedmineをBitnamiでインストールして使っている方
  • 細部の設定方法まで丁寧な説明が必要な方
  • 本番環境から独立したPCに開発用redmineを立てている方
  • プラグイン開発環境にVSCode使いたい方

目的

Redmineをdevelopmentで起動して,VSCodeとブラウザでのプラグイン開発環境を構築する。

環境

  • Windows7 64bit

- bitnami-redmine-4.0.3-2-windows-x64-installer.exe

※ほかの環境では,gemやruby installer等のバージョン選択の際にご注意ください

手順

1. redmine準備

Bitnami redmineのインストールは完了しているものとします。
途中までは前回記事のものと同じです。

1.1. DB設定の変更

production環境とdevelopment環境が同一のテーブルを参照するように,developmentのdatabase, username, passwordを書き換えます。
C:¥Bitnami¥redmine-4.0.3-2¥apps¥redmine¥htdocs¥config¥database.yml を開きます。

database.yml
production:
  adapter: mysql2
  database: bitnami_redmine
  host: 127.0.0.1
  username: bitnami
  password: 5a6e5788be
  encoding: utf8
  port: 3306
development:
  adapter: mysql2
  database: bitnami_redmine
  host: localhost
  username: bitnami
  password: 5a6e5788be
  encoding: utf8

DBのパスワードはBitnamiインストール時のRedmine管理者アカウントのパスワードがハッシュ化されて表示されています。
DBが共通とした方がデータ投入を何度もやる必要がないため簡単です。

1.2. 相対パスの無効化

アプリの相対パスを無効にします。#でコメントアウト(productionで動かす時は戻す必要があります)
C:¥Bitnami¥redmine-4.0.3-2¥apps¥redmine¥htdocs¥config¥additional_environment.rb を開きます。

additional_environment.rb
#config.action_controller.relative_url_root = '/redmine'

相対パスを変更し忘れる場合,次のように表示が崩れます。

1.3. 再起動

データベースサーバを再起動します。DBであるmysqlだけでいいのですが面倒なのでproduction全体を再起動します。

development実行時でもproduction環境立ち上がっていても問題ありません。

2. VSCode準備

VSCodeのインストールは完了しているものとします。

2.1. 拡張機能のインストール

VSCodeの拡張機能から,RailsRubyを探して追加でインストールしてください。

すると,Ruby Solargraphというのも併せてインストールされますが,これが難しいポイントのひとつです。(後述)

2.2. VSCodeにredmineホームディレクトリ追加

左上のメニュー>ファイル>フォルダーを開くより,redmineのホームディレクトリであるhtdocsを開きます。念のためにhtdocsはこちらになります。 C:\Bitnami\redmine-4.0.3-2\apps\redmine\htdocs

2.3. 構成ファイルの設定変更

難しいポイントのひとつめとして,redmine用のlaunch.jsonの書き方が分からない点があります。launch.jsonも開くのも多少難しいですが,適当に表示されているものnode.jsなどを選択してやれば開くことができます。

以下の通りに変更してもらい,Ctrl + sで設定ファイルを保存すると,rubyを立ち上げることができるようになります。

launch.json
{
    "version": "0.2.0",
    "configurations": [

        {
            "name": "launch rails server",
            "type": "Ruby",
            "request": "launch",
            "cwd": "${workspaceRoot}",
            "program": "bin/rails",
            "args": ["server"],
            "useBundler": false,
        }
    ]
}

3. 起動時のエラー

これが最大の難関です。環境によっては別のエラーがでるかもしれません。
あきらめず根気よく,デバッグしてください。

3.1. 状況の確認

とりあえず,一旦デバックの実行を試みます。こちらの緑のボタンから実行します。

すると,少なくとも2つのエラーが確認できます。

Debugger terminal error: Process failed: spawn rdebug-ide.bat ENOENT

⇒ ruby-debug-ideがインストールされていない。

Solargraph gem not found. Run `gem install solargraph` or update your Gemfile.

⇒ Solargraphがインストールされていない。

このほか試行錯誤の間に次のようなエラーも出てきましたが,キャプチャをとっておくのを忘れました・・・

  • debaseがインストールされていない
  • debaseが上手く起動できない
  • デバッガーが複数起動している  ⇒ htdocsのgemfileにruby-debug-ideなどは書いてはダメ

3.2. Rubyのインストール

若干唐突ですが,Rubyを単体でインストールします。これはVSCodeからbitnamiの環境の使い方が分からなかったため,新たにruby環境を構築する必要があったためです。
https://rubyinstaller.org/downloads/

このうち,DevKitがまとまってインストールできて便利で,さらにBitnami redmine 4.0.3-2がRuby2.5系列であるため,Ruby+Devkit 2.5.5-1 (x64) を選択しています。

古いバージョンを使いたい人は,devkitおよびSSLの認証でつまづくことがあるのでご注意ください。(ページ下部の別記事参照)

3.3. bundlerインストール

スタートアップから,Rubyのコマンドプロンプトを立ち上げます。必ず右クリック管理者として実行で実行してください。

次にbundlerがインストールされていないので,次のコマンドでbundlerをインストールします。

gem install bundler

※現時点でインストールされるバージョンは,2.0.2です。

インストールされているgemを確認します。

gem list --local

3.4. gemインストール solargraph

続けて,デバッグに必要なgemファイルを3つインストールします。

gem install solargraph 

※本日時点のバージョンは0.33.2です。

この時点で,Solargraphが起動できるようになっています。一旦VSCode終了して,再度立ち上げると起動とともに,Starging the Solargraph language server と表示され,1分ほどで起動されます。これで,コードの入力補完が有効になるようです。

3.5. gemインストール ruby-debug-ide

次にデバッグに必須のgemファイルです。

gem install ruby-debug-ide

※本日時点のバージョンは0.7.0です。

3.6. gemインストール debase

こちらもデバッグに必須のgemファイルです。

gem install debase

※本日時点のバージョンは0.2.2です。

3.7. bundle install

VSCodeでredmineを起動しようとすると,別のgemファイルがインストールされていませんというエラーが発生します。VSCode側のターミナルより,htdocsのGemfileに書かれたgemをインストールします。

> bundle install

3.8. gemインストール rake

今度は,このようなエラーが出てくるので,rubyコマンドプロンプトより,rakeをアップデートします。

Uncaught exception: You have already activated rake 12.3.0, but your Gemfile requires rake 12.3.2. Prepending `bundle exec` to your command may solve this.
gem install rake -v 12.3.2

3.9. 状況確認

VSCodeを一旦終了します。また立ち上げてデバッグを開始しようとすると,画面が若干変わります。

基本的な文字の色が赤系統なのでエラーのように見えますが,上記は前記事で紹介したやり方で起動する際にコマンドプロンプトに表示される文字列と同じで,VSCodeから初めてredmineが起動されようとしていることが分かります。

ただ,この起動は途中で止まって次のエラーを返します。

Uncaught exception: 126: �w�肳�ꂽ���W���[�������‚���܂���B   - C:/Bitnami/redmine-4.0.3-2/apps/redmine/htdocs/vendor/bundle/ruby/2.5.0/gems/rmagick-2.15.4-x64-mingw32/lib/RMagick2.so
    C:/Bitnami/redmine-4.0.3-2/apps/redmine/htdocs/vendor/bundle/ruby/2.5.0/gems/rmagick-2.15.4-x64-mingw32/lib/rmagick_internal.rb:12:in `require'

このエラーが本記事の最大の山場です。
文字化けしていてそもそも何が起きているのかも分かりませんが,Uncaught exception: 126: 指定されたモジュールが見つかりません。と表示しようとしているようです。このエラーは,rmagick gemがインストールされていないといっているようですが,単純にrmagickをgem installしても簡単には解決しません。

3.10. ImageMagickインストール

rmagickはImageMagickという汎用ライブラリを利用しているgemです。他の方の記事のとおり,インストールされていても動かないことがあるインストールの難しいgemです。ライブラリを正しくインストールしてから,gem installを行う必要があります。しかもこのgemはインストールしたいバージョンによって,使用するライブラリのバージョンを注意して選択*する必要があります。

3.9項のメッセージの通り,rmagick-2.15.4をインストールするため,bitnami-redmine-4.0.3-2およびwindows7 64bitの環境で動いたのは,ImageMagick-6.9.8-10-Q8-x64-dll.exe です。
こちらのImageMagickのアーカイブより探してダウンロードし,インストールしてください。
http://ftp.icm.edu.pl/packages/ImageMagick/binaries/

念のためスペースを含まないディレクトリC:\ProgramDataにインストールしました。
また,インストールオプションはこちらの2つを選択してください。

※dll版および6.9.8でないと上手くいったように見えても起動できません

3.11. ImageMagick環境変数の設定

windows > コントロールパネル > システム > システムの詳細設定 より環境変数に次の2つを追加します。

CPATH = C:\ProgramData\ImageMagick-6.9.8-Q8\include
LIBRARY_PATH = C:\ProgramData\ImageMagick-6.9.8-Q8\lib


RubyコマンドプロンプトおよびVSCodeは一旦終了してください。

3.12. gemインストール rmagick

ImageMagickのdllをrubyのディレクトリへコピーしてgemインストールを実行します。

ImageMagickインストールディレクトリ直下にあるdllを,C:\Ruby25-x64\bin へコピーしてください。

再び管理者権限でRubyコマンドプロンプトを立ち上げgemをインストールします。rmagickのバージョンは指定です。インストールには通常よりも時間がかかるようです。

gem install rmagick -v 2.15.4

インストールが完了したら以下のコマンドで,rmagickが動作することを確認します。色の情報が出てくれば動作しています。

ruby -e "require 'rmagick';puts Magick::colors"

4. 起動と終了

4.1. redmineをdevelopmentで起動

VSCodeのデバッグボタンよりサーバを起動します。

出力やデバッグコンソールにエラーは表示されていません。

ブラウザよりlocalhost:3000にアクセスすれば,redmineが起動しつつ,デバッグコンソールにsql文などが表示されていくはずです。

4.2. デバッグ作業

ようやくVSCodeのデバッグ機能の登場です!
任意の場所にブレークポイント入れたり,ステップ実行できたりします。

前記事のBitnami Redmineをdevelopmentで起動する よりも遥かに効率的にプラグイン開発できそうです。

4.3. サーバ終了

VSCode上で,■ボタンを押せばサーバ停止します。

メモ

非常に苦しみながらもようやくVSCodeでredmineを起動することができるようになりました。
ぜひ皆さんもredmine plugin開発に挑戦し,githubにリリースしてください!

関連情報

このページ作成には,次のサイトを参考にさせて頂きました。
windows10でRMagickを導入するのに苦労したので解決までの流れをまとめた
How To Install The RMagick 💉 #RubyOnRails Gem on Windows 7/8/10 (ImageMagick 6.9.6 Q16-HDRI)
RMagick を Windows にインストールする方法