1-7.gitでソースコードを管理する(GitHub)

SpringBoot3(REST API)✖️Next.jsで作るSNSWebアプリケーション

今パートの目標

前回はDocker環境にNext.js✖️Typescriptのアプリケーションを作成しました。
今回は今まで作成したapiとfrontのソースコードをgit管理し、githubにプッシュしていこうと思います。

環境について

  • Next.js 14.2.3
  • Typescript 5
  • SpringBoot 3.2.0
  • java 17
  • git 2.43.0
  • macOS Sonoma 14.1.1
  • Docker Desktop 4.18.0

Gitのインストール

mac環境にGitのインストールをするにはHomeBrewを使用するのが簡単です。
以下が参考になります。

【MacOS】Homebrew経由でGitをインストールする方法 - 独学プログラマ
今回達成すること今回は、Gitのインストールとセットアップを行います。MacデフォルトのGitを確認するGitは、Macにデフォルトでインストールされています。スポットライト(Commandスペース)からターミナルを検索し開いてください。タ...

GitHubでリポジトリを作成する

GitHubのアカウントを持っていない人はまず、下記を参考にアカウントを作成します。

リポジトリを作成する

GitHubのアカウントにサインインすると下記のような画面となるため、右上の➕ボタンから「New repogitory」を選択します。

APIのソースコードをGit管理する


Repository nameだけ入力して「create repository」ボタンを押します。
※リポジトリを公開するかどうかは各自選択してください

リポジトリが作成され、次画面で下記のようなコマンドをローカルで実行するように求められます。

git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/kuu18/share-favplace-api.git
git push -u origin main

一つずつ実行していきましょう

git init
share-favplace-api % git init

コマンドを実行するフォルダ配下のファイルをgitで管理を始めるというコマンドです。
.gitという隠しフォルダが作られ、管理されていきます。

.gitignoreファイルを修正する

.gitignoreファイルとは、gitで管理したくないファイルを指定するファイルです。
リモートリポジトリにあげたくないファイルなどを記載します。

HELP.md
.gradle
build/
!gradle/wrapper/gradle-wrapper.jar
!**/src/main/**/build/
!**/src/test/**/build/
dbdata
pgadmin4
gradle

# Package Files #
*.jar
*.war
*.ear

### STS ###
.apt_generated
.classpath
.factorypath
.project
.settings
.springBeans
.sts4-cache
bin/
!**/src/main/**/bin/
!**/src/test/**/bin/

### IntelliJ IDEA ###
.idea
*.iws
*.iml
*.ipr
out/
!**/src/main/**/out/
!**/src/test/**/out/

### NetBeans ###
/nbproject/private/
/nbbuild/
/dist/
/nbdist/
/.nb-gradle/

### VS Code ###
.vscode/

# OS
Thumbs.db
.DS_Store

# Other
*.log
*.swp
*.bak
environment
*.env
git add
share-favplace-api % git add -A

コマンドを実行するフォルダ配下のファイルをステージングするというコマンドです。
今回は初回のため、全てのファイルをリモートにプッシュしたいため「-A」というオプションを使用しています。

git add README.md

上記の場合、README.mdというファイルをステージングするというコマンドです。

git commit
git commit -m "first commit"

ステージングされたファイルを「first commit」というメッセージでコミットするというコマンドです。

git branch
git branch -M main

デフォルトブランチをmasterからmainに変更するといコマンドです。
これに関してはmasterのままでも問題ないですが以下のような理由があるそうです。

デフォルトのブランチ名がmasterからmainになった理由
git remote add
git remote add origin https://github.com/kuu18/share-favplace-api.git

リモートリポジトリを登録するコマンドです。

git push
git push -u origin main

コミットしたソースコードをリモートリポジトリにアップロードするコマンドです。

上記のようにリモートリポジトリで確認できるようになっていればアップロード完了です。

FrontのソースコードをGit管理する

基本的にはAPIの時と同じです。
Frontの.gitignoreは以下のようになります。

# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js
.yarn/install-state.gz

# testing
/coverage

# next.js
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# local env files
.env*.local
*.env

# vercel
.vercel

# typescript
*.tsbuildinfo
next-env.d.ts

# other
.config
.npm

developブランチを作成する

ここまででGitHubにソースコードをPUSHできました。
最後にdevelopブランチを作成します。
現在はmainブランチのみができていますが、今後開発する際はdevelopブランチからさらにブランチを切って、改修機能ごとに新しいブランチを作成して開発を行ない、最終的にdevelop→mainにマージするような形で進めていきます。

GitHubのリポジトリページからAPI、Frontともにdevelopブランチを作成します。

mainブランチ

本番環境の資材と同じ資材のブランチ

developブランチ

開発を行っていくブランチ

まとめ

以上でGitでのソース管理ができるようになりました。今後はGitを活用して開発していきます。
Gitについては開発する上で必須級に重要な知識だと思います。
参考にUdemy動画ですが以下が非常にわかりやすいです。

GitHubの無料チュートリアル - Git:はじめてのGitとGitHub
GitとGitHubが初めての人が仕組みを理解した上で基本的な操作ができるようになるコースです。ハンズオンでGitコマンドを入力することを通じて、未経験から、Gitで記録しGitHubにコードをアップできるようになります。 - 無料コース
Git: もう怖くないGit!チーム開発で必要なGitを完全マスター
Gitの基本コマンド、ブランチやマージ、コンフリクトの解消方法、リベース、GitHubを利用した開発フローなど、チーム開発に必要なGitの全てが含まれています。仕組みを図解で理解した上でハンズオンで実践するので、もうGitは怖くありません。

次回はフロントエンドからリクエストを送信し、APIでレスポンスを返し、フロントエンドの画面に表示するフロントエンドとバックエンドの通信をやっていきたいと思います。

コメント

タイトルとURLをコピーしました