パンジェンシーの「汗だく開発日誌」

システム開発の備忘録です。

【WSL2】Dockerを導入する

Ubuntu Docker WSL2 Windows

パンジェンシー「東の森でシステムエンジニアをしております、パンジェンシーと申します。 最近のシステム開発関係は、開発を効率化するツールやフレームワークが溢れていますね。 エンジニアも、『〇〇言語使える？』じゃなく、『◇◇ってツール使ったことある？』のほうがよく聞かれる気がします。 」

Dockerってなに？

f:id:x-fieldatts:20200731111231p:plain

コンテナとは、「仮想化」という技術の一種です。仮想化といえば、VirtualBoxなどのツールを使ってホストOS上にゲストOSを構築する「仮想マシン（VM）」という技術ですよね。対して、コンテナは１個のアプリを動かす環境（ライブラリー、ディレクトリー構成、ネットワークなど）を構築する技術で、OSの機能はホストOSのものをそのまま使います。

コンテナを使う場合、VMに比べてサイズが小さくできるため導入や起動が速く・軽いです。動かなくなった時に環境をリセットしたい場合のストレスも少なくなる気がします。また、作成したコンテナのイメージをチームで共有することも簡単にできます。

このコンテナの技術を実現するツールが「Docker」です！なんか、使ってみたくなりましたよね？前置きが長くなりましたが、導入してみましょう！

「私の理解では、ホストOSを土地に例えると、仮想マシン＝マンション（風呂、トイレ、キッチンなどは部屋ごと）、コンテナ＝寮（風呂、トイレ、キッチンなどは共用）というイメージでしょうか…？」

1. Dockerの導入

前回のエントリー⇧で構築したWSL2の環境にDockerを導入してみようと思います！

Install Docker Engine on Ubuntu | Docker Documentation

⇧の公式ドキュメントを参考に、Dockerのリポジトリからaptを使ってインストールします。

OSは、Ubuntu 20.04 LTS、アーキテクチャはx86_64です。

リポジトリの追加

WSLののターミナルを開き、以下のコードを打ち込んでいきます。

// パッケージ一覧の更新
$ sudo apt-get update

// 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 -

// キーを検索
$ sudo apt-key fingerprint 0EBFCD88

// 以下のように表示されていればOK（？）
pub   rsa4096 2017-02-22 [SCEA]
      9DC8 5822 9FC7 DD38 854A  E2D8 8D81 803C 0EBF CD88
uid           [  不明  ] Docker Release (CE deb) <docker@docker.com>
sub   rsa4096 2017-02-22 [S]

// 安定版のAMD64アーキテクチャ用のリポジトリを追加
$ sudo add-apt-repository \
    "deb [arch=amd64] https://download.docker.com/linux/ubuntu \
    $(lsb_release -cs) \
    stable"

インストール

リポジトリを追加したので、一覧を更新してインストールしましょう。

$ sudo apt-get update
$ sudo apt-get install docker-ce docker-ce-cli containerd.io

「ここで、GRUBのインストールをする画面が出てきましたが、特に何も選択せずにOKを押しても問題ありませんでした。」

動作確認

インストールが完了したら、動作確認してみましょう。

// Dockerデーモンを起動
$ sudo service docker start

// `hello-world`イメージをリポジトリからダウンロードし、コンテナを起動
$ sudo docker run hello-world
Unable to find image 'hello-world:latest' locally
latest: Pulling from library/hello-world
0e03bdcc26d7: Pull complete
Digest: sha256:d58e752213a51785838f9eed2b7a498ffa1cb3aa7f946dda11af39286c3db9a9
Status: Downloaded newer image for hello-world:latest

…

⇧のようなメッセージが表示されればOKです！

「ちなみに、システムの裏で常駐してるプログラムを、Linuxでは『デーモン』、Windowsでは『サービス』と呼びます。~~~dみたいな名のプログラムはだいたいデーモンです。」 

// コンテナの状態を確認
$ sudo docker ps -a
CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS                     PORTS               NAMES
78a2e818219e        hello-world         "/hello"            2 seconds ago       Exited (0) 2 seconds ago                       angry_curran

⇧２秒前にコンテナが作られて、２秒前に終了したようですね。hello-worldコンテナは、メッセージを出力して終了するだけのコンテナらしいので、これで動作的にはあっています。

// ダウンロード済みのイメージ一覧を確認
$ sudo docker images
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
hello-world         latest              bf756fb1ae65        6 months ago        13.3kB

hello-worldのイメージがあります。

「Dockerイメージは『設計図』、Dockerコンテナは設計図を基に作った実際の『もの』と考えるとイメージしやすいと思います。」

追加の設定

ここまでの設定だと、sudoしないとdockerコマンドが使えません。sudoなしでも使えるように、ユーザーにdockerグループを追加しておきましょう。

$ sudo usermod -aG docker $USER

// 一度ターミナルを終了して、再度立ち上げ、sudoなしでもコンテナが起動できるか確認
$ docker run hello-world

「WSL起動時にDockerデーモンを自動起動するように設定できればよかったのですが、その時に使うsystemctlというコマンドがWSL2では使えない状態のようです。systemctlを使えるようにする方法はあるようですが今回はやめておきます。 」

nginxを動かしてみる

hello-worldだけだと動かした気がしないので、WEBサーバーを動かしてみましょう。

// NginxのDockerイメージをダウンロード
$ docker pull nginx
$ docker images
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
nginx               latest              0901fa9da894        3 days ago          132MB

「docker pullは、コンテナの起動はせずにイメージのダウンロードだけ行います。」 

// Nginxのコンテナを起動
$ docker run -d --name web-server -p 8080:80 nginx
// -d：バックグラウンドで実行させるオプション
// --name：コンテナに名前をつける
// -p：ポートフォワード設定（[ホストOS側のポート]:[コンテナ側のポート]）

localhost:8080にアクセスしてみましょう。ブラウザはWindowsでも、WSLでもOKです。

f:id:x-fieldatts:20200714191302p:plain

⇧こんな感じの表示が出ればOKです！

後は⇩のコマンドなどを一通り触って雰囲気を掴んでおくと、応用編の場合でもイメージしやすいと思います。

// コンテナの終了
$ docker stop web-server

// コンテナの開始
$ docker start web-server

// コンテナの削除
$ docker rm web-server

// イメージの削除
$ docker rmi nginx

まとめ

今回は、Dockerとは何か？というところから始まり、WSL2環境への導入に挑戦しました。

まだまだ基本中の基本しかできていませんが、少しずつ覚えていけば、いずれは使いこなせることでしょう（多分）。

「今回の報告は以上です！ではまた！」

【WSL2】VSCode+Chrome+vcXsrvでWEB開発環境を構築

WSL2 Windows Ubuntu

パンジェンシー『東の森でシステムエンジニアをしております、パンジェンシーと申します。 最近、テレワークなど、自宅でお仕事することが多くなりましたが、暑くてエアコンをガンガン入れているので電気代が怖いです…。 』

WEB開発の環境を作ってみよう！

f:id:x-fieldatts:20200731111414p:plain

前回のエントリーで、Windows 10にWSL2を導入しました。

今回は、実際にプログラミングなどの作業をしていくためのツールの導入していこうと思います！

『実際の開発ではもっと色々必要かと思いますが、今回は必要最低限のものに絞って入れていきます。』

1. VSCodeの導入（Windows側）

VSCode（Visual Studio Code）は、Microsoftが開発している無料のコードエディターです。動作が軽く、拡張機能もたくさん用意されており、WSL2への接続も簡単にできます。

コチラからインストーラーをダウンロードしてインストールしましょう。 インストール後、VSCode起動時にWSLを導入済みであれば、拡張機能Remote - WSLをインストールするよう促されると思いますので、インストールしましょう。

これで、WSL内のファイルやフォルダーに簡単にアクセスできます！

↓のように、画面左のアイコンをクリックして、アクセスしたいWSLを選んで右クリックし、「connect to WSL」を選択するだけです。

f:id:x-fieldatts:20200709184538p:plain

新しいVSCodeのウィンドウが立ち上がるので、適当にフォルダーを開いてみましょう。VSCode内のエクスプローラーから、ファイルの一覧、追加、編集などもできるので、とても分かりやすいですね。

『普段使いのテキストエディタとしても非常に使いやすいデス！オススメの拡張機能などもそのうち書こうと思います。』

2. Chromeの導入（WSL側）

エンジニアでChromeを知らない人は多分いないと思いますが、Chrome（Google Chrome）は、Googleが開発しているWEBブラウザです。世界で一番使われているブラウザらしいです。また、「F12」を押すと起動するデベロッパーツールは、フロントエンド開発にとても便利です。

WSL2のターミナルまたはVSCodeのターミナルを使ってインストールしてみましょう。VSCodeのターミナルを使う場合は、メニューバーの「ターミナル」から、「新しいターミナル」を選択して、ターミナルを開きましょう（今、ターミナルって何回言ったかしら…）。

以下のコマンドを順番に実行しましょう。

// GDebiとWgetのインストール
$ sudo apt install gdebi-core wget

// WgetでChromeのdebパッケージをダウンロード
$ wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb

// GDebiでdebパッケージをインストール
$ sudo gdebi google-chrome-stable_current_amd64.deb

『無事Chromeはインストールされましたか？早速起動したいところですが、WSLはデスクトップ環境を持ってないので、このままではWSL上でChromeを実行しても何も表示されません！そこでvcXsrvを使いましょう！』

参考ページ

How to install Google Chrome web browser on Ubuntu 20.04 Focal Fossa - LinuxConfig.org

3. vcXsrvの導入（Windows側）

vcXsrvは、画面の描画をしてくれるXサーバという部類のソフトウェアです。WSL側で実行したソフト（Chromeなど）のGUIをWindows側のXサーバに送って描画してもらうことで、あたかもWindows側で実行したソフトのように使えます。

vcXsrvのインストールと起動

上記サイトからインストーラーをダウンロードしてインストールし、vcXsrvを起動しましょう。

設定画面が開かれるので、以下の２点だけ変更して「完了」まで進みましょう。

  • Display numberを"0"に変更
  • Disable access controlにチェックを入れる

これで、vcXsrvが起動しました。タスクバーのアイコンのところに「X」のマークが増えていればOKです。

『ちなみに、今のままだとWindowsを起動するたびにvcXsrvを手動で起動しないといけません。』

『上記設定の最後にSave configurationで設定ファイルを出力し、Windowsのスタートアップフォルダに置いておけば、Windows起動時に自動でvcXsrvを起動させることができます。』

『スタートアップフォルダへは、「Windows + R」を押し、shell:startupと入力すればアクセスできます。』

WSL側の設定を行う

VSCodeから操作しましょう。

メニューバーから、「ファイル」ー「ファイルを開く」を選択し、.profileを開きます（/home/[ユーザー名]/の直下にあるはず）。

ファイルの末尾に以下の行を追加します。

export DISPLAY=`ip route | grep 'default via' | grep -Eo '[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}'`:0.0

『環境変数DISPLAYには、WSL→WindowsへアクセスするためのIPアドレスを入力すればいいのですが、現在のWSLの仕様ではこのアドレスはWindows再起動のたびに変わるらしく、⇧のようにスクリプトを使って取り出しています。ちとややこしいですね。』

.profileを編集して保存したら、新しいターミナルを開き（もしくは、既に開いているターミナルでsource ~/.profileを実行し）、Chromeを実行してみましょう。

$ google-chrome-stable

Chromeのウインドウが表示されればOKです！

参考ページ

WSL2側からWindows側のIPアドレスを調べる方法 - Qiita

4. 日本語対応

しかし、今の状態だとChromeの画面が英語のままです。表示を日本語にしましょう。

// 日本語言語パックをインストール
$ sudo apt -y install language-pack-ja

// ロケールを日本語に変更
$ sudo update-locale LANG=ja_JP.UTF8

// Takaoフォントのインストール
$ sudo apt install fonts-takao

次に、日本語入力ができるようにしましょう。

$ sudo apt install fcitx-mozc dbus-x11

VSCodeから、.profileを開き、以下の行を追加します。

export GTK_IM_MODULE=fcitx
export QT_IM_MODULE=fcitx
export XMODIFIERS="@im=fcitx"
export DefaultIMModule=fcitx

if [ $SHLVL = 1 ] ; then
  xset -r 49  > /dev/null 2>&1
  fcitx-autostart > /dev/null 2>&1
fi

ターミナルを閉じて、再度開いてからChromeを起動してみましょう。表示が日本語になり、日本語入力ができるようになっていればOKです。

参考ページ

まとめ

今回は、WEB開発に必須のツールを導入してみました。

仮想環境が入ってくると途端に話がややこしくなりますね…。とりあえず動かしてみて、分からないところはググって詳細を調べてみるなどして、少しずつ理解していければいいなぁと思います。

『今回の報告は以上です！ではまた！』

【WSL2】Windows 10にWSL2を導入する

Windows Ubuntu WSL2

パンジェンシー『東の森でシステムエンジニアをしております、パンジェンシーと申します。 それにしても、ITの進化のスピードは凄まじいデスね。 どんどん新しいプラットフォームやフレームワークが出てきて、ついていくのがやっとです（ついていけているとはいっていない）。 流行りのものをちょっとずつ取り入れて、触りながら覚えていこうと思います！』

WSL2で手軽にLinux開発環境を手に入れよう！

f:id:x-fieldatts:20200722141047p:plain

数ヶ月前、 Windows Insider Programに登録してWSL2の導入を試みましたが、何故かゲストOSからインターネットに接続できず、小一時間格闘しましたが上手く行かず放置しておりました…。

『ふむふむ。DNSの設定が？勝手に変更されるから？設定ファイルを？ゴニョゴニョしないといけな…。』

『・・・・・・・・・・・・・・・・・・・・・・・。』

『そういうんじゃないんじゃあああ！もっとワンタッチでお手軽に環境が作りたいんじゃあああ！！うわああああああああああああ！！！』

今回、Windows 10のバージョン2004から正式リリースされたということで、Microsoftさんのインストール ガイドを参考にもう一度挑戦してみます（冷静）。

1. Windows Updateを行う

まず、Windows Updateを行い、最新の更新を導入しましょう。

『「Windows」キー（Windows ロゴ キー）を押し、updateと入力すると、「更新プログラムの確認」にすぐアクセスできますよ！』

更新が終わったら、バージョンを確認しましょう。

「Windows + R」と押し、winverと入力して実行します。

f:id:x-fieldatts:20200708184821p:plain

バージョン 2004、ビルド 19041 以上になっていればOKです！

2. Windowsの機能を有効化する

WSL2を利用するためには、２つのオプション機能を有効化する必要があります。

とりあえず、下の手順の通りにやってみましょう。

「Windows」を押す -> "機能"と入力 -> "Windows の機能の有効化または無効化"をクリック

以下の２つにチェックを入れます。

f:id:x-fieldatts:20200708163658p:plain

OSの再起動を促されるので、促されるままに再起動します。

3. WSL2を既定のバージョンとして設定する

Windows PowerShell（管理者）を開き、下記のコマンドを入力しましょう。

PS> wsl --set-default-version 2
WSL 2 との主な違いについては、https://aka.ms/wsl2 を参照してください

上記のメッセージが出ればOKです。

ここで、以下のようなメッセージが表示される場合があります。

WSL 2 を実行するには、カーネル コンポーネントの更新が必要です。
詳細については https://aka.ms/wsl2kernel を参照してください

上記のURLからアクセスしたページの指示に従って、お使いのマシン用のLinuxカーネルをインストールし、もう一度コマンドを実行しましょう。

4. Linuxディストリビューションをインストールする

今回は、Ubuntu 20.04 LTS（←をクリック）をインストールします。

インストールが終わったら「起動」をクリックしましょう。ターミナルが立ち上がり、UNIXユーザーを作成するように指示されるので、ユーザー名とパスワードを入力します。

完了したら、ターミナルを閉じます。

5. 動作確認

Windows PowerShellで以下のコマンドを打ち込み、Ubuntuがインストールされていることを確認してみましょう。

PS> wsl -l
Linux 用 Windows サブシステム ディストリビューション:
Ubuntu-20.04 (既定)

PS> wsl --list --verbose
  NAME            STATE           VERSION
* Ubuntu-20.04    Running         2

今後は、スタートメニューからUbuntu 20.04 LTSを開けば、コマンドプロンプトが立ち上がり一瞬でLinuxにアクセス出来ます！

まとめ

自宅での学習にも大変便利なので、これからプログラミングを学びたいという方もWSL2を導入してみてはいかがでしょうか！

また、WSL2を使う際は、最近話題の「Windows Terminal」を使ってみてもいいかもしれません。コマンドプロント、Windows PowerShell、WSLの各ターミナルをタブで管理できたり、タブを縦横に分割できたり、見た目を自由にカスタマイズできたりと高機能で使いやすそうです！

『今回の報告は以上です！ではまた！』