システム開発会社の入社２日目、今後の開発に向けてPCの開発環境構築を行うことに。
貸与されたMacBookは未使用だったため、GitやHomebrewなど諸々１からインストールが必要な状況でした。
ところどころでエラーがあり、四苦八苦しながらセットアップを終えましたが、記憶に新しいうちに振り返りとしてアウトプットしておきます。
目標
ローカルで作成したHTMLファイルをインターネット上に公開する。
使用ツール
【PC】
・M2 MacBook Pro13（macOS 14.4.1）
【エディタ】
・Visual Studio Code
【パッケージ管理】
・Homebrew
【バージョン管理】
・Git
【ターミナル】
・warp
【デプロイ】
・Vercel
手順
(1) Visual Studio Code(vscode)のインストール
公式
エディタはたくさんありますが、今回は会社で使用するvscodeをインストール。
Windows、Linux版もありますが、macOSの想定のためMac版をダウンロードします。
(2) warpのインストール
macに標準でインストールされている「ターミナル」でも良いのですが、会社の先輩からコマンドの入力補完機能が優秀なWarpをおすすめされたため、こちらを選択。
(3) gitの確認
まず始めにインストールしたwarpを使って、使用しているPCに既にgitが存在しているか確認します。
以下のコマンドをwarpに打ち込んでEnter
$ which git
ここでパスが返ってきたらそこにGitがあるよ、と教えてくれていますし、
何も表示されなければPCにGitがインストールされていない、ということです。
もしパスが返ってきたら、続けて以下のコマンドを打ち込みます。
$ git -v
これでインストールされているGitのバージョンを知ることができます。
git versionの後ろに（Apple Git-○○○）と記述されている場合、それはmacにデフォルトで入っているGitを指しています。
今回使うのはこのApple Gitの方ではなく、パッケージ管理システムの「Homebrew」配下にGitを置くことで、バージョンアップデート等も楽に行えるようになります。
(4) Homebrewのインストール
Git同様、既にPCにHomebrewが入っていないか確認します。
$ which brew
入っていないことを確認したら、Homebrew公式にある以下のコマンドを叩きます。
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
これでHomebrewが使えるようになりました！！
brew install 〇〇とコマンドを打つことでパッケージをインストールすることができます。
それではHomebrewでGitをインストールしていきましょう。
$ brew install git
無事にインストールが完了したら自分のPCのユーザー名が表示されますが、
このままでは前述のApple GitとHomebrewでインストールしたGitの２つが存在している状況です。
そこで以下記事を参考に「パスを通す」工程を進めましょう。
【macOS版】Homebrewを使ってgitをインストール
※.zshrcファイルは隠しファイルのため、finderで見当たらない時は「command + shift + .」で隠しファイルを表示して確認ができます。存在しない場合は新たに作成します。
(5)GitHubにサインアップ
GitHub
続いてGitHubでアカウントを作成します。
アカウントの作成後、再びターミナル（warp）でgitのコマンドを叩いていきます。
$ git config --list
credential.helper=osxkeychain
これでGitの設定を確認することができますが、初期状態ではcredential~という一文しか出てこないと思います。
これからローカルリポジトリとリモートリポジトリを紐づけるため、以下コマンドでGitHubのユーザーネームとメールアドレスを設定に追加します。
$ git config --global user.name "自分のアカウント名"
$ git config --global user.email "自分のe-mailアドレス"
ここまで来ればあと一息です！
(6)Vercelでデプロイ
それではデスクトップ上（ローカル）に１つテスト用のディレクトリを作成してください。
そしてその中に実際にウェブ上に公開するHTMLファイルを作成します。内容はなんでもOKです。
次にcdコマンドで今作成したディレクトリまで移動しましょう。
warpの場合cdの後に半角スペースでTabキーを押すと、候補が出てきてくれるはずです。
~/Desttop/作成したディレクトリ
ここまで移動してきたら、Gitコマンドを叩いてローカルリポジトリを作成していきます。
$ git init
これで現在のディレクトリの直下に「.git」というディレクトリが作成されました。
また、GitHubの方でもリモートリポジトリを新規作成します。
すると親切にセットアップのコマンドを示してくれます。
echo "# git-test-1" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/minamoto-m/git-test-1.git
git push -u origin main
それでは、ホスティングサービスのVercelに登録していきます。
プランは「Hobby」で大丈夫です。
Create Your Vercel Account
こちらはGitHubと連携して、リモートリポジトリを選択すればすぐにデプロイ（公開）することが可能です。
デプロイするリモートリポジトリを選択して「import」
そのまま「Deploy」を押下して、「Congratulations!」と表示されたら無事デプロイ完了です
課題
取り急ぎ構築手順を思い出しながら書いてみましたが、このコマンドで何をしているか、という理解がまだまだ足りていません。
この記事も書きっぱなしにせず、各所を深掘りして明確に説明できるレベルにしておきたいと思います。
また、エラーの解決方法などについて詳しく書けていないため、他記事を漁りながら参考になるものを探してみます。
参考記事
・21世紀のターミナル「warp」のススメ
・【macOS版】Homebrewを使ってgitをインストール
・GitHubのリポジトリとVercelを接続して、ホスティングする