Zenn
🐻

余ったWindowsPCをUbuntu 20.04.2 LTSで開発用PCとして生まれ変わらせる[VSCode×Docker]

2021/07/07に公開
Docker
Linux
VS Code
Ubuntu
gnome
tech

はじめに

  • 開発環境をDockerで構築して作業を行うことになった
  • MacよりもUbuntuの方がDocker早く動くよ？という誘惑
  • 偶然にも自宅で余らせていたWindowsPCがある

これらの条件が重なり、Ubuntu環境構築することに。
WindowsOSだともっさりしすぎていて使い物にならないので、生き返らせてあげたい...！

ちなみに2018年に更新された下記記事を参考にしながらインストールしてみたので、近しい内容ですが2021年時点で動く情報、Noumiの好みの設定をお届けします。
WindowsにUbuntuをインストールするのは気持ち良いゾイ!!~導入編~

今回の開発用PCの要件

  • Dockerが快適に動くこと
  • VSCodeで開発できること

利用技術・ツール

  • OS: Ubuntu 20.04.2 LTS
  • OSインストール: Rufus
  • IDE: VSCode
  • ブラウザ: Chrome
  • デスクトップ: GNOME
  • Firewall: GUWF

完成画面

※作業はWindowsのパソコンを利用します。ソフトもWindowsのものを利用しているので、他のOSで作業する場合は各自該当するものを探して利用してください。

Ubuntuインストール用USBフラッシュドライブの用意

Ubuntuのisoイメージのダウンロード

下記よりisoイメージをダウンロードします。
僕は安定版のLTS(Long Term Support)を選んでダウンロードしました。
Ubuntu Desktop 日本語 Remixのダウンロード

isoイメージを起動するUSBドライブ(ライブUSB)を作成する

下記から起動用USBドライブ作成ソフトをダウンロードします。
Rufus 起動可能なUSBドライブを簡単に作成できます

ダウンロードしたexeファイルを起動します。
USBフラッシュドライブ（USBメモリなど）をパソコンに指して、それをドライブプロパティの「デバイス」に指定します。

ブートの種類には右側の「選択」ボタンから先程ダウンロードしたisoイメージを選択します。

最後に一番下の「スタート」ボタンを押して、書き込みを開始します。

Ubuntuをインストールする

BIOSあるいはUEFIの設定画面を開く

書き込みが完了したら、UbuntuをインストールするPCを電源が入っていない状態で用意します。
UbuntuをインストールするPCでBIOSあるいはUEFIの設定画面を開きます。

マザーボードごとにキーが違うらしいので、電源入れた直後自分の環境にあったキーを押してBIOS画面を開いてください。

1. 「Del」キー　ASUS
2. 「F2 」キー　Intel
3. 「Del」キー　Giga-byte
4. 「Del」キー　ESC
5. 「F2 」キー　ASROCK
6. 「Del」キー　MSI

※F7、F10、F11などのパターンもあるみたいです。

BIOS画面になったらUSBデバイスから起動する指示をする必要があります。
操作は矢印キーで移動、決定はEnter、キャンセルはEsc

直接起動デバイスを選択できるものはそのままUSBデバイスを選んで起動してください。
そうでない場合は、Bootタブを選択します。そこでUSB起動の選択肢があればそれを選んでください。
それも見つからない場合は、Bootの優先順位を変更する項目があるので、そちらを変更で行けるはずですｂ

Ubuntuインストール設定

一度画面が暗転しますが、Install Ubuntuの選択肢が出てくるのでそれを選択し、そのまま好きな設定で進めます。
途中で出てくる「アップデートと他のソフトウェア」は「通常のインストール」がおすすめです。

その他のオプションに関しても特殊な使い方をしない限り、下記をチェックする設定が一番ラクかと思います。

  • Ubuntuのインストール中にアップデートをダウンロードする
  • グラフィックスとWi-Fiハードウェアと追加のメディアフォーマットのサードパーティ製ソフトウェアをインストールする

設定項目の参考はこちら。https://linuxfan.info/ubuntu-20-04-install-guide

インストールが完了し再起動を促されたら、Ubuntuインストール用のUSBを抜いて再起動を行ってください。
再起動後は登録したユーザ名/パスワードでログインできます。簡単！
その後の設定は後でアプリを開いて設定できるのでスルーしても大丈夫です。

Ubuntuを使う前に抑えて置きたい設定・更新

パッケージ管理システムAPTの更新

APT (Advanced Packaging Tool、あるいは Advanced Package Tool)の状態を最新に更新します。
セキュリティ観点からも出来る限り最新にしておくことが望ましいはず。下記コマンドを実施してください。

sudo apt update
sudo apt upgrade

Firewallの設定

uwfをCUIで設定しても良いのですが、せっかくGUIなので「Firewall Configuration」を使います。
Ubuntuソフトウェアで「guwf」で検索すると一番上に出てきます。

使うツールややりたいことによって設定を変更すると思いますが、基本は下記設定にしておきます

  • ステータス:オン
  • 受信：Deny
  • 送信：Allow

参考:ファイアーウォールの設定をする - Ubuntu 20.04編

開発環境準備

Gitインストール

sudo apt install git
git --version

最低限の設定もしておく

git config --global user.name 名前 　
git config --global user.email メールアドレス
git config --list

SSHキー作成

せっかくなのでrsaより強固と言われているEd25519を使ってみます。

$ ssh-keygen -t ed25519 #SSHキー作成
Generating public/private ed25519 key pair.
Enter file in which to save the key (/Users/[ユーザ名]/.ssh/[SSHキー名]):  #作成される場所と名前。問題なければEnter。
Enter passphrase (empty for no passphrase):  #パスフレーズの入力。
Enter same passphrase again:  #パスフレーズの再入力。
$ ls ~/.ssh #SSHキーが作成されたことを確認

作成出来たらid_ed25519.pubの中身をすべてコピーして、GithubのSSH keysに登録しておきましょう。
https://github.com/settings/keys

VSCodeインストール

公式サイトから「.deb」ファイルをダウンロード
https://code.visualstudio.com/download

sudo apt install ./公式サイトからダウンロードしたファイル.deb
sudo apt install -y apt-transport-https
sudo apt update

Dockerインストール

インストール

sudo apt install docker docker-compose

バージョン確認

sudo docker --version #Dockerのバージョン確認
sudo docker-compose --version #docker-composeのバージョン確認

毎回sudoしなくて良いようにユーザグループ追加

sudo groupadd docker #Dockerを操作できるユーザグループ追加
sudo usermod -aG docker $USER #ユーザグループに現在ログインしているユーザを追加
# 再起動して適応してから再度確認

デスクトップ環境のカスタマイズ[準備]

あとは使ってて快適なカスタマイズをしたら開発用PC完成です。
今回はGNOMEというデスクトップ環境システムを利用します。
GNOMEを拡張するGNOME Shellという仕組みを使うのですが、Chrome拡張機能からインストールする必要があるので、まずはChromeをインストールしたいと思います。

Chromeインストール

コマンドでインストールすることも出来るのですが、既にインストールされているFirefoxブラウザがあるので、FirefoxでChromeを検索してダウンロードしてください。今回は「.deb」パッケージを選んでください。
Chromeダウンロードページ

あとはWindowsと同じノリでダウンロードフォルダからダウンロードしたdebパッケージを起動させてインストール出来ます。

GNOME Shellインストール

下記よりGNOME Shellをダウンロードします。 (current stable release)とついているものが安定です。
ダウンロード後、Chromeインストールと同じ用にダウンロードフォルダから起動してインストールします。
chrome-gnome-shell package in Ubuntu

GNOME Shell integrationインストール

次にChhrome拡張でGNOME Shellを利用する為にGNOME Shell integrationをインストールします。
下記よりChromeに追加してください。
GNOME Shell integration

User Themesのインストール

「GNOME Shell テーマ」を変更する為に必要となります。
下記よりインストールしてください。
https://extensions.gnome.org/extension/19/user-themes/

GNOME Tweaksインストール

唐突に出てきましたがこれはGNOMEのカスタマイズツールです。
デスクトップ環境の設定を変更できる便利なツールだったりします。
とりあえずコマンドを打ち込んでインストールしちゃいましょう。

sudo apt-get install gnome-tweaks

デスクトップ環境のカスタマイズ[設定]

まずはアプリケーション全体のテーマやフォント・アイコンの変更をします。
GNOME Tweaksを開いて設定を開始します。

「外観」の設定


Adwaitaは多分元から入っていたはず・・
アイコンテーマのPapirus-Darkは下記からダウンロードしてください。
アイコンテーマPapirusはマテリアルデザインベースのかわいいアイコンなのでおすすめです。
Papirusテーマ

インストール出来たら「papirus-icon-theme-master.zip」を解凍(最近は展開と言うらしい)してください。
解凍された「papirus-icon-theme-master」内にある「Papirus」フォルダを「/usr/share/icons/」フォルダにコピーします。

※別PCに同じ環境作る時にコマンドのほうが早かったのでコマンドが良いかも。
https://github.com/PapirusDevelopmentTeam/papirus-icon-theme
これで「外観」の設定は出来ると思うので画像を元に設定してみてください。

フォント設定


そんなにこだわってないのですが、フォントはここで変更できます。
基本はNotoSansを選んでます。時間あるときにフォントも選定したい。

拡張機能追加

さて、ついに楽しい拡張機能の時間です。参考までに僕の拡張機能一覧も載せておきました。
確認して雰囲気を感じながらGNOME Shell integrationを開きます。
https://extensions.gnome.org/

「拡張機能を検索...」とhintの入っているテキストボックスに入れたい拡張機能の名前を入れてバンバンインストールしちゃいましょう。

Noumiが入れている拡張機能

  • User Themes by fmuellner
  • Dash to Panel by charlesg99
  • Applications Menu by fmuellner
  • Places Status Indicator by fmuellner
  • Frippery Move Clock by rmyorston
  • Simple net speed by bijignome
  • SysPeek-GS by eugene-rom

簡単に説明するとこんな感じ。
欲しい物だけ参考にしてみてください。

User Themes：既に説明した通り「GNOME Shell テーマ」を変更する為に必要となります。
Dash to Panel：よく使うアプリを置いておくドックをカスタマイズできる。トップバーに統合タイプ。
Applications Menu：過去のWindowsみたいにトップバーから種類別のアプリ一覧を表示できる。
Places Status Indicator：Macのようにトップバーから特定フォルダを直接開ける
Frippery Move Clock：何故かステータスバーの中央にある時計を右に寄せる。
Simple net speed：ステータスバーでネット回線スピードがいつでも見れる。
SysPeek-GS by eugene-rom：ステータスバーでCPU使用率がいつでもみれる。

Dash to Panelの設定はこんな感じです。

初期は「Dash to Dock」を入れていたのでその設定も書いておきます。
今はWindows寄せデザインを採用していますが、Mac風にしたい方はこちらもおすすめです。


合わせて、トップバーの時計の表示はTweaksの「トップバー」から曜日・日時・秒を追加していたり、バッテリー残量も表示したりしています。

追記

Macではkarabinerでキーマップいじってたけど、UbuntuではシンプルなものならXmodmapでいけそう。
リモートデスクトップ時に案外重宝してる。
https://qiita.com/macinjoke/items/746c0c0adb74cfdeb9e7

開発用PC完成！

ということで、Dockerをいい感じに使うためのUbuntu環境が整いました！
デスクトップ環境などを好きにカスタマイズ出来たり、Windowsと違ってCUI環境も幸せなので、現時点最高です！

このあと、Chromeリモートアクセスを導入してどこでも開発PC使える環境を手に入れたのも快適だったので、ぜひ皆さんも試してみてください。
※リモートアクセスだとショートカットとか諸々つらい気持ちになりがちですが、全画面表示で結構解決するので全画面表示利用をデフォにするのがおすすめです。

また、今回は簡単にインストールしたかったので、「apt update」＆「apt upgrade」で自動更新出来ない仕組みを使いました。

そのため、「apt update」＆「apt upgrade」で最新に出来るようにしたい人は、パッケージリストに登録するスタイルが良いかと思うので、長期的に利用するときにはそちらも確認してみてください。

宣伝

ChatGPTと学ぶPython入門表紙

翔泳社さんより、ChatGPTに教えてもらいながら、Pythonを通して、プログラミングの基礎を学ぶことができる入門書を出版することになりました。

プログラミング初心者の方、誰かに教える機会がある方、是非購入して読んでみてください！
https://amzn.to/3FDS2H3

面白そうだから話聞いてみたいという人も是非気軽にお声がけください！職種問わずランチとか行きましょう！！DMお待ちしています。

Twitterフォローもよろしくです！

Discussion