新人エンジニアの時に知っておきたかったこと[sandbox環境編]

## はじめに
この記事は[新人エンジニアの時に知っておきたかったこと](https://qiita.com/hirokisan/items/cd45d3f6e5fa688235fc)に含まれます。
他の記事は上記のリンクから遷移可能です。あわせてご覧ください。

## sandbox環境
私がエンジニアとしてのキャリアを歩み始めたあの時、Windowsのノートパソコンを開いてプログラミングをしていました。
PHPのコードを動かしたいということで、[XAMPP](https://www.apachefriends.org/jp/index.html)を触ってみたりしていました。
あの時感じたのは、PHPのコードを書くモチベーションが高まっているのに、準備するのに時間かかるなぁということです。
振り返ってみると、始めの頃につまづいていたのは、環境構築だったり、インストールだったりという思い出があります。
PHP書きたい、Redis触りたい、なんでもいいからとにかく触ってみたいという気持ちがあるはずです。
そこで、とりあえずPHPとかNodeとかをインストールしたsandbox環境を用意してみました。

[hirokisan/sandbox](https://github.com/hirokisan/sandbox)

### インストール済みの主なツール
#### PHP
```
$ php -v
PHP 7.0.30 (cli) (built: Apr 24 2018 21:28:23) ( NTS )
Copyright (c) 1997-2017 The PHP Group
Zend Engine v3.0.0, Copyright (c) 1998-2017 Zend Technologies
```

#### Composer
```
$ composer dump-autoload -V
Composer version 1.6.5 2018-05-04 11:44:59
```

#### Redis
```
redis-cli -v
redis-cli 3.2.10
```

#### MariaDB
```
mysql -uroot
>status
Server version:		5.5.56-MariaDB MariaDB Server
```

#### Node
```
$ node -v
v8.9.4
```

#### NPM
```
$ npm -v
5.6.0
```

#### Yarn
```
$ yarn -v
1.7.0
```

#### Git
```
$ git --version
git version 1.8.3.1
```

### 必要なもの
[Docker For Mac](https://store.docker.com/editions/community/docker-ce-desktop-mac)

Docker For Macを使用します。

### 手順
Docker For Macを既にインストールしたものとして、sandbox環境をセットアップしていきます。

#### 1. Docker For Macを起動する
アプリケーションからDocker.appを選び、起動します。

<img width="412" alt="スクリーンショット 2018-07-27 23.51.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/97975/8d329604-0541-cf3d-423e-0f3ab3e8b3fc.png">

#### 2. ソースを用意する
まずはソースをダウンロードします。
$PATHはあなたの好きなディレクトリで置き換えてください。

```
$ cd $PATH
$ git clone https://github.com/hirokisan/sandbox.git
```

#### 3. ssh接続用の鍵を生成する
以下のコマンドを実行します。
ただし、\$PATH には sandbox ディレクトリへのパスを設定します。
~/Desktop/ 以下に sandbox を配置した場合、
\$PATH の部分は Desktop に置き換えてください。

```
$ ssh-keygen -f ~/$PATH/sandbox/workspace/id_rsa
```

#### 4. hostsファイルに変更を加える
```
$ sudo sh -c "echo 127.0.0.1 sandbox.local >> /etc/hosts"
```

#### 5. SSH Configに変更を加える
以下のコマンドを実行します。

ただし、\$PATH には sandbox ディレクトリへのパスを設定します。
~/Desktop/ 以下に sandbox を配置した場合、
\$PATH の部分は Desktop に置き換えてください。

```
$ printf "\
Host sandbox.local
  HostName 127.0.0.1
  User sandbox
  Port 10080
  UserKnownHostsFile /dev/null
  StrictHostKeyChecking no
  LogLevel FATAL
  IdentityFile ~/$PATH/sandbox/workspace/id_rsa
" | cat >> ~/.ssh/config
```

#### 6. コンテナ立ち上げ

```
$ docker-compose up -d --build
```

#### 7. sshでコンテナにログインする
```
$ ssh sandbox.local
```

#### 8. コンテナにログインして初期設定する

```
$ bash ~/init.sh
```

#### 9. Dotfiles初期設定
Dotfilesに関しては必ずしも設定する必要はありません。
なので、Dockerfileでは設定箇所をコメントアウトしています。
使用したい方は、コメントアウトを解除してください。

コンテナにログイン後に以下のコマンドを実行します。

```
$ git clone -b sandbox-use https://github.com/hirokisan/dotfiles.git ~/dotfiles
$ bash ~/dotfiles/install.sh
```

ログインシェルの切り替えを反映させるため、コマンド実行後に一旦コンテナからログアウトして再度ログインします。
すると、zplug installが実行され、あらかじめ定義されているプラグインがインストールされます。
<img width="762" alt="スクリーンショット 2018-07-27 23.38.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/97975/77081080-8f27-8f3f-da97-d4ad87253439.png">

Vimでファイルを開くと、定義されているプラグインのインストールが始まります。

![2018-07-27 23_45_47.gif](https://qiita-image-store.s3.amazonaws.com/0/97975/e384aef8-57f6-ad30-b140-89d03cd04a23.gif)


### 試しにPHPプログラムを動かしてみましょう
vim quickrunでPHPプログラムを動かしてみます。
![2018-07-27 22_56_35.gif](https://qiita-image-store.s3.amazonaws.com/0/97975/90215d3c-8653-12ff-07c4-51a51dbdfcef.gif)

コマンドラインからPHPプログラムを動かしてみます。
![2018-07-27 22_59_55.gif](https://qiita-image-store.s3.amazonaws.com/0/97975/4ca197bd-fc08-af67-fcaf-bc7505833b37.gif)

### 試しにMariaDBを動かしてみましょう
![2018-07-27 23_02_04.gif](https://qiita-image-store.s3.amazonaws.com/0/97975/2c7b5173-fd30-fb42-8b3d-16d576e936e9.gif)

### 試しにRedisを動かしてみましょう
vim quickrunでRedisと連携したPHPプログラムを動かしてみます。
![2018-07-27 23_05_20.gif](https://qiita-image-store.s3.amazonaws.com/0/97975/8f146acc-3cea-6747-3bfc-45e2fa8bcda3.gif)

### 補足
とりあえず、手軽にsandboxを作ることが今回の要件です。
1つのコンテナで複数のプロセスを起動するのは本来のコンテナの使い方ではないようですが、ご容赦ください。

### まとめ
この記事では簡単にプログラムの動作確認をしたいときに使えるsandbox環境をご共有しました。
dockerや[vagrant](https://www.vagrantup.com/)等を使うことで、手軽に動作確認用のsandbox環境を用意することができます。
ぜひ、お試しください。