LoginSignup
7
3

More than 3 years have passed since last update.

@Gsann

Docker×Git×VSCodeの環境構築は多分これが一番やさしい説明だと思います

Last updated at Posted at 2021-01-24

環境

  • Windows 10 Pro

詳細なシステム要件は以下のページで確認。（Hyper-Vを有効にするための要件）

準備するもの

  1. Docker Desktop for Windows
  2. Git for Windows
  3. Visual Studio Code

この記事では1,2,3の順番で説明。

Docker Desktop for Windowsをインストール

  1. ダウンロードページへ移動（https://www.docker.com/products/docker-desktop）
  2. 「Download for Windows」をクリックしてダウンロード

image.png
　
3. ダウンロードしたインストーラをクリックしてインストール開始

image.png
　
4. インストーラを起動したらOKを押下（「Enable Hyper-V Windows Features」をチェックすることでHyper-Vを有効にしてくれる）

image.png
　
5. 「Close and restart」を押下して再起動

image.png
　
6. 再起動後、自動的にDockerが起動したら完了

image.png

再起動後に「WSL 2 installtion is incomplete」のエラーが発生する場合

現象

再起動後、自動的にDockerが起動する。その際に以下のエラーが発生。

image.png

解消方法

  1. 以下のリンクに移動して、「x64 マシン用 WSL2 Linux カーネル更新プログラム パッケージ」をクリック

image.png
　
2. ダウンロードしたファイルをクリックして更新プログラムパッケージを実行

image.png
　
3. Nextを押下して実行

image.png
　
4. Finishを押下してダイアログを閉じる

image.png
　
5. エラーのダイアログでRestartを押下

image.png

Git for Windowsのインストール

  1. ダウンロードページへ移動（https://gitforwindows.org/）
  2. 「Download」をクリックしてインストーラをダウンロード

image.png
　
3. ダウンロードしたインストーラをクリックしてインストール開始

image.png
　
4. Nextを押下

image.png
　
5. インストール場所を指定。特に理由が無ければデフォルトにしてNextを押下

image.png
　
6. コンポーネントの選択。これも特に理由が無ければデフォルトにしてNextを押下

image.png
　
7. Nextを押下

image.png
　
8. Gitのデフォルトのエディタを選択。ここは特に気にする必要はないのでNextを押下（後で変更可能）

image.png
　
9. Gitで新しくリポジトリを作成するときのデフォルトの初期ブランチ名を決定。特にこだわりが無ければ「Let Git decide」を選択してNextを押下

image.png
　
10. Nextを押下

image.png
　
11. HTTPS接続するときのSSL/TLSライブラリを選択。「Use the OpenSSL library」を選択してNextを押下

image.png
　
12. ここは要注意。チェックアウト・コミット時の改行コードの選択。以下の表を参照して選択し、Nextを押下

選択肢 チェックアウト時 コミット時
Checkout Winsows-style,
commit Unix-style line endings		 LF -> CRLF CRLF -> LF
Checkout as-is,
commit Unix-style line endings		 変換しない CRLF -> LF
Checkout as-is,
commit as-is		 変換しない 変換しない

image.png
　
13. GitBashのターミナルを選択。特に理由が無ければデフォルトを選択してNextを押下

image.png

  1. git pullの振る舞いを選択。特に理由が無ければデフォルトを選択してNextを押下

image.png
　
15. 「Enable Git Credential Manager」を選択してNextを押下（https接続時に入力したパスワードを保持してくれる）

image.png

  1. 「Enable file system caching」を選択してNextを押下（ファイルシステムのキャッシュを利用する）

image.png

  1. 「Enable experimental support for pseudo consoles」のチェックをしない（バグがある模様）。Installを押下

image.png
　
18. Finishを押下して完了（リリースノートが表示されるが、どうでもよい）

image.png

Visual Studio Codeのインストール

  1. ダウンロードページへ移動（https://code.visualstudio.com/download）
  2. WindowsのInstallerをクリックしてインストーラをダウンロード

キャプチャ.PNG
　
3. インストーラをクリックしてインストール開始

image.png
　
4. 使用許諾契約書の同意。「同意する」を選択して次へを押下

image.png
　
5. インストール先の選択。デフォルトのままで次へを押下

image.png
　
6. スタートメニューフォルダーの指定。デフォルトのままで次へを押下

image.png
　
7. 追加タスクの選択。特に理由が無ければデフォルトで次へを押下

image.png
　
8. インストール先などを確認して、インストールを押下

image.png
　
9. 完了を押下してインストール完了（Visual Studio Codeが自動的に実行される）

image.png

Visual Studio Codeの拡張機能

  1. Visual Studio Codeを起動して「Ctrl」+「Shift」+「X」を押下して拡張機能を選択
  2. 検索ボックスで検索して、以下の拡張機能をインストールする
  • Japanese Language Pack for Visual Studio Code：日本語化の拡張機能
  • Remote-Containers：Dockerコンテナ内開発ができる拡張機能

image.png

7
3
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
Sign upLogin
7
3