いまからでも遅くない！コンテナでWebアプリケーションを動かしてみよう（1）Gitハンズオン

TechXchange Dojo いまからでも遅くない！コンテナでWebアプリケーションを動かしてみよう（1）Gitハンズオン 2024年08月27日冒頭の質問および修了後のアンケートで使います。スマホまたはPCご協力よろしくおねがいいたします
17時開始予定です。少々お待ちください！

2 Customer Success, IBM Technology, Japan / © 2024 IBM
Corporation 自己紹介村田憲昭北海道北斗市スノーボード、登山、グルメ、猫カスタマーサクセス DX人材育成/教育(IT全般) スクラムマスター半導体アプリエンジニア某コンビニのエンジニア名前生息地趣味経歴

Corporation 免責事項本資料に含まれる情報は可能な限り正確を期しておりますが、記載された内容に関して、日本アイ・ビー・エム株式会社が何ら保証するものではありません。従って、本資料の情報の利用は使用者の責任において為されるものであり、資料の内容によって受けた如何なる被害に関しても一切の補償をするものではありません。本セッションは録画します。ご了承よろしくおねがいいたします。

Corporation アンケート https://app.sli.do/event/nmfiSLngty6bWEgAA55CzB

Corporation いまからでも遅くないシリーズ •（1）Gitハンズオン •（2）WebAPIハンズオン •（3）コンテナハンズオン •（4）Reactハンズオン •（5）データベースハンズオン •（6）コンテナオーケストレーションハンズオンコンテナオーケストレーション（OpenShift） Web サーバー API サーバー DB サーバー Gitサーバー Push Deploy PC

Corporation 今回のゴール Gitの基本的な操作がわかる

Corporation 前提条件基本的なWindows/Linuxコマンドの理解（cd、dir、mkdir等）

Corporation dir ・・・ディレクトリの中身を表示する cd ・・・任意のディレクトリに移動する mkdir(md) ・・・ディレクトリを作成する del ・・・ファイルを削除する rmdir(rd) ・・・ディレクトリを削除する notepad(vimなど)・・・ファイルを編集する ➀基本的なWindowsコマンド前提条件

Corporation ls ・・・ディレクトリの中身を表示する cd ・・・任意のディレクトリに移動する mkdir ・・・ディレクトリを作成する rm ・・・ファイルを削除する rm –r ・・・ディレクトリを削除する vim ・・・ファイルを編集する ➀基本的なLinuxコマンド前提条件

Corporation 本日のアジェンダ 1 ．（おさらい）バージョン管理システムとは 2 ．（おさらい） Git全体像 3 ．Gitコマンドの理解（コミット、initなど） 4 ．Gitコマンドの理解（ブランチ、マージ、コンフリクト） 5 ．Gitコマンドの理解（プッシュ、クローン、フェッチ、プル） 6 ．Gitコマンドの理解（プルリクエスト、ブランチ戦略）、デモ 7 ．QAタイム

Corporation バージョン管理システムとはファイルに対して「いつ」「誰が」「何を変更したか」というような情報を記録することで、過去のある時点の状態を「復元」したり変更内容の「差分」を表示できるように「バージョン」を付けて管理するシステム

Corporation リモートリポジトリ変更ローカルリポジトリローカルリポジトリ取得 Githubなど Gitなどの分散型バージョン管理システム反映 Git全体像

Corporation push commit add インデックスワークツリーローカルリポジトリリモートリポジトリ Gitワークフローと基本的なコマンドとの対応 init clone ローカルリポジトリ作成 status branch merge checkout pull/fetch Githubなど Git全体像

Corporation push commit add インデックスワークツリーローカルリポジトリリモートリポジトリ Gitワークフローと基本的なコマンドとの対応 init clone ローカルリポジトリ作成 status branch merge checkout pull/fetch Githubなど Gitコマンドの理解（コミット、initなど）

Corporation init、 add、status、commit init ・・・ローカルリポジトリを作成する add ・・・ファイルをインデックスに追加する status ・・・ワークツリーの状況を表示する commit ・・・インデックスにあるファイルをローカルリポジトリに追加する Gitコマンドの理解（コミット、initなど）

Corporation デモ（みんなで作業） Gitコマンドの理解（コミット、initなど）

Corporation ローカルリポジトリへcommit $ mkdir samplepj $ cd samplepj $ git init $ notepad Readme.txt $ git status $ git add . $ git status $ git commit -m "my first commit" Gitコマンドの理解（コミット、initなど）

Corporation push commit add インデックスワークツリーローカルリポジトリリモートリポジトリ Gitワークフローと基本的なコマンドとの対応 init clone ローカルリポジトリ作成 status branch merge checkout pull/fetch Githubなど Gitコマンドの理解（ブランチ、マージ、コンフリクト）

Corporation ブランチ A B C H Z リリース履歴機能追加履歴 Gitコマンドの理解（ブランチ、マージ、コンフリクト）バグ履歴

Corporation マージ C H D J Index.html Index.html Index.html Gitコマンドの理解（ブランチ、マージ、コンフリクト）

Corporation コンフリクト B C H D J コンフリクト Gitコマンドの理解（ブランチ、マージ、コンフリクト）

Corporation branch、merge、checkout branch ・・・ブランチを作成する/確認する merge ・・・ブランチを統合する checkout ・・・作業ブランチを切り替える Gitコマンドの理解（ブランチ、マージ、コンフリクト）

Corporation デモ（みんなで作業）ブランチ作ってマージ Gitコマンドの理解（ブランチ、マージ、コンフリクト）

Corporation ブランチ作ってマージ 1/2 $ git branch // 状況確認 $ git branch develop $ notepad main.txt // あとで確認する用 $ git add . $ git commit –m “main.txt commit” Gitコマンドの理解（ブランチ、マージ、コンフリクト）

Corporation ブランチ作ってマージ 2/2 $ git branch // 状況確認 $ git checkout develop $ dir // main.txtがいないことを確認 $ notepad develop.txt $ git add . $ git commit –m “develop.txt commit” $ git checkout master $ dir // develop.txtがいないことを確認 $ git merge develop // マージ $ dir // main.txt、develop.txt確認 Gitコマンドの理解（ブランチ、マージ、コンフリクト）

Corporation デモ（みんなで作業）ブランチ作ってコンフリクト Gitコマンドの理解（ブランチ、マージ、コンフリクト）

Corporation コンフリクト（複雑なので図解） sample.txtの2行目に「ブルーベリー」を追加 sample.txtの2行目に「メロン」を追加マージマージコンフリクト sample.txt 1行目に「テスト」作成 Gitコマンドの理解（ブランチ、マージ、コンフリクト）

Corporation ブランチ作ってコンフリクト $ git branch // masterブランチ確認 $ notepad sample.txt // 「テスト」追記 $ git add . $ git commit –m “conflict test” $ git branch develop1 $ git branch develop2 $ git checkout develop1 $ notepad sample.txt // 2行目「メロン」追記 Gitコマンドの理解（ブランチ、マージ、コンフリクト）

Corporation ブランチ作ってコンフリクト（続き） $ git add . $ git commit –m “melon add” $ git checkout master $ git merge develop1 $ git checkout develop2 $ notepad sample.txt // 2行目「ブルーベリー」追記 $ git add . $ git commit –m “blueberry add” Gitコマンドの理解（ブランチ、マージ、コンフリクト）

Corporation ブランチ作ってコンフリクト（続き） $ git checkout master $ git merge develop2 Auto-merging sample.txt CONFLICT (content): Merge conflict in sample.txt Automatic merge failed; fix conflicts and then commit the result. ★★ここでコンフリクト発生★★ ↓コンフリクトの内容を確認する↓ $ notepad sample.txt Gitコマンドの理解（ブランチ、マージ、コンフリクト）

Corporation ブランチ作ってコンフリクト（続き）こんな感じになっているはず・・・ ----------------------------------- テスト <<<<<<< HEAD メロン ======= ブルーベリー >>>>>>> develop2 Masterブランチの内容 develop2ブランチの内容 Gitコマンドの理解（ブランチ、マージ、コンフリクト）

Corporation ブランチ作ってコンフリクト（続き）今回はdevelop2の内容が正しいという方向で修正する ----------------------------------- テストブルーベリー develop2ブランチの内容に修正 Gitコマンドの理解（ブランチ、マージ、コンフリクト）

Corporation ブランチ作ってコンフリクト（続き）インデックスにはまだマージ前のファイルが記録されているため競合を解消したファイルをgit add コマンドで再度インデックスに追加する必要があります。そのままコミットでOK。 $ git add . $ git commit –m “conflict complete” Gitコマンドの理解（ブランチ、マージ、コンフリクト）

Corporation push commit add インデックスワークツリーローカルリポジトリリモートリポジトリ Gitワークフローと基本的なコマンドとの対応 init clone ローカルリポジトリ作成 status branch merge checkout pull/fetch Githubなど Gitコマンドの理解（プッシュ、クローン、フェッチ、プル）

Corporation プッシュローカルリポジトリにある対象データを、リモートリポジトリにアップロードすること push ローカルリポジトリリモートリポジトリ Githubなど Gitコマンドの理解（プッシュ、クローン、フェッチ、プル）

Corporation クローンリモートリポジトリにある情報を、ローカルリポジトリにまるごとコピーすること（同時にローカルリポジトリも作成） clone ローカルリポジトリリモートリポジトリ Githubなど Gitコマンドの理解（プッシュ、クローン、フェッチ、プル）

Corporation フェッチリモートリポジトリから最新の更新情報を取得して、ローカルリポジトリを最新化すること fetch ローカルリポジトリリモートリポジトリ Githubなど Gitコマンドの理解（プッシュ、クローン、フェッチ、プル）

Corporation プルリモートリポジトリから最新の更新情報を取得して、ローカルリポジトリを最新化して、手元のソースとマージすること（fetch＋merge） pull ローカルリポジトリリモートリポジトリ Githubなど Gitコマンドの理解（プッシュ、クローン、フェッチ、プル）

Corporation デモ（みんなで作業） Gitコマンドの理解（プッシュ、クローン、フェッチ、プル）

Corporation 最新をプルして、ファイル追加してプッシュ $ cd .. // samplepjフォルダの1階層上に移動 $ git clone https://github.com/（アカウント名）/git-tutorial $ cd git-tutorial $ echo "# git-tutorial" >> README.md $ git init $ git add . $ git commit -m "first commit" $ git branch -M main $ git push -u origin main GitHubとのやりとり（プッシュ、クローン、フェッチ、プル）

Corporation 最新をプルして、ファイル追加してプッシュ（※補足１）git push時に以下のようなエラー →git pull origin masterしてください！ error: failed to push some refs to 'https://github.com/NoriMuraZ/git-tutorial' hint: Updates were rejected because the remote contains work that you do hint: not have locally. This is usually caused by another repository pushing hint: to the same ref. You may want to first integrate the remote changes hint: (e.g., 'git pull ...') before pushing again. hint: See the 'Note about fast-forwards' in 'git push --help' for details. GitHubとのやりとり（プッシュ、クローン、フェッチ、プル）

Corporation 最新をプルして、ファイル追加してプッシュ $ git push origin master Username for ‘https://github.com’: (GitHubアカウント名) Password for ‘https://[email protected]’: (メモったトークン) （※補足２）git push時に以下のようなエラー →Gitハンズオン準備でメモったトークンを使って認証してください！ GitHubとのやりとり（プッシュ、クローン、フェッチ、プル）

Corporation 最新をプルして、ファイル追加してプッシュ GitHubとのやりとり（プッシュ、クローン、フェッチ、プル）「いいえ」をクリックして、警告を飛ばしてください（複数回出る場合もあり）（※補足３）git push時に以下のようなエラー（Windowsの方）

Corporation ブランチ戦略 master(main) develop feature release hotfix プロダクトとしてリリースする用のブランチ。リリースしたらタグ付けする。リリース後の緊急対応（クリティカルなバグフィックスなど）用。開発用ブランチ。コードが安定し、リリース準備ができたらreleaseへマージする。機能の追加用。developから分岐し、developにマージする。プロダクトリリースの準備用。リリース予定の機能やバグフィックスが反映された状態のdevelopから分岐する。 Gitコマンドの理解（ブランチ戦略、プルリクエスト、デモ）

Corporation ブランチ戦略（樹形図） master(main) develop feature release hotfix Tag Ver0.1 Tag Ver1.0 Tag Ver2.0 Tag Ver2.1 Gitコマンドの理解（ブランチ戦略、プルリクエスト、デモ）

Corporation デモ（みんなで作業） Gitコマンドの理解（ブランチ戦略、プルリクエスト、デモ）

Corporation ブランチ戦略（vscodeでブランチを可視化）以下の状態を作って、vscodeで確認してみる Gitコマンドの理解（ブランチ戦略、プルリクエスト、デモ）

Corporation ブランチ作ってマージ $ cd git-tutorial // git-tutorialに移動 $ git branch // 状況確認 $ git checkout –b develop // develop作成しつつ移動 $ notepad develop.txt $ git add . $ git commit –m “develop create” ここでvscodeを開きましょう Gitコマンドの理解（ブランチ戦略、プルリクエスト、デモ）

Corporation ブランチ作ってマージここでvscodeを開きましょう。右クリックして「その他のオプションを表示」⇒「Codeで開く」 Gitコマンドの理解（ブランチ戦略、プルリクエスト、デモ）「Codeで開く」ボタンクリック

Corporation ブランチ作ってマージ(GitGraphで確認) Vscode左下「Git Graph」ボタン押す Gitコマンドの理解（ブランチ戦略、プルリクエスト、デモ）ブランチの状態がわかる

Corporation ブランチ作ってマージ（続き。Vscodeのターミナルを使って・・・） $ git checkout main $ git merge develop ここでまたvscodeを開きましょう Gitコマンドの理解（ブランチ戦略、プルリクエスト、デモ）

Corporation ブランチ作ってマージ(GitGraphで確認) Gitコマンドの理解（ブランチ戦略、プルリクエスト、デモ）結合！

Corporation プルリクエストしてみるプルリクエストマージ Gitコマンドの理解（ブランチ戦略、プルリクエスト、デモ）コードなどを追加・修正した際、ブランチへの反映を他の開発者に依頼する機能レビュー担当

Corporation プルリクエストしてみるプルリクエストマージレビュー担当 ➁プルリクエストを作成します ➂マージします Gitコマンドの理解（ブランチ戦略、プルリクエスト、デモ） ➀新しいソースファイルを追加します

Corporation デモプルリクエスト作成 ↓ プルリクエスト確認作業 Gitコマンドの理解（ブランチ戦略、プルリクエスト、デモ）

Corporation プルリクエストしてみる(準備編) これまでコマンドベース(CUI)でやってきたことを vscode(GUI)上でやってみます。 Gitコマンドの理解（ブランチ戦略、プルリクエスト、デモ）

Corporation プルリクエストしてみる(準備編) 【注意】 git-tutorialフォルダを一度削除してください Gitコマンドの理解（ブランチ戦略、プルリクエスト、デモ）

Corporation プルリクエストしてみる(準備編) （1/21）vscodeを起動後、ボタン→「リポジトリの複製」ボタン押して以下URLを貼り付ける https://github.com/NoriMuraZ/git-tutorial URL貼り付けして Enterキー押す Gitコマンドの理解（ブランチ戦略、プルリクエスト、デモ）

Corporation （2/21）ソース保存先を決めて「リポジトリの場所を選択」ボタンを押して vscode右下に表示される「ワークスペースに追加」ボタンを押すソースを保存するフォルダを作成プルリクエストしてみる(準備編) Gitコマンドの理解（ブランチ戦略、プルリクエスト、デモ）

Corporation （3/21）以下画面の表示になったら準備OKですプルリクエストしてみる(準備編) Gitコマンドの理解（ブランチ戦略、プルリクエスト、デモ）

Corporation （補足）Readme.mdを作ってみましょうプルリクエストしてみる(準備編) Gitコマンドの理解（ブランチ戦略、プルリクエスト、デモ） Readme.mdと入力してEnterキー押す # git-tutorial と入力初めてのコミットと入力

Corporation （4/21）作業ブランチを「master」（またはmain）ボタンを押して、developブランチに切り替えるプルリクエストしてみる(ソース修正編) Gitコマンドの理解（ブランチ戦略、プルリクエスト、デモ）

Corporation （5/21）ボタンを押して、ファイルを作成する（ここでは自分の名前のファイルを作成）プルリクエストしてみる(ソース修正編) この表示になれば OK Gitコマンドの理解（ブランチ戦略、プルリクエスト、デモ）

Corporation （6/21）ソースファイルを編集して、上書き保存する（Ctrl＋S）プルリクエストしてみる(ソース修正編) Gitコマンドの理解（ブランチ戦略、プルリクエスト、デモ）

Corporation （7/21）差分表示を確認するプルリクエストしてみる(ソース修正編) Gitコマンドの理解（ブランチ戦略、プルリクエスト、デモ）

Corporation （8/21）インデックスに上げて、コミットメッセージを入力、コミットしてプッシュするプルリクエストしてみる(ソース修正編) 1. インデックスに上げる 2. インデックスに上がっているのを確認 3. コミットメッセージを入力 4. コミット 5. プッシュ Gitコマンドの理解（ブランチ戦略、プルリクエスト、デモ） 5. プッシュ

Corporation （9/21）GitGraphに切り替えて、git fetchしておくプルリクエストしてみる(ソース修正編) クリッククリックまたはこちら↓ Gitコマンドの理解（ブランチ戦略、プルリクエスト、デモ）

Corporation （10/21） Gitの状態をGitGraphで確認するプルリクエストしてみる(ソース修正編) Gitコマンドの理解（ブランチ戦略、プルリクエスト、デモ）入力したコミットメッセージが表示

Corporation （11/21）以下GitHubのURLにアクセスして、プルリクエストを作成する https://github.com/(ユーザ名)/git-tutorial/pulls プルリクエストしてみる(プルリクエスト作成編) Gitコマンドの理解（ブランチ戦略、プルリクエスト、デモ）

Corporation （12/21）「New pull request」ボタンを押して、「compare:develop」を選択プルリクエストしてみる(プルリクエスト作成編) Gitコマンドの理解（ブランチ戦略、プルリクエスト、デモ）

Corporation （13/21）以下表示になったら「Create pull request」を押すプルリクエストしてみる(プルリクエスト作成編) ・コミットメッセージ・差分ファイルの情報を確認するクリック Gitコマンドの理解（ブランチ戦略、プルリクエスト、デモ）

Corporation （14/21）以下表示になったら「Create pull request」を押すプルリクエストしてみる(プルリクエスト作成編) Gitコマンドの理解（ブランチ戦略、プルリクエスト、デモ）プルリクエストの内容を説明する文を入力する（ソースコードの改修内容や動作確認方法など）【ポイント】プルリクエストを見てもらう人に今回の修正内容をわかりやすく説明すること

Corporation （15/21）以下表示になればプルリクエスト作成完了ですプルリクエストしてみる(プルリクエスト作成編) Gitコマンドの理解（ブランチ戦略、プルリクエスト、デモ）

Corporation （16/21）先ほどの画面のURLをチャットなどで知らせて依頼完了（プルリクエスト依頼）プルリクエストしてみる(プルリクエスト依頼編) https://github.com/NoriMuraZ/git-tutorial/pull/1 ibmmurat a ibmmurat a Gitコマンドの理解（ブランチ戦略、プルリクエスト、デモ）

Corporation （17/21）（プルリクエスト依頼された側）知らされたURLにアクセスするプルリクエストしてみる(プルリクエストマージ編) https://github.com/NoriMuraZ/git-tutorial/pull/1 ibmmurat a ibmmurat a Gitコマンドの理解（ブランチ戦略、プルリクエスト、デモ）

Corporation （18/21）（プルリクエスト依頼された側）内容を確認し「Merge pull request」ボタン→「Confirm merge」ボタンを押すプルリクエストしてみる(プルリクエストマージ編) Gitコマンドの理解（ブランチ戦略、プルリクエスト、デモ）

Corporation （19/21）（プルリクエスト依頼された側）以下内容になればマージOK プルリクエストしてみる(プルリクエストマージ編) Gitコマンドの理解（ブランチ戦略、プルリクエスト、デモ）

Corporation （20/21） Git GraphでGitHubの状態を確認する。「Fetch」ボタンを押す。プルリクエストしてみる(プルリクエストマージ編) Fetchボタンを押す Gitコマンドの理解（ブランチ戦略、プルリクエスト、デモ）

Corporation （21/21）マージ（統合）されたことがわかる。プルリクエストしてみる(プルリクエストマージ編) Gitコマンドの理解（ブランチ戦略、プルリクエスト、デモ）

Corporation インデックスワークツリーローカルリポジトリリモートリポジトリ例題（既存PJのリポジトリpullして、ファイル修正） Github ➀クローン ➂ファイル作成 ➁フォルダ移動、状態確認、ブランチ切り替え ➃ インデックスに追加 ⑤ コミット ⑥ プッシュ ⑦プルリクエスト ⑧プルリクエスト承認（マージ） Gitコマンドの理解（ブランチ戦略、プルリクエスト）

Corporation ➀ $ git clone https://github.com/・・・ ➁ $ cd (フォルダ名) & git branch ➁ $ git checkout –b develop // なければ作成 ➂ $ notepad develop.txt ➃ $ git add -A ⑤ $ git commit –m “ソースファイルを作成した(develop)” ⑥ $ git push origin develop // 認証 ⑦ プルリクエスト作成 ⑧ プルリクエスト承認（マージ） Gitコマンドの理解（ブランチ戦略、プルリクエスト、デモ）回答

Corporation 1 ．（おさらい）バージョン管理システムとは 2 ．（おさらい） Git全体像 3 ．Gitコマンドの理解（コミット、initなど） 4 ．Gitコマンドの理解（ブランチ、マージ、コンフリクト） 5 ．Gitコマンドの理解（プッシュ、クローン、フェッチ、プル） 6 ．Gitコマンドの理解（プルリクエスト、ブランチ戦略）、デモ 7 ．QAタイム本日のアジェンダ

Corporation QAタイム

Corporation まとめ 1 ．（おさらい）バージョン管理システムとは 2 ．（おさらい） Git全体像 3 ．Gitコマンドの理解（コミット、initなど） 4 ．Gitコマンドの理解（ブランチ、マージ、コンフリクト） 5 ．Gitコマンドの理解（プッシュ、クローン、フェッチ、プル） 6 ．Gitコマンドの理解（プルリクエスト、ブランチ戦略）、デモ

Corporation いろいろTry&Errorしながら試してみてください。ありがとうございました

いまからでも遅くない！ コンテナでWebアプリケーションを 動かしてみよう（1）Gitハンズオン

いまからでも遅くない！ コンテナでWebアプリケーションを 動かしてみよう（1）Gitハンズオン

Transcript

More Decks by NoMu

Other Decks in Technology

Featured

いまからでも遅くない！コンテナでWebアプリケーションを動かしてみよう（1）Gitハンズオン

いまからでも遅くない！コンテナでWebアプリケーションを動かしてみよう（1）Gitハンズオン