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

※3章についてよりよい手順が分かりました。こちらの記事を参照してください
[Preparing VSCode environment for Bitnami Redmine](https://qiita.com/aki360P/items/8865813682b9e0b00619)

##はじめに
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'
```

相対パスを変更し忘れる場合，次のように表示が崩れます。
![additional_environment忘れると.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434780/964d0a57-4bcf-6ca1-a422-f1a72b7d72ca.png)



#### 1.3. 再起動
データベースサーバを再起動します。DBであるmysqlだけでいいのですが面倒なのでproduction全体を再起動します。
![サーバ再起動_restart all.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434780/c5adfbeb-34c4-7b3d-4ba6-dbb617c22514.png)
development実行時でもproduction環境立ち上がっていても問題ありません。


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

#### 2.1. 拡張機能のインストール
VSCodeの拡張機能から，**Rails**と**Ruby**を探して追加でインストールしてください。
![VSCode拡張機能インストール.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434780/1f5a932d-6f5a-afd7-8302-0739690576f4.png)

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


#### 2.2. VSCodeにredmineホームディレクトリ追加
左上の**メニュー＞ファイル＞フォルダーを開く**より，redmineのホームディレクトリであるhtdocsを開きます。念のためにhtdocsはこちらになります。 C:\Bitnami\redmine-4.0.3-2\apps\redmine\htdocs
![VSCodeフォルダ開いた状態.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434780/fa0032ef-a2dd-8a03-ef27-b1ca79d4df53.png)


#### 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,
        }
    ]
}
```

![VSCode構成設定launch_json.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434780/ccb302ea-e5a1-fe9c-c354-657ee351379e.png)



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



#### 3.1. 状況の確認
とりあえず，一旦デバックの実行を試みます。こちらの緑のボタンから実行します。
![VSCodeデバック実行ボタン.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434780/47fc4079-afd7-5e2c-a6fc-e6f631a515dc.png)

すると，少なくとも2つのエラーが確認できます。
![VSCode実行時のエラー1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434780/7df0f82e-f77a-f4ae-5ddd-aeef5a711dbe.png)


```
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のコマンドプロンプトを立ち上げます。必ず右クリック**管理者として実行**で実行してください。
![Rubyコマンドプロンプト.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434780/5eef0707-9a8a-af6b-6a17-89bd08807734.png)

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

```
gem install bundler
```
※現時点でインストールされるバージョンは，2.0.2です。

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

```
gem list --local
```
![gem list --local.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434780/8a34f144-6bcf-7b0d-6989-079a8497d166.png)




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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434780/de8f3657-b217-2838-5516-d012172059a5.png)


#### 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
```
![VSCode_bundle install.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434780/9cec7a78-62bc-f299-ca6a-067d21e477ce.png)


#### 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
```

![ruby rakeアップデート.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434780/934f673a-e243-f01e-7d7e-15afb3618619.png)


#### 3.9. 状況確認
VSCodeを一旦終了します。また立ち上げてデバッグを開始しようとすると，画面が若干変わります。

![VSCode立ち上げ画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434780/546d1344-0c24-c81c-5f02-a46bebed3103.png)

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

ただ，この起動は途中で止まって次のエラーを返します。
![VSCode_redmine起動時最大のエラー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434780/47b1325f-cea2-6efb-a879-3ebf8916f288.png)

```
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つを選択してください。
![ImageMagick.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434780/9e81a907-4c8e-78f0-8679-b41e17e9b265.png)
※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
![環境変数CPATH.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434780/5e74beb0-1380-93fe-c8a4-c8322ae388aa.png)
![環境変数LIBRARY_PATH.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434780/0b6746bd-4784-8d67-390f-5dc9e3b1aef2.png)
RubyコマンドプロンプトおよびVSCodeは一旦終了してください。


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

ImageMagickインストールディレクトリ直下にあるdllを，C:\Ruby25-x64\bin へコピーしてください。
![dllをコピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434780/bada2174-1c91-a45d-5f70-edc867ff5a3a.png)

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

```
gem install rmagick -v 2.15.4
```

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

```
ruby -e "require 'rmagick';puts Magick::colors"
``` 
![rmagick動作確認.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434780/8c4fd899-de4c-170b-25fe-e0fcb9246cf5.png)



### 4. 起動と終了
#### 4.1. redmineをdevelopmentで起動
VSCodeのデバッグボタンよりサーバを起動します。
![起動成功.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434780/8c5162b9-e4eb-0ff9-d228-413e56f02677.png)

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


ブラウザよりlocalhost:3000にアクセスすれば，redmineが起動しつつ，デバッグコンソールにsql文などが表示されていくはずです。
![VSCodeでredmineをdevelopmentで起動.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434780/e64b5c6c-f088-b2ac-0d3c-31f3dca8af2c.png)


#### 4.2. デバッグ作業
ようやくVSCodeのデバッグ機能の登場です！
任意の場所にブレークポイント入れたり，ステップ実行できたりします。
![デバッグモード.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434780/8a16c2ab-3a67-aa75-4efe-861011d9e475.png)

前記事の[Bitnami Redmineをdevelopmentで起動する](https://qiita.com/aki360P/items/02d3c8924c386c36a39c) よりも遥かに効率的にプラグイン開発できそうです。


#### 4.3. サーバ終了
VSCode上で，■ボタンを押せばサーバ停止します。
![VSCode終了.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434780/9b59c1e1-b992-310c-0fb2-14484195c37f.png)



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


##関連情報
このページ作成には，次のサイトを参考にさせて頂きました。
[windows10でRMagickを導入するのに苦労したので解決までの流れをまとめた](https://qiita.com/kanegon501/items/a2d1ed6812922d3f9d06)
[How To Install The RMagick 💉 #RubyOnRails Gem on Windows 7/8/10 (ImageMagick 6.9.6 Q16-HDRI)](https://medium.com/ruby-on-rails-web-application-development/install-rmagick-gem-on-windows-7-8-10-imagemagick-6-9-4-q16-hdri-5492c3fef202)
[RMagick を Windows にインストールする方法](https://www.ownway.info/Ruby/rmagick/howtoinstall/windows)