はじめての環境構築
はじめに
こんにちは NUTMEG所属 電気電子情報工学分野 B3のしょうちゃんです。
12月に入ってすごく忙しくなりました。
今回はNUTMEGのプロジェクトの1つであるGM2をアップデートするための環境構築を任されましたのでブログに残そうと思います。
今回は先輩の助言も借りつつ最終的には一人で環境構築をしました！！
GM2とは
GM2はGroup Mnaneger 2の略で、文化祭の運営に使用するアプリのことです。屋台や室内企画を行う企画団体（一般学生）と運営（実行委員総務局）間の申請や書類提出を行うことができます。特に総務局の負担を軽減するために日々開発が進められています。←
GM2は 昨年度の技大祭までに大枠の構造は完成していて実用段階にあるので、今年度からは機能充実とUI改善を目標に開発が進んでいます。特に今年度の目標として企画団体が使用するユーザー画面のUIの一新が計画され、完成すればGM2改めGM3になる予定です。
GM3について
GM2はバックエンドがRuby on rails でフロントエンドが Nuxt.js によって作られたアプリなのですが、GM3にアップグレードするにあたりユーザー画面のみNuxt.jsを廃止してNext.jsに開発環境を変更する計画になっています。これはNUTMEG内の技術負債をなくすための言語統一に向けた取り組みの一つでもあります。今回はGM3を進めるための下地としてGM2のプロジェクト内に新たにNext.js環境を構築しました。
目的
はじめはGitHubにGM3用の新しいリポジトリを作成してから、そこにGM2＋新userフォルダ（next.js）を入れて問題なく動作することを目標に進めました。 しかし環境構築終了後に方針が変わりGM2のリポジトリ内に新たに新userフォルダ（next.js）を追加する形での環境構築を目指すように変更されました。
本来なら決めてからタスク振ってほしいケドね…
と思うところですが、個人的には練習と復習のような形になって2度挑戦できたので理解が深まりよかったとは思うので問題ナシ！！
環境構築手順
NUTMEGではGitHubとdockerを用いてプロジェクトを管理しているので基本的にはターミナルとdocker-compose.ymlとmakefileをいじっていました。PCはWindowsなのでWSLとUbuntuを用いています。
詳しい環境構築手順については誰かの今後の助けになればと思い、環境構築直後に作成したドキュメントから引用します。スクショ画像は諸事情で不記載です。（NUTMEG内で気になる人がいたらnotionにあるので是非見てください。）
～以下引用～
gm3の環境構築をしました。覚えてる限りの手順置いときます。不足してたらごめんなさい。メモだと思ってください。手間取って余計な操作を含んだ記憶がありますが、最終的に意味のあったと思う操作だけ書いときます。
GitHubにgm2のコピーされたコードがある状態から始めた。
「”user@MSI:~/workspace/Group-Manager-3$」
で作業しました。
①Group-Manager-3でgit clone <GitHub からコピペしたSSHのアドレス>
②make build + docker compose up -d + docker ps でgm2状態のコンテナが正常に起動できるか確認
→自分の場合はここでエラー発生し起動できなかった。
①’make build内のコマンドを1行ずつ実行してみる（make buildが正常に動作していないっぽかった。）
②’docker compose up -d + docker psでgm2状態のコンテナが起動できるかどうか試す。
→できた。
③docker-compose.ymlを編集して既存のコンテナ名の”gm2”を”gm3”に変更
④gm3の内容を保存するフォルダとしてGroup-Manager-3直下に”user” を作成
⑤docker-compose.ymlを編集して以下の内容を追加
ポート番号は8001:3000に設定した。(分かりやすくて競合してなければなんでもいいらしい。)
⑥ webhook.envをGroup-Manager-3直下に作成し、中身はgm2の.envからコピーしたものにした。
⑦docker-compose run –rm user yarn create next-app .をターミナルで入力
ここでuserの部分は内容を保存するフォルダ名を指定
. はdocker-compose.ymlに対しての相対パス（らしい）
→webhook.envはuser内ではなくGroup-Manager-3直下におく。
⑧開発環境を設定。タスクの指示なしに従て決める。(yes or no)
→要求されてる内容が違ってやり直しになった。(事前に指定されてなかったから既存のプロジェクトを真似して選んだらあかんかった。)事前に準備しとくべき。
①”userフォルダを削除した
②”新たにuserフォルダを作る。
③”ここでmakefileのbuildとbuild macにgm3用の項目を追加
内容は別のフロントコンテナのやつをコピペしてコンテナ名だけ変える。
④”docker-compose run –rm user yarn create next-app .で適切に選択
yes or no
⑨docker compose up -d + docker psでコンテナが正常に起動しているか確認
～終わり～
memo:後輩に教えることも考えて覚えねば
追記：既存のプロジェクトに追加する場合、nodeのバージョンが古いといわれることがある。
①その場合はuser内にdockerfileを作成して（既存のプロジェクトからコピぺした。）
dockerfileに書いてあるnodeのバージョンを変更する
②docker compose build をする。
③作成したdockerfileを削除（そのままだと怒られる）
④docker compose run —rm user yarn create next-app .
これでnodeのバージョンをコンソールで全部更新する必要なく環境構築できた。
～引用ここまで～
環境構築をしてみた感想
自分がNUTMEGで初めて環境構築したときは右も左もわからない状況でメンターに教わりながらやったので、「すごいなぁ～」というくらいしか思わなかったのですが、半年以上くらいのNUTMEG活動を通して自力で環境構築できるところまで成長出来たことが感慨深かったです。環境構築をするための流れという部分はもちろんですが、環境構築都を通してdocker-compose.ymlのコードの書き方やmakefileの動作や使い方など、普段の開発では意図して気にしなければ触れないような部分の理解が深まったので今回挑戦して良かったと思います。また、さまざまなトラブルを抱えながら結果的に3回環境構築を経験したことでスムーズな環境構築よりも勉強になったと思います。はじめての環境構築で大変でしたが、終わってみると意外と単純な手順だと感じました。途中で何らかのエラーが出るとそこに時間がかかる印象です。
最後に
はじめは助言をもらいながらでしたが、最終的には完全自力で環境構築できるようになりました。今までスルーしていた部分のコードをいじってみて意味が分かった時は楽しかったです。来年度になれば後輩ができることも念頭に置きつつ、来年の技大祭までにGM3が完成するようにこれからも頑張りたいと思います。