- React + Vite でのアプリ作りを始めて GitLab や GitHub で資材管理
- git や npm コマンドを使う機会が増えてきたので、備忘も兼ねてまとめておきたい
- これらのコマンドに関するネット記事は溢れているだろうし、
生成 AI に聞けば十分だろう - アウトプットの練習としながらも、「どの局面でどんなコマンドを使うか？」という視点でこれまで触れてきたコマンドをまとめていく
前提として、既に GitLab で資材管理されている状態とする
実装前
概要
- git
- リモートリポジトリからの資材クローン
- ブランチ作成や切り替え
- npm
- 依存関係のインストール
- 開発サーバーの起動
など
# リモートリポジトリからローカルリポジトリに資材をクローン
git clone <Project URL>
# ローカルリポジトリのブランチを表示（選択中のブランチも表示）
git branch
# 例
$ git branch
* feature/test-branch # 選択中のブランチにはアスタリスクが付く
main
# リモートリポジトリのブランチを表示
git branch -a
# ブランチ作成
git branch <new branchname>
# ブランチ切替
git switch <branchname>
# ブランチのリネーム（オプションは move の `m`, Linux の mv みたいなもの）
git branch -m [<old branchname>] <new branchname>
# <old branchname> を指定しない場合は選択中のブランチがリネームされる
# 強制リネーム（`--move` と `--force`の組合せ）
git branch -M [<old branchname>] <new branchname>
# 必要に応じて利用（大抵、正しくブランチアウトが出来ているか？）
# コミットログを確認
git log
# 最新のログだけ確認
git log -1
リモートリポジトリの最新情報をローカルに反映させたい場合
こちらの記事を参考にしてください
https://qiita.com/mareinu/items/c3f1b2b7419b7646ac47
# 依存関係のインストール
npm install
# 開発サーバーの起動
npm run dev
デフォルトポート 5173 を変更したい場合
npm run dev -- --port 60000
# あるいは vite.config.js でポート番号を指定する
export default {
server: {
port: 60000,
},
};
実装中～実装後
概要
- git
- ステージングへの追加
- コミット
- リモートリポジトリへのプッシュ
- npm
- タグ付け
など
# ワーキングツリーの状態を表示
git status
# 修正済のディレクトリやファイル、それらがステージングにあるかなどを確認するのに使っている
# ワーキングツリーの状態をステージングに追加
git add <directory/file path>
# `.`（ピリオド）を指定するとワーキングツリーの状態全てをステージングに追加する
# コミット（リポジトリに変更内容を記録）
git commit [-m "<commit message>"]
# `-m` オプションを指定せず editor を開いてコミットメッセージを書くことも可能
# しかし、短いメッセージで十分なら、ワンライナーで記述できるので `-m` オプションが便利
プロジェクトにタグ付けをしたい場合
npm version <[major] | [minor] | [patch]>
これにより、タグ付けだけでなく
-
package-lock.jsonやpackage.jsonで管理している
プロジェクトバージョンのインクリメント - 自動コミット
が行われる
現在のバージョンが 1.5.1 の場合
| major | minor | patch |
|---|---|---|
| 2.0.0 | 1.6.0 | 1.5.2 |
| 後方互換性を壊す変更時 | 新機能追加時など | バグ修正時など |
CI/CD パイプラインが適切に引けていれば、このコマンドを実行する必要はない
# リモートリポジトリへのプッシュ
git push origin <branchname> [--tags]
# ローカルリポジトリのブランチ削除
git switch <another branchname> # main ブランチなど他のブランチに切り替えておく
git branch -d <branchname>
# 強制ブランチ削除
git branch -D <branchname>
ビルド/サーバー起動
概要
- npm
- ビルド
- 静的サーバーでの起動
など
# ビルド実行
npm run build # `dist` ディレクトリが生成される
# 静的サーバーでの起動/確認
npm run preview
開発 PC 以外で起動したい場合
デプロイは、ビルド時に生成された dist ディレクトリを起動先のサーバー/PCに移動
# Node.js インストール済であれば
npm install -g serve
# dist ディレクトリの上位ディレクトリでコマンド実行
serve -s dist
# ポート番号を指定したい場合
serve -s dist -l 60000
番外
リモートリポジトリに関して
# リモートリポジトリの追加
git remote add <repository name> <repository url>
# デフォルトで `repository name` は origin
# リモートリポジトリを一覧表示
git remote -v
# リモートリポジトリを削除
git remote rm <repository name>
# URLを変更
git remote set-url origin [new repository url]
# リポジトリ名を変更
git remote rename [old repository name] [new repository name]
ヘルプに関して
# git コマンドのオプションやサブコマンドの説明や使い方を表示
git help
# 利用可能なサブコマンドをリスト表示
git help -a
# 特定のコマンドのマニュアル（使い方）をブラウザで表示
git help <command>
git <command> --help # これでも同じ