それではセクション２で自作ページの公開方法がわかった所で本題であるVue.js ＆ Rails ＆ PostgreSQLの環境を構築したいと思います。
目次
docker-composeとDockerfileを準備する。
本当はdocker.hubの情報を組み立てて１から作ろうと思いましたが、思いのほか難しそうだったので今回はdocker初心者らしく、既に用意されている同環境のファイルを頂いて環境構築しました。ある程度公開できるくらいの自作アプリができて、Herokuサーバにデプロイする時にもうちょっと勉強してちゃんと「技術情報」の方にアップできればと思います。
すぐにDockerで動かせるVue.js+Rails+Postgresのサンプル開発環境を作ったよ
こちらのサイトで３種類の環境構築ができるdocker-composeを頂いてきました。
セクション１でgitHubを設定しているハズなのでGit Bashを立ち上げて任意のフォルダで以下のコマンドを打つとダウンロードができます。
$ git clone git@github.com:tubutubumustard/vuejs_rails_postgres_docker.git
するとvuejs_rails_postgres_dockerというフォルダができますので今度はUbuntuを立ち上げて指定のフォルダに行って、docker-compose upを打ちます。1年前の記事なのでちょっとRuby等のバージョンが古かったりしますが今回は気にしない事にします。（最初いじってみたらRailsのインストールで失敗して断念・・・）
Git Bash でダウンロードしたり作成したファイルをWindows側で変更したりしないようにしましょう。UbuntuというLinuxはCドライブにマウントして表示しているのですが、Windows側でいじったフォルダが見えなくなったりファイルが破壊されたりすることがあるようです。必ずGit BashまたはUbuntu側で移動等の操作しましょう。
bash on windowsでwindowsからドラッグアンドドロップしたファイルが見えない
上記composeを実行した場合にWindows Home(WSL 2)環境で起こったトラブル
yarnのインストールに失敗
yarnとは何かの説明は以下をご覧ください。完全にザックリ言うとJavaScript関連の作業を行う上で必要なものです。
このyarnのインストールがタイムアウトしてしまいました。
yarn install v1.17.3
[1/4] Resolving packages...
[2/4] Fetching packages...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info If you think this is a bug, please open a bug report with the information provided in "/myapp/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
error An unexpected error occurred: "https://registry.npm.taobao.org/acorn/download/acorn-6.2.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Facorn%2Fdownload%2Facorn-6.2.1.tgz: unexpected end of file".
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
ERROR: Service 'view' failed to build : The command '/bin/sh -c yarn install' returned a non-zero code: 1
何でだろうと思って調べてみたら以下のサイトを参考にしてタイムアウトしているのでタイムアウト時間を延ばす必要があると書いてありました。.yarnrcを作ってもいいし、vuejsフォルダのDockerfileのRUN yarn installが書かれている行に–network-timeout 600000を追記してもいいようです。
【Tips】yarn install時に発生しうるESOCKETTIMEDOUTの回避
`yarn install`のタイムアウトを増やす方法 2022/02/11リンク切れだったので外しました
PostgreSQLの作成に失敗する
Creating vuejs_rails_postgres_docker_db_test_1 ... done
Creating vuejs_rails_postgres_docker_db_1 ... done
Creating vuejs_rails_postgres_docker_view_1 ... done
Creating vuejs_rails_postgres_docker_api_1 ... done
Attaching to vuejs_rails_postgres_docker_db_test_1, vuejs_rails_postgres_docker_db_1, vuejs_rails_postgres_docker_view_1, vuejs_rails_postgres_docker_api_1
db_1 | chmod: changing permissions of '/var/lib/postgresql/data': Operation not permitted
db_test_1 | chmod: changing permissions of '/var/lib/postgresql/data': Operation not permitted
view_1 | yarn run v1.17.3
view_1 | $ vue-cli-service serve
view_1 | INFO Starting development server...
view_1 | 14% building 35/36 modules 1 active .../index.js??ref--13-0!/myapp/src/main.jsBrowserslist: caniuse-lite is outdated. Please run next command `yarn upgrade`
vuejs_rails_postgres_docker_db_1 exited with code 1
vuejs_rails_postgres_docker_db_test_1 exited with code 1
Operation not permittedと表示されてしまい、PostgreSQLの作成に失敗します。こちらもWindows Home(WSL2)環境特有のエラーらしく、以下のサイトに同じ問題がありました。簡単に言うとPostgreSQLのデータはWindows上には保存できないのでダメらしいです・・・
Dockerを使用したWSL2のPostgres-ボリュームを共有するときに操作が許可されないWindowsフォルダーに入る
修正方法はdocker-compose.yml内でボリュームを作成し、PostgreSQLはその作ったVolumeを参照するように修正すればOKです。
version: '3'
services:
db:
image: postgres:12
volumes:
- postgres-vol:/var/lib/postgresql/data
ports:
- "50000:5432"
environment:
POSTGRES_DB: myapp_development
POSTGRES_USER: postgres
POSTGRES_PASSWORD: postgres
db_test:
image: postgres:12
volumes:
- postgres-vol_test:/var/lib/postgresql/data
ports:
- "50001:5432"
environment:
POSTGRES_DB: myapp_test
POSTGRES_USER: postgres
POSTGRES_PASSWORD: postgres
api:
build: ./rails
command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
volumes:
- ./rails:/myapp
ports:
- "50003:3000"
depends_on:
- db
- db_test
view:
build: ./vuejs
command: yarn run serve
volumes:
- ./vuejs:/myapp
- /myapp/node_modules # コンテナ内のnode_nodulesがマウントで削除されないようにする
ports:
- "50004:8080"
volumes:
postgres-vol:
postgres-vol_test:
構築完了
Windows Homeで動かす場合、上記２か所を修正すれば初期環境構築が完了します。
ポート50004にアクセスしたらVue.jsの初期画面が表示されて、
ポート50003にアクセスしたらRailsの初期画面が表示されました。
環境構築後はどうやって各サーバにアクセスするの？
各環境が構築できたら、いよいよRailsコマンドやDB操作を駆使して内部の作業に入るわけですがコンソールはどこ？と最初は思います。
それまでUbuntuで使ってた方のウィンドウは各サーバの監視ログ表示状態に変わってしまい、Ctrl+C等で終了するとコンテナの動作も停止してしまいます。という訳でコンソールはDockerアプリ上で制御します。
Dockerウィンドウ上のマークを付けている「CLI」でコンソール画面を立ち上げます。
コンソールが立ち上がれば下記画像のようにpostgres:12のDBであれば普通にpsqlでデータベースにログインできるようになりますし、api_1の方のコンソールはRailsコマンドが使えます。
以上、それぞれの環境構築をして各々のコンソールで制御が行えるようになりました。
一個のウィンドウで関連する全てのコンソールが制御できるなんてDockerって慣れたらホントに便利ですね。環境構築も用意するdocker-composeとDockerfileの内容が一度確立しちゃえば今後入れる人も楽々にできちゃいますし、人によって環境構築内容の違いもなくなりますね！
次回はVue.js / Rails / PostgreSQLをつなげてVueの画面からRailsサーバにアクセスしてDBの値を取得してVueで表示する部分ができればいいなと思っています。
11/24 追記
この記事で作った環境は最終的に没にしました。最終的に採用した環境は次のセクション。
この環境の続きを失敗した人身御供記事は以下をご覧ください。
