Vagrant上のLubuntuでVSCode+Docker環境を作りたい~VSCode+Docker~

前回までの記事

• Lubuntu構築編
• Vagrant Box化

対象としている人

VisualStadio CodeのRemote-Containerを使いたいけど、Windows10 Homeな人。

経緯

Remote-Containerを使おうと思ったらDockerToolboxは対応していなかったし、
かといって、ProにしてもVirtualBoxが使えなくなるらしいので、じゃあ、もう開発用の環境作ろうかなと。

前提

• VirtualBoxが入っている
• Vagrantが入っている
• OSがWindows10である

Dockerを入れる

公式のインストール手順があるのでそれを参考に。

前回のVagrantを立ち上げ

Powershellで立ち上げ

# 適当なディレクトリ作成しておく
# Vagrantfile作成
> vagrant init lubuntu-19.04-x86_64

# 立ち上げ
> vagrant up

#  SSHで入っておく
> vagrant ssh
...
vagrant@vagrant-pc:~$

公式の通りに

# 注意：めっちゃ文字化けするけど、テキストにコピペするとちゃんと出るので、
# ビビらず行こう。気になるようなら、表示を英語にするとか。

# アップデートしておく
$ sudo apt-get update

# パッケージをインストールして、aptがHTTPS経由でリポジトリを使用できるように。
$ sudo apt-get install \
>     apt-transport-https \
>     ca-certificates \
>     curl \
>     gnupg-agent \
>     software-properties-common

# Dockerの公式GPG鍵を追加
$ curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
OK

# Ubuntuのコードネームを確認する
# Linux Mintだと公式?のものが出ないらしい
# その時は元になったUbuntuのものに変更する必要がある
$ lsb_release -cs
disco
# https://download.docker.com/linux/ubuntu/dists/
# ここにある名前ならOK。discoはちゃんとある。

# stable版を入れる
$ sudo add-apt-repository \
>    "deb [arch=amd64] https://download.docker.com/linux/ubuntu \
>    $(lsb_release -cs) \
>    stable"

# Dockerリポジトリを更新
$ sudo apt-get update

# インストール
$ sudo  apt-get install docker-ce docker-ce-cli containerd.io

# 起動確認
$  sudo docker run hello-world
Unable to find image 'hello-world:latest' locally
latest: Pulling from library/hello-world
1b930d010525: Pull complete
Digest: sha256:6540fc08ee6e6b7b63468dc3317e3303aae178cb8a45ed3123180328bcc1d20f
Status: Downloaded newer image for hello-world:latest

Hello from Docker!
This message shows that your installation appears to be working correctly.

To generate this message, Docker took the following steps:
 1. The Docker client contacted the Docker daemon.
 2. The Docker daemon pulled the "hello-world" image from the Docker Hub.
    (amd64)
 3. The Docker daemon created a new container from that image which runs the
    executable that produces the output you are currently reading.
 4. The Docker daemon streamed that output to the Docker client, which sent it
    to your terminal.

To try something more ambitious, you can run an Ubuntu container with:
 $ docker run -it ubuntu bash

Share images, automate workflows, and more with a free Docker ID:
 https://hub.docker.com/

For more examples and ideas, visit:
 https://docs.docker.com/get-started/

# そういえば勝手にService動いてるので、確認
$ sudo systemctl status docker
● docker.service - Docker Application Container Engine
   Loaded: loaded (/lib/systemd/system/docker.service; enabled; vendor preset: enabled)
   Active: active (running) since Sat 2019-08-10 22:22:10 JST; 2min 2s ago
     Docs: https://docs.docker.com
 Main PID: 3622 (dockerd)
    Tasks: 10
   Memory: 50.9M
   CGroup: /system.slice/docker.service
           └─3622 /usr/bin/dockerd -H fd:// --containerd=/run/containerd/containerd.sock

# enabledになってるので、OS立ち上げ時に自動起動までしてくれる
# ついでにDockerのバージョンも見ておく。
$ sudo docker -v
Docker version 19.03.1, build 74b1e89

怖いからスナップショットを撮る

スナップショットを撮るよ

$ exit

# とりあえず、docker-installで。この先まずったらこれに戻す。
> vagrant snapshot save docker-install

VSCodeを入れる

Visual Stadio Codeのインストール

VirtualBoxの仮想デスクトップからインストールしていく。

ダウンロードページへ行き、.deb(真ん中のやつ)を選んでダウンロードする。

ダウンロードされたパッケージをダブルクリックして、インストール

メインメニューから「アクセサリ>Visual Studio Code」があることを確認。

日本語化

Extensionsで検索窓に「Japanese」を入力。
「Japanese Language Pack for Visual...」をインストール

Remote-Containers

dockerグループにvagrant追加

vagrantユーザがDockerコマンドを使えるようにするために以下のコマンドでDockerグループに追加する

dockerグループにvagrant追加

$ sudo usermod -aG docker vagrant

追加後、一旦ログアウトしてから入りなおす（重要）

dockerコマンドがsudoなしで打てることを確認

$ docker ps
CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS               NAMES

Remote-Containersを入れる

Extensionsで検索窓に「remote container」を入力。
「Remote-Containers」をインストール

Sampleを試す

①のアイコンをクリックし、「Remote-Containers: Try a Sample...」を選択する

ここではGoを選択。
（勝手にgithubからコードが落ちてくると思ったらページに飛ばされてしまった。。）
仕方ないのでCloneしてくる

sampleを落とす

$ mkdir <なんか適当なディレクトリ>
$ cd $_
$ git clone https://github.com/microsoft/vscode-remote-try-go.git

落としてきた「vscode-remote-try-go」をVSCodeで開き、先ほどの①のアイコンをクリックし「Remote-Containers: Open Folder in Conatainer」を選択。
この時も「vscode-remote-try-go」を選択。

コンテナ落としてきたり、結構時間かかる

終わったら、F5キーでデバックモード起動。
http://localhost:9000でブラウザからアクセスすると、「Hello,」と表示されてるはず。

おしまい。

go環境がなくても動くし、必要なものがあればDockerfileに書けば反映される。
pythonのvirtualenv感覚で環境の作成が出来るのが良い。
(Goでも仮想環境とか作れるのかもしれないけど。。)