WSLのUbuntu初期作業テンプレ

Microsoftが提供するWindows Subsystem for LinuxことWSLは、Windows上で簡単にLinuxの環境を構築できるサービスです。

WSLの環境は、いわゆる仮想マシンのようにネイティブなLinux OSがWindows上でまるっと動いている訳ではなく、OSの根っこはWindowsで、そこにLinuxのシステムコールとWindowsを橋渡しするプログラムが動いていて (ここがWSLの本体ともいえる)、その上にWSL用のUbuntuなどLinuxディストリビューションをインストールして動かしているイメージです。
そのため、OSの低レイヤ部分に依存するような事はできませんが、普通にアプリを起動したりLinuxならではの豊富な開発ツールを利用することはできます。最近ではsystemdに対応したりGUIアプリが動くようになったりして、より使いやすくなってきました。

ここでは、Vue.jsでフロントエンドを開発するにあたり、WSLのUbuntuをインストールした後にやる事をまとめました。

Ubuntuの最新化と初期設定
必用なツールのインストール

Ubuntuの最新化と初期設定

なにはともあれ、Ubuntuを最新化して最低限の初期化を行います。
まずは最新化。

$ sudo apt update && sudo apt upgrade -y

地域を日本にして日本語を設定。

$ sudo apt install -y language-pack-ja
$ sudo update-locale LANG=ja_JP.UTF8
$ exit

一度Ubuntuを再起動します。ここはWindowsのコマンドプロンプトで行います。
wsl --terminate でUbuntuを停止しますが、その後自動的に起動します。

> wsl --terminate Ubuntu

必用なツールのインストール

ここから再度WSLのターミナルに入って、必要なツールを入れていきます。必要かどうかは人それぞれだと思いますので、不要なかたはスキップしてください。

Python 3と最低限のツールをインストールして、python と打ったらPython 3が動くようにします。

$ sudo apt install -y python3 python3-pip python3-venv python-is-python3

Node.jsをインストールします。
OS標準のリポジトリからインストールすると古かったりするので、まずはNode.jsのリポジトリを公式サイトから取り込みます。そのリポジトリを使ってaptコマンドで nodejs をインストールします。

$ curl -fsSL https://deb.nodesource.com/setup_16.x | sudo bash -
$ sudo apt update && sudo apt install -y nodejs
$ sudo npm install -g npm@latest

WEBフロントエンドのフレームワークであるVue.jsをインストールします。
ビルドツールはViteを利用し、UIデザインにVuetifyを使うようにします。

$ sudo npm install -g @vue/cli
$ npm init vite@latest <プロジェクト名>
$ cd <プロジェクト名>
$ npm install
$ vue add vuetify