ParallelsとUbuntuとDockerとRemote Containersでリモート開発環境を構築してみた

![](https://day-journal.com/memo/images/try-058_01.gif)

<br>

![](https://day-journal.com/memo/images/try-058_00.png)

<br>

### ParallelsとUbuntuとDockerとRemote Containersでリモート開発環境を構築してみました :tada:  

先日、MacBook Proを修理しました。修理から戻ってきた時はそのままの環境で利用していた、そんな経験はありませんか？

今回は、せっかくなのでこれをきっかけにクリーンインストールし、開発環境を再構築してみました！

再構築の目的として、ローカル環境をできるだけ汚さずに管理することができないかと思い、Parallels内にUbuntuとDocker環境を構築し、Remote Containersでローカル環境のようにリモート環境に接続する開発環境を構築してみました。

ローカル環境汚したくないユーザーの参考になればと思います :grinning:

環境構築には、技術書典で以前購入した[@74th](https://twitter.com/74th)さんの書籍を参考にしながら構築してみました。Visual Studio CodeのRemote Containers機能のガイドブックなので、興味あるかたはゼヒ購入してみてください :shopping_bags:
[VS Code Dev Container Guidebook](https://74th.booth.pm/items/2425642)  

<br>

事前準備

- ParallelsにUbuntu 20.04 LTS Serverの環境構築  
[macos Catalina上のParallelsにUbuntu 20.04 LTS Serverをインストール](https://qiita.com/devzooiiooz/items/e5535636bce6ab15fa94)
- UbuntuにParallelsToolsをインストール  
[他のバージョンのゲストLinuxOSでのParallelsToolsのインストール](https://download.parallels.com/desktop/v13/docs/ja_JP/Parallels%20Desktop%20User's%20Guide/32791.htm)
- Ubuntu環境にsshで手軽に接続  
[ParallelsのUbuntu Linuxにssh接続する](https://zenn.dev/tera_ny/articles/f782d7da96100a)

実行環境

- ローカル環境 : Mac  
- リモート環境 : Parallels内のUbuntu Server 20.04  


今回は、事前準備と実行環境の準備が完了したところから説明していきたいと思います。

<br>

はじめに、リモート環境にDockerをインストールします。リンクのステップ1,2,3までをおこない、DockerのインストールとSudoなしでDockerコマンドを実行するまでを設定します。
[Ubuntu 20.04へのDockerのインストールおよび使用方法](https://www.digitalocean.com/community/tutorials/how-to-install-and-use-docker-on-ubuntu-20-04-ja)

上記以外に、追加でdocker-conposeもインストールします。

```shell
sudo apt install docker-compose
```

インストールされているかを確認します。

```shell
docker -v
docker-compose -v
```

![画像](https://day-journal.com/memo/images/try-058_02.png)


次に、ローカル環境にDockerをインストールします。最終的にはリモート環境でDockerを実行するので、今回はDocker Desktop for Macは利用しません。

```shell
brew install docker
brew install docker-compose
```

インストールされているかを確認します。

```shell
docker -v
docker-compose -v
```

![画像](https://day-journal.com/memo/images/try-058_03.png)

インストール確認後、ローカル環境からリモート環境にsshでDockerにアクセスできるかを確認します。ssh接続は事前準備で完了済の想定です。

```shell
ssh dayjournal@remote-host docker ps
docker -H ssh://dayjournal@remote-host ps
```

![画像](https://day-journal.com/memo/images/try-058_04.png)

次に、docker contextを設定しリモート環境のDockerに直接アクセスできるようにします。

```shell
docker context create remote-docker --docker host=ssh://dayjournal@remote-host
docker context use remote-docker
```

直接アクセスができているかを確認します。

```shell
docker context ls
docker ps
```

![画像](https://day-journal.com/memo/images/try-058_05.png)

ここまででDocker開発環境の構築は完了です :thumbsup:

<br>

次に、Visual Studio Codeの拡張機能のRemote Containersをインストールします。この拡張機能をインストールすることで、手軽にリモート環境に接続し開発することが可能になります。
![画像](https://day-journal.com/memo/images/try-058_06.png)

Dockerコンテナを起動し開発環境を確認します。下記リポジトリに、サンプル用の設定ファイルを格納したのでクローンします。今回はその中のnodeサンプルを利用してみます。  

[remote-container-docker-showcase](https://github.com/dayjournal/remote-container-docker-showcase)

![画像](https://day-journal.com/memo/images/try-058_07.png)

#### node/docker/docker-compose.yml

```yaml
version: '3'

services:
    node:
        container_name: dev-node
        tty: true
        build:
            context: .
            dockerfile: node/Dockerfile
        volumes:
            - ../projects:/projects
        working_dir: /projects
volumes:
    projects:
```

#### node/docker/node/Dockerfile

```Dockerfile
FROM node:15.5.0
```

<br>

リモート環境で、共有設定(ParallelsToolsインストール済)されたローカル環境のディレクトリを確認します。

```shell
df
```

![画像](https://day-journal.com/memo/images/try-058_08.png)

共有されたクローンしたディレクトリに移動します。

```shell
cd /media/psf/Home/Documents/GitHub/remote-container-docker-showcase
```

docker-compose.ymlがあるディレクトリに移動します。

```shell
cd node/docker
```

Dockerコンテナを起動します。

```shell
docker-compose up --build
```

![画像](https://day-journal.com/memo/images/try-058_09.png)

最後に、Visual Studio Codeのコマンドパレットで下記を実行し、対象のコンテナを選択します。
「Remote Containers: Attach to Running Container...」

リモート環境に接続されたら、ターミナルでnodeのバージョンを確認してみます。

```shell
node -v
```

![画像](https://day-journal.com/memo/images/try-058_01.gif)

<br>

#### ParallelsとUbuntuとDockerとRemote Containersでリモート開発環境を構築できました :thumbsup: 

リモート環境で開発環境を構築することで、ローカル環境をできるだけ汚さずに管理することが可能です。また、サンプルではprojectsディレクトリを同期しているので、ローカル環境で作業しているかのように手軽にファイル更新もできます :grinning:

Parallelsは有償ですが、Macを起動したままWindowsやLinuxの環境を起動できて、個人的にもかなり便利で開発に利用しているのでおすすめです！

<br>

Dockerについて、他にも記事を書いています。よろしければぜひ :bow:
<a href="https://day-journal.com/memo/tags/Docker/" target="_blank">tags - Docker</a>

やってみたシリーズ :grinning:
<a href="https://day-journal.com/memo/tags/Try" target="_blank">tags - Try</a>

<br>
<br>

<a href="https://dayjournal.booth.pm" target="_blank"><img src="https://day-journal.com/memo/images/etc/book.png" alt="book"></a>