MacでローカルのNodeアプリ開発環境構築、Gitの設定まで

10/16/2020公開
10/17/2020更新 (フォーマット変更、Vagrantfileの内容修正、仮想環境でのNodeのインストール追加)

イントロ--

仕事で普段利用しているMacbook Proが修理中なので自宅のiMacに再度同様の環境を構築。毎度手順を検索してしまうので自分用のメモ。
（免責事項...エンジニアがバックグラウンドではなく、UI/UXデザインからフロントエンド、最近ちょっとバックエンド、データベースを理解する必要が出てきた程度なので、ベストプラクティスではない可能性が高いです。)

背景--

オランダでのPhDのプロジェクトでデータプラットフォームの開発においてMEANスタックを検討。まだAngularを導入していないため、今回はタスクランナーのGulpを用いてSCSSをCSSに変換、画像の圧縮、JS、CSSファイルの縮小化などを行う。

ローカルマシン(iMac)のプロジェクト名をつけたディレクトリ(dataSystem)以下に作業フォルダ2つ(developとwork)作成。以降workにて作業、変更があったファイルをdevelopフォルダに上記の処理を吐き出すという流れ(Gulp watchの設定) 。ローカルではVagrantにて仮想環境を立ち上げUbuntu上でアプリを稼働させ動作確認する。

workディレクトリは個人のGithubのアカウントに紐付けてバージョン管理。developの方は本番用でエンジニアに用意してもらっているサーバのリモートレポジトリにまとまった進捗毎にプッシュ。リモートサーバではまだテスト用ブランチとしては運用できていないが一旦developブランチにプッシュし、その後本番用のブランチにcheckoutして本番反映。

手順--

1. 必要なソフトのインストールと設定

a. Vagrant: https://www.vagrantup.com/
古いバージョンでVagrant Box(ubuntu/xenial64を利用)を追加できなかったためVagrantのバージョンをアップデート(1.7.2 > 2.2.10)。$Vagrant add box ubuntu/xenial64でVagrant pluginsのエラーが出たので表示に従い修正。Vagrant init ubuntu/xenial64で初期化。Vagrant up > Vagrant sshで仮想マシンに問題なく入れることを確認。

Vagrantfileの設定は: 

config.vm.network "forwarded_port", guest: 80, host: 8080
config.vm.network "private_network", ip: "192.168.33.10"
config.vm.synced_folder "./data", "/vagrant_data"

のコメントアウトを外し、最初のポートフォワーディングの設定はguest: 3000, host: 3000に、最後のconfig.vm.synced_folderはシンクさせたいローカルのフォルダー"./develop"、vagrant sshでログイン後に移動するディレクトリ"/develop"を設定。

*追加*
仮想環境(Ubuntu16.04)にNode.jsが入っていなかったためインストール。色々方法があるようだがcurlを使った方法が手っ取り早く問題出なかったため(別の方法で試すと古いバージョンのNode.jsが入ったり、これを書き換える作業が発生したりしたのでVagrant destroyでサーバを再構築後)こちらを採用。

$curl -sL https://deb.nodesource.com/setup_13.x | sudo -E bash -
$sudo apt-get install -y nodejs

参照サイト: https://askubuntu.com/questions/426750/how-can-i-update-my-nodejs-to-the-latest-version
あと毎度変更がある度にNodeサーバの起動が面倒なのでnodemonをインストール。

$npm install -g nodemon

b. Gulp: https://gulpjs.com/
dataSystem直下(*仮想環境ではなくローカルに)Gulpのインストール。

$npm install --global gulp-cli 

*先にローカルのNode.jsを最新にアップデート。Gulpファイルの設定は別のnoteで。

2. Gitの設定

develop(workで作業したファイルの出力先、本番への反映用)のディレクトリで$git --versionで確認したところエラーが出たのでこれを参考に修正。
https://stackoverflow.com/questions/52522565/git-is-not-working-after-macos-update-xcrun-error-invalid-active-developer-pa
同じディレクトリ以下で以下のコマンドを実行。

$git initでローカルのリポジトリの作成
$git remote add origin ssh://[user name]@[url]でリモート追加
$git fetchでリモート追跡ブランチを最新化
git pull origin [リモートのブランチ名] でローカルブランチを最新化

参照：https://qiita.com/Kodak_tmo/items/c349750cda48882ae1de#%E8%A7%A3%E6%B1%BA%E6%96%B9%E6%B3%95
*今回は前の作業環境からデータをコピーしたためGitの情報が残っており、pull時にコンフリクト。リモートのdevlopブランチに強制的に合わすことで対応。

$ git reset --hard origin/develop

workでは自分のGithubにて新しく作ったレポジトリにて下記ガイドに従いファイルをGithub上にバージョンコントロールの目的でプッシュ。

$git init
$git add README.md *すでに作成済みであったため省略
git commit -m "first commit" *すでに変更済みのファイルがあったため先に$git add .
$git branch -M main *-Mで現在のブランチに名前をつける？
$git remote add origin https://github.com/k-wada-tue/datasystem_work.git
$git push -u origin main *-uで上流ブランチの設定

*補足*
expressのインストール($npm install express --save)はdevelopフォルダのみで行い、node_modules以下のファイルはリモートリポジトリにプッシュしないためgitignoreファイルを作成しgitの管理から外す。

$touch .gitignore
$vim .gitignore　＊node_modulesのコメントアウトを外す。
$git update-index --assume-unchanged .gitignore　＊.gitignoreのファイルも無視するように設定。

アウトロ--

ひとまずこれで環境設定第一段階完了。
次はGulpファイルの設定&テスト。フォルダの構成も確認。
またエディターはSublimeからVisual Studio Codeに変えたのでこれのダウンロード、設定も後に確認。