💻

Vagrant を使った、おてがる環境構築

2021/03/16に公開

はじめに

みなさん、VM は使っていますか？ローカルで開発して環境が荒れてしまうことが嫌いなので、なんでも仮想環境を使って開発している筆者です。最近では WSL2 内でほとんどの作業ができてしまうのであまり使っていなかったのですが、グループワークの際に 🍏 派閥がいて VM を使うことになる機会があったので、初心者向けにまとめておきます。

最終目標

git & gh を補完付きで使える
nvm 経由で、 npm を触れる
Yarn を触れる
PostagreSQL を触れる

本編

0. 準備編

0.1 ターミナル

コマンドでパソコンを操作するためには、シェルというものを扱う必要があります。その際に使うのが、「ターミナル」と呼ばれるソフトウェアです。Windows では「コマンド・プロンプト(最近では、 PowerShell)」、Mac では「ターミナル」がプリインストールされているはずです。
ターミナルを起動するとウィンドウが表示され、一見するとただのアプリのように思えるでしょうが、ターミナルは他のアプリケーションを呼び出すことができる特別な環境です。
Windows を使う場合は、 PowerShell で進めてください。正常にインストールをするために、以降の操作は 管理者権限で起動した PowerShell を使用してください。

0.2 パッケージマネージャの導入

自身の環境に応じて、パッケージマネージャを下記公式ページを参考にインストールしてください。
アプリケーションには他のソフトウェアを必要とし、それらを先にインストールしないと必要とするものがインストールできないというものが多くあります。通常であれば一つずつインストールするのですが、その手間を省かせてくれるのがパッケージマネージャです。

OS	Tool	Link
Windows	Chocolatey (チョコラティー)	https://chocolatey.org/install
Mac	Homebrew (ホームブリュー)	https://brew.sh/index_ja

1. VirtualBox のインストール

仮想マシンを管理・起動するための VirtualBox というソフトを入手する。
Windows では　choco、 Mac では brew コマンドをインストールしていく。

注) ダラーはシェルにおける、新しい行の開始を表しています。 $ を除いた一行ずつ入力してください。

管理者の PowerShell (Windows)

# choco では、 `cinst` というエイリアス(省略記法)が設定されており、 `choco install` と打たなくても良い。
$ cinst virtualbox -Version 6.0.16 -y

$ exit

iTerm2 (Mac)

$ curl -L https://raw.githubusercontent.com/Homebrew/homebrew-cask/ed3d9de/Casks/virtualbox.rb > virtualbox.rb
$ brew install virtualbox.rb && rm virtualbox.rb

2. Vagrant のインストール

管理者の PowerShell (Windows)

$ cinst vagrant -Version 2.2.13 -y

# Windows の再起動 (入力するとすぐに実行されるので要注意)
$ Restart-Computer

iTerm2 (Mac)

$ curl -L https://raw.githubusercontent.com/Homebrew/homebrew-cask/eb82c581/Casks/vagrant.rb > vagrant.rb
$ brew install vagrant.rb && rm vagrant.rb

3. Ubuntu をインストールする

管理者の PowerShell (Windows)

$ mkdir ~\vagrant\bionic64
$ cd ~\vagrant\bionic64

iTerm2 (Mac)

$ mkdir -p ~/vagrant/bionic64
$ cd ~/vagrant/bionic64

以降の操作は、 Windows ・ Mac 共通です

# Vagrant Cloud から OS イメージを取得
$ vagrant box add ubuntu/bionic64 --box-version 20200130.1.0

# 今いる Dir に適応
$ vagrant init ubuntu/bionic64

# Vagrantfile というファイルが生成されている
$ ls
 > Vagrantfile

# 共有用ディレクトリの作成
$ mkdir workspace

下記を参考にテキストエディタで Vagrantfile を編集する
途中にある forward_port は、必要なものを随時追加することで開けられる。

Vagrantfile

# Disable automatic box update checking. If you disable this, then
# boxes will only be checked for updates when the user runs
# `vagrant box outdated`. This is not recommended.
-# config.vm.box_check_update = false
+ config.vm.box_check_update = false

# Create a forwarded port mapping which allows access to a specific port
# within the machine from a port on the host machine and only allow access
# via 127.0.0.1 to disable public access
# config.vm.network "forwarded_port", guest: 80, host: 8080, host_ip: "127.0.0.1"
+ config.vm.network "forwarded_port", guest: 8000, host: 8000, host_ip: "127.0.0.1"

# Create a private network, which allows host-only access to the machine
# using a specific IP.
- # config.vm.network "private_network", ip: "192.168.33.10"
+ config.vm.network "private_network", ip: "192.168.33.10"

# Share an additional folder to the guest VM. The first argument is
# the path on the host to the actual folder. The second argument is
# the path on the guest to mount the folder. And the optional third
# argument is a set of non-required options.
# config.vm.synced_folder "../data", "/vagrant_data"
+ config.vm.synced_folder "./workspace", "/home/vagrant/workspace"

# Provider-specific configuration so you can fine-tune various
# backing providers for Vagrant. These expose provider-specific options.
# Example for VirtualBox:
- # config.vm.provider "virtualbox" do |vb|
- # # Display the VirtualBox GUI when booting the machine
-   # vb.gui = true
-
- # # Customize the amount of memory on the VM:
-   # vb.memory = "1024"
- # end
+ config.vm.provider "virtualbox" do |vb|
+ # Display the VirtualBox GUI when booting the machine
+ # vb.gui = true
+
+   # Customize the amount of memory on the VM:
+   vb.memory = "1024"
+   vb.name = "bionic64"
+   vb.customize ["setextradata", :id, "VBoxInternal2/SharedFoldersEnableSymlinksCreate//home/vagrant/workspace","1"]
+ end

4. 仮想マシンの操作・セットアップ

仮想マシンの操作

# 仮想マシンの起動
$ vagrant up

# 仮想マシンのシャットダウン
$ vagrant halt

# Vagrantfile の変更を反映させる
$ vagrant reload --provision

# 仮想マシンに SSH 接続する
$ vagrant ssh

ここから Ubuntu のセットアップ
注) vagrant ユーザとしてログインできているか確認すること

ubuntu

# パッケージのアップデート
$ sudo apt update && sudo apt upgrade

# 日本語化
$ sudo locale-gen ja_JP.UTF-8
$ echo export LANG=ja_JP.UTF-8 >> ~/.bashrc
$ source ~/.bashrc
$ sudo timedatectl set-timezone Asia/Tokyo

# 確認
$ date
 > 2021年  3月 16日 火曜日 16:27:26 JST

# NVM (Node Version Manager) のインストール
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash
$ source ~/.bashrc
$ nvm install v10.14.2
$ nvm use v10.14.2
$ node --version
 > v10.14.2

# Yarn のインストール
$ curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.21.1
$ yarn --help
 > Usage: yarn [command] [flags]...

# Git の Tab 補完有効化
$ wget https://raw.githubusercontent.com/git/git/master/contrib/completion/git-completion.bash -O ~/.git-completion.bash
$ chmod a+x ~/.git-completion.bash

# Git の認証 (GitHub に登録してある名前・メアドを登録)
$ git config --global user.name "なまえ"
$ git config --global user.email "めあど"

# Git で使用する SSH 用の鍵を生成 (指示に従って回答していく)
$ ssh-keygen

# GitHub CLI のインストール & セットアップ (https://github.com/cli/cli/blob/trunk/docs/install_linux.md を参照)
$ sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv-key C99B11DEB97541F0
$ sudo apt-add-repository https://cli.github.com/packages
$ sudo apt update
$ sudo apt install gh
$ echo 'eval "$(gh completion -s bash)"' >> ~/.bashrc
$ source ~/.bashrc
$ gh auth login  # 指示にしたがって認証する

# PostgreSQL のインストール
$ sudo apt install -y postgresql-10

はじめに

最終目標

本編

0. 準備編

0.1 ターミナル

0.2 パッケージマネージャの導入

1. VirtualBox のインストール

2. Vagrant のインストール

3. Ubuntu をインストールする

4. 仮想マシンの操作・セットアップ

Discussion