今パートの目標
前回は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を使用するのが簡単です。
以下が参考になります。
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のままでも問題ないですが以下のような理由があるそうです。
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動画ですが以下が非常にわかりやすいです。
次回はフロントエンドからリクエストを送信し、APIでレスポンスを返し、フロントエンドの画面に表示するフロントエンドとバックエンドの通信をやっていきたいと思います。
コメント