VirtualBox Ubuntu22.04の環境構築

# 概要
VirtualBoxでUbuntu22.04の開発環境を構築する手順の備忘録
フルリモートになって以来環境作り直したりその手順教えたりする機会が急増したのでメモっておく

# 導入するもの
- Node.js
- Docker
- AWS CLI
- VSCode

# 手順
## Ubuntuの起動
まずは必要なものをダウンロード
[VirtualBox](https://www.virtualbox.org/wiki/Downloads)
[Ubuntu22.04のISO](https://jp.ubuntu.com/download)

VirtualBoxを起動し`新規`をクリック
![スクリーンショット 2022-11-06 121221.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2840455/3e7aae0f-afd3-70a0-d888-f6829319da7d.png)
適当にポチポチして完了
![スクリーンショット 2022-11-06 121454.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2840455/736a3ead-c2ba-ff0c-dd7e-f94c9469fd45.png)
![スクリーンショット 2022-11-06 121822.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2840455/7f29d321-9c8d-7be1-ee1b-ab3d78a0d72d.png)

できたら`起動`をクリックし、こんな画面になったら先ほどダウンロードしたISOファイルを選択
![スクリーンショット 2022-11-06 151303.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2840455/03347bcc-e57d-c7df-f8c5-0ae55394b7b2.png)

↓では`Ubuntu`を選択しEnter
![スクリーンショット 2022-11-06 151627.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2840455/af10190d-6908-4e46-42c7-0b36609932f0.png)

インストール画面になるので`日本語`を選択し`Ubuntuをインストール`

![スクリーンショット 2022-11-06 152014.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2840455/fd8e51ac-b4f5-bb97-7e6c-c8bf1c1ea688.png)


:::note
画面が見切れてしまって操作できない場合は`Alt + F7`でウィンドウを動かそう
:::

あとは適当に続ける連打でOK

## 画面サイズ変更
デフォルトだと画面サイズ固定でウィンドウ最大化しても追従してくれないため設定変更
![スクリーンショット 2022-11-06 154520.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2840455/8df69e96-1fba-e929-d4f5-7353658d8b8b.png)

`デバイス`＞`Guest Additions CDイメージの挿入`を選択
![スクリーンショット 2022-11-06 154631.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2840455/d122559c-d7d3-8c6d-663f-043f72b99216.png)
左のバーに`VBox_GAs_6.1.12`が追加されるのでクリックし、**autorun.sh**を右クリックし`プログラムとして実行`
![スクリーンショット 2022-11-06 155057.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2840455/0f889010-2283-c5ac-261b-45a2657f7109.png)
完了したらVMを再起動する

ウインドウサイズに追従するようになればOK
![スクリーンショット 2022-11-06 155657.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2840455/b57c1e90-5c17-a408-e869-b2c6cc8d5526.png)

## Node.jsのインストール
nvmというNode.jsのバージョンマネージャーを使ってインストールする

:::note warn
下記の手順はnvmの公式ドキュメントから引用したもの
古いバージョンを指定している可能性があるので実行コマンドは[ここ](https://github.com/nvm-sh/nvm#install--update-script)からコピペしてくること
:::

↓のコマンドを実行

```bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash
```

.bashrc実行して正しくインストールされたか確認

```bash
source ~/.bashrc
nvm --version
```

LTS版のNode.jsをインストールして確認

```bash
nvm install --lts
node --version # 執筆時点ではv18.12.1
```

## Dockerのインストール
公式ドキュメントも参照

https://docs.docker.com/engine/install/ubuntu/

dockerのリポジトリの設定

```bash
sudo apt-get install ca-certificates curl gnupg lsb-release
sudo mkdir -p /etc/apt/keyrings
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg
echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu \
  $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
```

docker engineをインストール
```bash
sudo apt-get update
sudo apt-get install docker-ce docker-ce-cli containerd.io docker-compose-plugin
docker --version
```

このままだとrootユーザーでしかdockerコマンドを使えないので設定を変更

```bash
sudo gpasswd -a $USER docker
sudo systemctl restart docker
```

再起動してdockerコマンドが使えるかチェックしよう

```bash
docker images
```

## AWS CLIのインストール

公式ドキュメントも参照

https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/getting-started-install.html

↓を実行

```bash
curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"
unzip awscliv2.zip
sudo ./aws/install
aws --version
```

## VSCodeのインストール
↓を実行
```bash
wget -O vscode.deb 'https://code.visualstudio.com/sha/download?build=stable&os=linux-deb-x64'
sudo apt install ./vscode.deb
```
インストールできたら画面左下の`アプリケーション`からVSCodeを探して実行
![スクリーンショット 2022-11-06 181148.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2840455/bb77b540-ec54-52b5-d4eb-221d90143cdb.png)

### 日本語化

`Extensions`から**Japanese Language Pack for VS Code**を探してインストールし、VS Codeを再起動すればOK

![スクリーンショット 2022-11-06 181350.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2840455/7ba969a5-4247-4f40-39bf-cbd5b6cbc100.png)

### 自動整形ON

左下の歯車アイコン→`設定`

![スクリーンショット 2022-11-06 181649.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2840455/c0131e9f-0009-7807-5677-26a9ffc9363d.png)

検索ボックスで`Format On Save`を探して有効化する

![スクリーンショット 2022-11-06 181756.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2840455/32663fff-268f-0184-4231-48a4e9dd9d34.png)

その他インデントの大きさなど好みでカスタマイズしよう

# 参考記事
https://qiita.com/HirMtsd/items/225c20b77a7cd5194834
https://qiita.com/pyon_kiti_jp/items/da5080e9c7454e935aeb
https://qiita.com/DQNEO/items/da5df074c48b012152ee
https://arkgame.com/2022/05/01/post-307676/