paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。

VSCodeとDockerで簡単に開発環境を構築&共有する方法

f:id:paiza:20190704170535p:plain

もじゃ(@s10akir)です。paizaラーニングでプログラミング学習動画制作のアルバイトをしている専門学生です。

以前こんな記事を書かせていただきました。

paiza.hatenablog.com

今回は、VSCodeとDockerを使って簡単に開発環境を構築する方法について書いてみたいと思います。

code.visualstudio.com

ちなみに前回はプレビューリリースされた「Remote Development with VSCode」と「PaizaCloud」を使って、面倒な環境構築なしで快適に開発しようぜという記事だったのですが、しばらくして「Remote Development with VSCode」が正式版のVSCodeでも使えるようになりましたね!わざわざInsider版のVSCodeを入れなくてもよくなりましたね。

前提の環境について

この記事の内容が試せるのは

  • Hyper-V仮想化支援が利用できるWindows10(Pro, Educationなど)ユーザの方
  • Linuxユーザの方
  • macOSユーザの方

です。というのも、残念ながら現時点ではVSCode側が「Docker Toolbox」に対応していないので…Hyper-Vが無効化されているWindows10Homeでは使えません…。Windows10Homeの方は、前回の記事を見ていただいてVSCode + PaizaCloudをお試しいただければと思います。

もしくは、いっそお手元のマシンにLinuxをインストールしてしまう手もありますね。(悪いLinuxオタクの顔)(私はLinuxオタクでございます)

余談ですが、DockerはLinuxカーネルというものの上で動作するため、Linux以外のOSでDockerを動かす際は、いったん間に仮想的なLinuxが介入してきます。その点、そもそもホスト側のカーネルが使えるLinux環境ならめちゃくちゃ軽くて快適で便利です。(悪いLinuxオタクの顔)

Dockerについて

Dockerとはどんなもんなのか、ざっくり説明すると、ホストOSの上にコンテナとして独立した別の環境を作る仮想化アプリケーションです。

Container Runtime with Docker Engine | Docker

一般的な仮想マシンと比べるといろいろなメリットがありますが、今回最も重要なのは「違う場所でも同じ環境を簡単に再現できる」ということです。

Dockerの設定を書いたファイルを共有すれば、どこでも常に同じコンテナを作ることができちゃいます。

Dockerを使っていればコンテナの中身はどこでも同じなので、「自分のPCでは動くのに人のPCではうまく動かない…」などといった環境依存のトラブルに悩まされることもありません。

実際に、私は学校でプロジェクトを起こしてアプリケーション開発をおこなう演習もあるのですが、開発チームではVSCode + Dockerを使って全員の開発環境を統一しています。

また、いろいろな企業や個人が構築済みのコンテナイメージを共有してくれています。それらをそのまま利用させてもらえば、誰かが一生懸命作ってくれたいい感じの環境を簡単に構築することが可能です。

まとめると、
エディタにVSCodeを使うメリット

  • 高機能な開発支援機能が使える
  • 豊富な拡張機能がインストールできる

PaizaCloudを組み合わせる場合のメリット

  • 環境構築が数クリックで済む
  • 手元の環境を汚さないで済む

Dockerを組み合わせる場合のメリット

  • 誰でも全く同じ環境で検証ができる
  • 手元の環境を汚さないで済む

という感じですね。チーム開発など複数人で開発したいときはDockerの環境再現性がうれしいのですが、とにかく簡単に環境構築したいときはPaizaCloudが強いので、お好みで試してみてください。

VSCodeとDockerで開発環境構築して使ってみよう

Dockerのインストール

前置きはこれぐらいにして、実際にやってみましょう。まずはDockerを導入します。導入方法はご利用の環境によって異なりますので、公式の手順をご確認ください。

インストール後、ターミナルやコマンドプロンプト等でdocker -vコマンドが正常に実行できればOKです!

> docker -v
Docker version 18.09.6-ce, build 481bc77156(環境によってバージョンは異なります)
  • Windows10

Install Docker Desktop for Windows | Docker Documentation
※ 導入の過程でHyper-Vが有効になりますが、他の仮想化支援機能と競合するため、VirtualBoxやVMwareといった仮想化ソフトが動作しなくなります。Windowsの機能でHyper-Vを無効化すればもとの状態に戻りますが、ご注意ください。

  • Mac

Install Docker Desktop for Windows | Docker Documentation

  • Linux(Ubuntuの例)

Get Docker CE for Ubuntu | Docker Documentation
ちなみにUbuntuユーザの方はsnapでのインストールも手軽でおすすめです!

Remote Development with VSCodeのインストール

拡張機能を追加するだけなので、サクッと入れてしまいましょう。VSCode左側の拡張機能メニューから「Remote Development」をインストールすればOKです。

Remote Development - Visual Studio Marketplace

プロジェクト作成

VSCodeで利用できるDockerのプロジェクトの作成には、「Dockerfile」もしくは「docker-compose.yml」というDockerコンテナの設定を記述したファイルが必要になります。

今回はお試しということで、Microsoft公式のサンプルプロジェクトでやってみましょう。

Node.js sample project for trying out the VS Code Remote - Containers extension

まずは上記リンクのgitリポジトリをclone、もしくは右上付近の「Clone or download」という緑のボタンから「Download zip」をクリックしDLされたzipファイルを展開しておきます。

次にVSCodeを起動し、左下角の「><」をクリックして表示されるポップアップメニューから、「Remote-Containers: Open Folder in Container…」をクリックして先程用意しておいたプロジェクトのフォルダを開きましょう。

f:id:paiza:20190704164831p:plain

初回のみ、Dockerfileの設定に従ってコンテナの構築が始まるため時間がかかります。

f:id:paiza:20190704164919p:plain

右下にこの表示が出ている間は構築中です。YouTubeでこちらの動画でも見ながら気長に待ちましょう。

www.youtube.com

「ハリーポッター: 魔法同盟」、トレーラーの吹き替え声優が内田姉弟さんなので始めようかと思っています。

しばらくして、ファイラー部分にいろいろ表示されたらコンテナへの接続は完了です!

f:id:paiza:20190704165125p:plain

できた環境を使ってみる

見た目はほとんど普段のVSCodeと変わりませんが、本当にコンテナに接続できているのかな?

試しにターミナルを立ち上げてみましょうかね。上部メニューバーから、「Terminal > New Terminal」で起動できます。

Windows環境の方は、普段のコマンドプロンプトやPowershellではなくbashが起動している時点で、「ああ、Linuxだ…」と実感が持てるかもしれません。

このコンテナはNode.jsの環境が構築されています。node -vコマンドでバージョンを確認してみましょう。

f:id:paiza:20190704165228p:plain

バージョンが表示されました。右側は私の「ホストOSに入っている」node.jsです。バージョンが違いますね?

というわけで、ちゃんと隔離された環境が作られていてその中でVSCodeが動いているようです!

このサンプルプロジェクトではNode.jsで書かれたWebサーバが用意されていますので、せっかくだから起動してみましょう。(server.jsがサーバプログラムです。)

ターミナルからnpm startと実行して、

> docker_web_app@1.0.0 start /workspaces/vscode-remote-try-node
> node server.js

Running on http://0.0.0.0:3000

と表示されればサーバが起動しています。

実際にブラウザから見てみましょう。

ブラウザを立ち上げて…localhost:3000に接続すると〜…はい!「Hello remote world!」と表示されました!

f:id:paiza:20190704165424p:plain

というわけで、ちゃんと隔離されたコンテナに接続できましたし、その中でプログラムも実行できています。同じ設定ファイルを使えば、みなさんのお手元でも私とまったく同じ環境を試したり、複数人のチームで共有したりできます。

まとめ

ちなみに、このサンプルプロジェクトでは
Dockerの設定ファイル: ./devcontainer/Dockerfile
VSCodeの設定ファイル: ./devcontainer/devcontainer.json
が、それぞれ用意されています。

これらを用意することで、同じようにVSCodeで使えるDocker開発環境が構築できますので、興味のある方はぜひ試してみてください。

「初心者なのでよくわからなかった…」という方は、前回の記事に書いたPaizaCloudであれば「ぽちぽちしていくだけで簡単に開発環境が整えられる」ので、お好きなほうで試してみてください。


PaizaCloud」は、環境構築に悩まされることなく、ブラウザだけで簡単にウェブサービスやサーバアプリケーションの開発や公開ができます。
https://paiza.cloud





paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

paizaのスキルチェック





※このブログで紹介しているキャンペーンやイベント、およびサイト内の情報については、すべて記事公開時の情報となります。閲覧されたタイミングによっては状況が変わっている場合もございますのでご了承ください。

ITプログラマー・エンジニア転職・就活・学習のpaiza

プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編AI機械学習入門

エンジニアのためのプログラミング転職サイト|paiza転職

プログラミング スキルチェックエンジニア求人一覧

未経験からエンジニアを目指す人の転職サイト|EN:TRY

プログラミング スキルチェックエンジニア未経験可求人一覧

エンジニアを目指す学生の就活サイト|paiza新卒

プログラミング スキルチェックエンジニア求人一覧

ブラウザを開くだけで エディタ、Webサーバ、DB等の開発環境が整う|PaizaCloud