LoginSignup
0
1

More than 1 year has passed since last update.

VSCode + Git + githubでAzure開発環境整備(on Windows11)

Last updated at Posted at 2023-06-26

背景と目的

VSCodeもGitもAzureもほとんど触ったことがなかった自分のような人が高速で環境整備できるようにドキュメントをまとめました。これを読めば研修前の30分で環境が整う!(はず!)

おことわり

  • Windows11環境です。
  • Github Enterprise Server環境です。

VSCode + Git + Node.jsインストール

 のっけから他所のご案内となりますが:sweat:、ここでまとめるより非常に手順が整理されているWebページ(【VSCode + Git Bash】Windows に Node.js や AWS CLI の環境を構築する方法)を紹介いただきました。そちらを参照しながらの説明となります。

VScodeのインストール

上述Webページ 内 > 2. 環境構築 > 2-1 VSCode を参照して、VSコードのインストールおよび日本語化を実施。

VSCode拡張機能のインストール

インストールを推奨する拡張機能は以下の通り。VSCodeの拡張機能(Ctrl+Shift+X)から「インストール」を押下してインストールできる。

Node.js modules

01.png

ESLint

02.png

Azure Tools

(スクリーンショットはインストール済みのもの。)
03.png

Gitのインストール

上述Webページ 内 > 2. 環境構築 > 2-2 Gitを参照して、GitのインストールおよびVSCode のターミナルをGit Bashに設定

Node.jsのインストール

上述Webページ 内 > 2-4. Node.js を参照してnvm-windowsのインストールおよびNode.jsのインストールを実施。

補足1:インストールパス

「Set Node.js symlink」は、デフォルトでは「Program Files」ですが、インストールパスにスペースが含まれるとエラーになるため、「Programs」に変更しておきます。

とありますが、自分の環境ではインストールパスにスペースが含まれていてもエラーは発生しないため、最新の状況では対応不要かもしれません。

補足2:インストールバージョン

2023/5時点でAzure App Serviceとのバージョンの整合性を取るため、インストールバージョンは18.16.0を推奨
インストールコマンドはnvm install 18.16.0 nvm use 18.16.0

(余裕があれば)Pythonのインストール

上述Webページ 内 > 2-5. Python を参照してpyenv-winのインストールおよびpythonのインストールを実施。

Github(Github Enterprise)との連携

Github Enterprise上で提供するリポジトリをクローンします。
前提:クローン対象のリポジトリはすでに提供されている。

Github Enterpriseアカウント作成

(省略:hugging:

リポジトリのクローン(初回のみ)

  • 提供されたGithubのリポジトリ「Code」からHTTPSのURLをコピー。
    04.png

  • VSCodeを起動し 「新しいウィンドウ」(Ctrl+Shift+N)を立ち上げ
    05.png

  • メニュー ターミナル>新しいターミナル( Ctrl+Shift+@ ) で新しいターミナルを起動
    06.png

  • ターミナルでリポジトリをダウンロードするディレクトリ(ここではgit)に移動 ( cd git )
    07.png

  • リポジトリをクローンする git clone https://xxxxx.xxxxx.com/xxxxxx/sample-repo.git

  • サインインのセッション用のウィンドウが起動するので「Sign in with your browser」を押下
    08.png

  • ウィンドウが遷移するので「Authorise github-enterprise」を押下。その後、ステータスが進捗。
    09.png
    10b.png

クローンしたリポジトリを開く

  • VSCodeを起動し「ソース管理」のアイコンを押下して「フォルダを開く」を押下
    11.png

  • 「git」フォルダ>リポジトリ名のフォルダを選択(ここではcljn-trial-1)
    12.png
    13.png

  • Cloneしたリポジトリが起動
    14.png

リポジトリのクローン(2回目以降)

  • 「ソース管理」のアイコンから「リポジトリのクローン」を押下
    15.png

  • リポジトリのURLを入力
    16.png

  • リポジトリを保管するフォルダを選択(ここでは「git」フォルダを指定)
    12.png

  • クローンしたリポジトリを開く
    17.png
    14.png

補足:「新しいウィンドウで開く」で開いたウィンドウのメニューが英語で、日本語に戻したい場合

  • View->Command Palette を選択
    18.png

  • Configure Display Language と入力
    19.png

  • ja を選択→ 再起動
    20.png

これで直らない場合は、Configure Display Languageを一度「English」で選択して再起動ののち、同様の操作をしてみる。

補足:VSCodeで作成したソースコードを自分のリポジトリに反映(コミット)する

:複数名で管理するリポジトリをコミットする場合はブランチの考え方、プルリクエストの考え方を踏まえて操作を行う必要があるため、他の記事(例:Visual Studio Code と Git Hub を連携させてみる)などを参照のうえ注意して行うこと。

  • ソースの変更・保存を行うと「ソース管理」アイコンにバッジが点灯する
    21.png

  • コメントを追加して「コミット/コミットしてプッシュ/コミットして同期」いずれかを選択(ここでは「コミット」を選択)
    22.png

  • "There are no staged changes to commit."の警告が出るので今回は「はい」を選択
    23.png

  • 「変更の同期」を押下 ~ OKを押下
    24.png
    25.png

  • Githubのリポジトリに変更が反映されたことを確認
    26.png

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1