1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Windows10 HomeにDokerをベースとした開発環境を構築する 2020 ver. その2 VSCodeでDocker開発環境を快適にできるはず

Last updated at Posted at 2020-09-19

はじめに

前回はWindows10Homeにまともに動きそうなDockerを構築しました。今回は統合開発環境として十分に使えそうなVSCodeの設定を実施していきます。

快適な開発環境を定義してみる

その1 で書くべきだと反省していますが)
そもそもWindowsベースで快適じゃない開発がなぜ発生するか考えてみると、WindowsがLinuxやUnix(Mac)と同等に動かないことが一番の原因だと思いました。
改善ポイントと改善方法を考えてみました。

  1. ruby、python, MySQLなどの開発に必要なモジュールがまともに動かない(きがする)→ WSL2ベースのDockerならまともにうごく(はず)
  2. 開発に必要なモジュールのバージョン管理がもうカオス(こればMacでも一緒) → Docker適切な環境をコンテナとして用意。ただしその環境にすぐ切り替え可能なこと
  3. コマンドプロンプトやPowerShellなどのターミナルの操作が慣れない。bashがいい → Windowsで動くbash導入

1はDocker Desktopを導入しましたのであとは触ってみるだけですが一応解決とします。残りは2と3です。

開発に必要なモジュールのバージョン管理

コンテナ環境を用意するのはDockerに任せるとしまして、問題はその開発環境にすぐに切り替えられること。もっと言いますとコンテナの環境を開発環境として
まともに動かせるのか調査しました。VSCode の Remote Developmentがよさそうなので構築してみました。
「Visual Studio Code Remote Development allows you to use a container」
https://code.visualstudio.com/docs/remote/remote-overview

VSCode & Remote Containers

VSCodeをインストールします。
https://azure.microsoft.com/ja-jp/products/visual-studio-code/

拡張機能のRemote Containersをインストールします
https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers
image.png

そうするとVSCodeの左下に緑色の新しいステータスバーが追加されました。クリックしてみるとRemote Containersのコマンドが出てきます。
image.png

今のところ開発環境はありませんのでPythonのSample開発環境を導入してみます。
Remote-Containers: Try a Sample... を選択し、その中のPythonをクリックします
image.png
コンテナがインストールされ始めました。
image.png

これでサンプルのPython開発環境の準備ができました。ものの数分でできてしまいました。快適です。
image.png

Docker Desktopの画面でも新しいコンテナが認識されています。
image.png

VSCodeにもどってF5キーを押しすと、サンプルのFlaskを使ったWebアプリケーションが立ち上がります。Running on の後に続くURLにマウスフォーカスし、Follow Linkをクリックします。
image.png

Webブラウザが立ち上がり以下のような画面がみえたら成功です。
image.png

最後に開発ができること≒コードの編集をVSCode上で実施してみます。
index.htmlを開いて日本語の「もちろんできるよ!」を追記し保存します。
image.png

Webブラウザをリロードすると・・・
image.png

意図通りのコードが反映されました。あとはgitですがWindowsにはまだ導入していませんが、コンテナには導入されているのでVSCodeから実行できます。しかしコンテナ側でのgitの設定は必要になります。今後もコンテナ側のgitの設定は都度実施するのは快適ではありません。VSCode RemoteContainersではローカル側のgitの情報をシェアすることが可能となっています。ローカルにgitをインストールしておきましょう。

Git for Windows のインストール

インストーラーを公式サイトからダウンロードします。
https://git-scm.com/download/win

基本的にウィザードに従っていけば問題ありませんが、いくつか変更を考えた方がよい部部分があります。

デフォルトエディターの選択でVSCodeにしておく

(Vimでもよいと思います))
image.png

改行コードの変換は「Checkout as-is, commit Unix-style line ending」にしておく

開発環境がWindows、実行環境がLinuxの場合はこれにしておくことを推奨します。
(Checkout Windows-styleですとチェックアウトの時に改行コードをCRLFに変更します。
以前のnotepadなどWindowsの改行コードのみ対応しているエディターを利用する場合はこちらを選びますが、そのような人は今はほとんどいないと思っています)

インストールが終わったらGit Bashを立ち上げて以下のコマンドでuser.nameとuser.emailを設定します

> git config --global user.name "TakaK"
> git config --global user.email "sample@sample.sample"

gitの設定はとりあえずこれでOKです。

既存のコンテナへgitの設定を反映させる

コンテナのビルド時にgitの設定が自動でコピーされ反映されますので、既存のコンテナに反映させるにはReBuildする必要があります。

image.png

あとは通常のgitコマンドもしくはVSCode上のgitUIでもお好きなほうで作業OKです。

今後はリモートレポジトリの設定なども必要ですがローカルでコンテナを使った開発自体は以上でできると思います。

1
0
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
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?