windows10上のvirtual boxにUbuntu 20.04をインストールし、dockerを使った開発環境を構築する


環境構築って苦戦しますよね。
苦戦したときには、検索して対処方法を調べると思います。
様々な記事にお世話になっているので、自分も環境構築のメモを残して、
参考になる情報を残しておこうと思います。

今までUbuntu18.04を利用していましたが、
Ubuntu20.04も半年前くらいにリリースされてますので、移行しようと思います。
今回はローカルをできる限り汚さない、vscodeのremote-containerを使ったdocker開発環境を試してみます。
使いにくかったら変えればいいのです。dockerを手になじませたい。

## 構築内容、ゴール

vscode上からdockerコンテナにアクセスし、webサーバを立て、アクセスできれば完了です。
windows 10上で行います。virtual boxは事前に準備ください。

以下のインストール手順は紹介していきます。

- Ubuntu20.04
- docker
- chrome
- vscode

## 手順

以下の順で説明します。

- Ubuntu20.04　インストール
- docker インストール
- chrome インストール
- vscode インストール

### Ubuntu 20.04 インストール

この記事をみましょう！！（初手丸投げ）　→　[Windows10上のVirtualBoxにUbuntu20.04をインストール](https://qiita.com/HirMtsd/items/225c20b77a7cd5194834)
図付きのインストール手順が紹介されています。
仕事レベルのクオリティなんですが。。 ~~（手順書でつかいたい）~~LGTMが足りないのでは？？

上記記事以外で行ったことを紹介します。

#### コピー＆ペースト

virtual boxの「デバイス」→「クリップボードの共有」「ドラック＆ドロップ」を双方向にします。なにかと捗ります。
「デバイス」から共有フォルダの設定も可能です。

#### ディレクトリ名英語化

端末で「ダウンロード」とか「デスクトップ」とか日本語まざってるとストレスですよね。
打ちたくないので変更します。
以下のコマンドを実行すると、変更しますか？とポップアップ出てくるので快諾しましょう。

```bash
LANG=C xdg-user-dirs-gtk-update
```

### dockerインストール

前は公式に従って、docker-ceを入れてました。 公式URL：[https://docs.docker.com/engine/install/debian/](https://docs.docker.com/engine/install/debian/)

今回はdocker.ioというubuntuさんがメンテしてるパッケージを使ってみました。
コマンドが少ないのでとても嬉しい。

```bash
sudo apt install docker.io
sudo gpasswd ${USER} docker # dockerコマンドをsudoつけずに実行できる
su ${USER} # group情報を更新。自分はrebootで再起動しちゃいました
```

### chrome インストール

公式HPからダウンロードして、インストール。
ファイルを落とさないでインストールできそうな画面が出ますが、
ubuntu softwareに怒られてできません。

公式URL
[https://www.google.com/intl/ja_jp/chrome/](https://www.google.com/intl/ja_jp/chrome/)

参考　URL
[【図解で理解】Ubuntu Desktop 20.04 LTSへのGoogle Chromeインストール手順](https://inab818.site/linux/ubuntu-20-04-lts-google-chrome-download-install/)

### vscode インストール

公式HPからダウンロードして、インストール。
こちらもファイルを落とさないでインストールできそうな画面が出ますが、
ubuntu softwareに怒られてできません。
VScodeってクラウド版あるんですね。

公式URL
[https://azure.microsoft.com/ja-jp/products/visual-studio-code/](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)

#### vscodeプラグイン

プラグインボタンから検索していれました。
とりあえずすぐ使うものだけ。。

- remote container
- python
- docker
- (japanese language pack for visual studio code)

git関連とhtml関連のプラグインは今後入れると思います。。

### 開発環境

気になっていたremote-containerを使ったコンテナ開発を試みてみます。
2019年6月くらいに追加された機能ですね。一年以上前。。
といっても公式tutorialを実践するだけです。
自分はpythonのものを使用しましたが、いろいろな言語のチュートリアルがあります。

公式URL [https://github.com/microsoft/vscode-remote-try-python#things-to-try](https://github.com/microsoft/vscode-remote-try-python#things-to-try)

#### 手順

1. リポジトリをクローンする。　`git clone https://github.com/microsoft/vscode-remote-try-python.git `
2. F1 キーかctrl + shift + p キーを押す。`Remote-Containers: Open Folder in Container...` コマンドを選択。
3. クローンしたフォルダを選択してしばらくするとコンテナが作成される。端末を開くとコンテナ内に。
4. `python -m flask run --port 9000 --no-debugger --no-reload`を実行。
5. google chromeで`localhost:9000`を指定しhtml確認。

とりあえず実行完了。チュートリアルを実行する際は続きはgithubのREADME.mdをご参考ください。。

## おわりに

インストール、全然つまづきませんでした。
最近のアウトプット文化のおかげで沢山記事はありますが、目的の記事は見つけにくかったり埋もれてたりします。
この記事でよりわかりやすい優良記事を紹介できたかなと思います。

docker開発環境はいい感じですね。vscodeってなんで無料なんでしょうか。。
ただ頻繁に使うものはローカルで環境欲しいなーとおもったり←
venv切り替えたりとかの手間がなかったりするのもメリットでしょうか。
初回立ち上げは少し時間かかりますが、次回以降は使いまわしてくれます。
docker-composeやgithub連携も試してみないとですね。。
imagesにalpineさんいたけどpythonのコンテナはdebianでした。alpineなにしてるん？


ご参考になれば幸いです。
ありがとうございました。