【Vue.js and Nginx on Docker】第四回開発合宿【環境構築エラーの嵐】

こんにちは、株式会社アクシス福岡オフィスの goto です。
今年、31歳未経験でエンジニアの世界に足を踏み入れました。開発合宿メンバーの中では年齢的にはちょい上のロン毛です。

会社のアカウントがことごとく goto u なのが不満です。

気がつけば開発合宿も4回目。
今回は弊社新人さんが初参加してくました！

ただし、今回もまだ「日帰り合宿」ですｗ

第一回: やっていくばい！開発合宿@福岡
第二回: 第二回開発合宿を開催: 話題のFlutterでSNSアプリ開発
第三回: 第三回開発合宿: チーム開発本格始動！

参加動機

これはもう、「なんか作りたかった」に尽きます。

一人で家でやるのも嫌いじゃないのですが、元々、集中したいときはカフェに行ったり、コワーキングに行ったりと、うるさすぎない程度に周りに人がいる環境のほうが集中できる性質なのもあって、開発合宿の話にはすぐに飛びつきました。

また、業務ではなかなかやらないことをやれたりするのもやはり魅力です。そもそもの開発経験が少ないこともありますので、「存分に失敗できる環境」って大事だと思います。（と、予防線を張っておく・・・）

今はチーム開発をしているので、「どんなものができるかな」というワクワクもありますね。

今回の参加者がやったこと

• チーム・アプリ開発
  • バックエンド
    • ディレクトリ構成決める
    • 実際に実装に入る
  • フロントエンド
    • Vue.jsで画面実装（をしたかった…）
• AWS Lambda を使ってSlackボット作成
• TensorFlow を使って、普遍的なキーワードを特定ジャンルのキーワードに変換

ハマる環境構築

さて、僕はチーム・アプリ開発でフロントエンド担当（ぼっち）。

前職がフリーランスのHTML, CSSコーダーだったこともあるので、さらにできることを広げるため、Vue.jsに挑戦してます。

さらに同じチームの uehara くん（環境構築・バックエンド担当）が「時代はTypeScriptっしょ」ということで、Vue.js + TypeScriptです。なんとまあモダンなこと。

というわけで、中世から現代に転生したみたいな気持ちで勉強してます。一通りの知識は得たので、あとは実践あるのみ！

吐き出され続けるコンソールエラー

環境は ueharaくんが Docker で構築してくれましたので、意気揚々と docker-compose up -d すると、、、

なんか出とる。

しかも増える。2秒ごとくらい。

Docker 内に nginx 用コンテナと、アプリ用コンテナの2つが設定されている状態なんですが、どうやらアプリ用コンテナで Websocket 通信を行うJSライブラリ (sockjs) がなんらかの設定不足で通信できない模様。

そのせいで Chrome では net::ERR_CONNECTION_REFUSED となってしまっているようです。

ビルドは通って、ページは表示される。ホットリロードもされるし、機能的にはなんの問題もなさそうなのに、表示され続けるエラーメッセージ。

見なかったことにしよう。 そんな思いも頭をよぎりましたが、せっかくの機会なので解決してみることにしました。Dockerってほとんど触ったことないですし、業務の環境だと壊すのが怖いですが、これなら、プロジェクトの始めなので、そこまで怖くない。いい勉強になるかなとの思いで、調べ始めました。

これが地獄の入り口だとも知らず。

解決できない

結果から言ってしまえば、 解決できませんでした。

エラーメッセージをググって、
sockjs-node ERR_CONNECTION_REFUSED when accessing from network
あたりを参考に色々やってみるも、上手く行かず。。。

uehara くんにも協力を仰ぎ、 nginx/default.conf の設定を見直してもらってもダメ。

その日はタイムアップで、「進捗: 環境構築（未解決）」という結果に。

しかもその後3週間、このレポートを書くために Docker を立ち上げては検証し、エラー解消できず週末が終わる、ということを繰り返していました。なのでレポート書くのに時間がかかったりしています。言い訳ですけど。

さらなる沼 - アプリ入れ直し作戦 -

これはもう、最初に入れてもらった環境が悪いんだ、きっとそうだという、 大変に失礼な思考 にたどり着きました。与えられた環境に文句を言う、典型的な素人ですね。

で、アプリ自体を入れ替えてやろうと、Vue CLIで再インストールしてみました。

するとどうでしょう。 node-sass が無いからコンパイルできないよ と怒られてしまいました。

Error: Missing binding /app/node_modules/node-sass/vendor/linux_musl-x64-72/binding.node
Node Sass could not find a binding for your current environment: Linux/musl 64-bit with Node.js 12.x

Found bindings for the following environments:
 - OS X 64-bit with Node.js 12.x

This usually happens because your environment has changed since running `npm install`.

こいつの解決は意外と簡単で、要はDocker コンテナの環境（Linux）で、ローカル（Mac）の node-sass を見に行こうとしているがために起きたエラーでした。まあ、3時間位かかったんですけど。

参考 Dockerでnode-SASSを使うとNode Sass could not find a binding for your current environment: Linux 64-bit with Node.js X.X…

Dockerの設定を変更して、ビルドをかける。

コンパイル成功！

ページが表示される！

開発者ツールを開く！

エラー出てる！

もうええて！

俺達の冒険はこれからだ！

そんなわけで、結局解決に至っていない状態です。

でも実は、 webpack-dev-server の sockPort/sockPath なるものの存在 も発見したので、ちょっとそれを試してみたいと思います。解決までやってると、来年末くらいまでこのレポート書けそうになかったので、とりあえず書きました。

というわけで、プロジェクトの進捗としては全然ですが、Dockerにちょっとは慣れることができたかなと思います。1年分くらいは docker-compose build と docker-compose up をした気がする。

あとは、お世話になったコンテナ全消し、イメージ全消し、ボリューム全消しの 全消し三銃士 を貼っておきます。

# コンテナ全消し
docker container rm -f $(docker container ls -aq)

# イメージ全消し
docker image rm -f $(docker image ls -aq -f "dangling=true")

# ボリューム全消し
docker volume rm $(docker volume ls -qf dangling=true)

今回のMVP

勝手に決める今回のMVPは、Slackボットを作成した新人 tanaka 君！

「お菓子」と入れたら、今日のおすすめのお菓子を返してくれるSlackボットを作ってました！

可愛いか！

おっさんには無い発想です。

次はこれを発展させてなにか作るつもりらしいです。将来有望。