gitでソースコードを管理する(GitHub)
はじめに
こちらに移行しました🙇
バックエンドにSpringBoot3(REST API)フロントエンドにReactを使用してSNS風のWebアプリケーションを作っていきます。
勉強も兼ねて記録に残したいと思いますので誰かの役に立てば嬉しいです😊
今パートの目標
前回はDocker環境にReact✖️Typescriptのアプリケーションを作成し、tailwindcssのインストールを行ないました。
今回は今まで作成したapiとfrontのソースコードをgit管理し、githubにプッシュしていこうと思います。
環境について
- react 18.2.0
- Typescript 4.9.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」ボタンを押します。
※リポジトリを公開するかどうかは各自選択してください
リポジトリが作成され、次画面で下記のようなコマンドをローカルで実行するように求められます。
echo "# share-favplace-api" >> README.md
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
一つずつ実行していきましょう
1.
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
share-favplace-api % git add -A
コマンドを実行するフォルダ配下のファイルをステージングするというコマンドです。
今回は初回のため、全てのファイルをリモートにプッシュしたいため「-A」というオプションを使用しています。
git add README.md
上記の場合、README.mdというファイルををステージングするというコマンドです。
git commit -m "first commit"
ステージングされたファイルを「first commit」というメッセージでコミットするというコマンドです。
git branch -M main
デフォルトブランチをmasterからmainに変更するといコマンドです。
これに関してはmasterのままでも問題ないですが以下のような理由があるそうです。
git remote add origin https://github.com/kuu18/share-favplace-api.git
リモートリポジトリを登録するコマンドです。
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
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# other
*.env
.config
.npm
developブランチを作成する
ここまででGitHubにソースコードをPUSHできました。最後にdevelopブランチを作成します。
現在はmainブランチのみができていますが、今後開発する際はdevelopブランチからさらにブランチを切って、改修機能ごとに新しいブランチを作成して開発を行ない、最終的にdevelop→mainにマージするような形で進めていきます。
- mainブランチ 本番環境の資材と同じ資材のブランチ
- developブランチ 開発を行っていくブランチ
GitHubのリポジトリページからdevelopブランチを作成します。
API、Frontともに作成します。
まとめ
以上でGitでのソース管理ができるようになりました。今後はGitを活用して開発していきます。
Gitについては開発する上で必須級に重要な知識だと思います。
参考にUdemy動画ですが以下が非常にわかりやすいです。
次回はフロントエンドからリクエストを送信し、APIでレスポンスを返し、フロントエンドの画面に表示するフロントエンドとバックエンドの通信をやっていきたいと思います。
Discussion