【10分で】ほぼコマンドなし！VSCode×Docker×ペアプロしよう【開発体験向上】

こんにちは。ローカル環境のパッケージ管理は美しくできていますか？残念ながら私はできていません。あれは入社1年目、いろんなブログから引っ張ってきたインストール系コマンドをよくわからないまま実行した結果・・・(お察しください)

それはさておきローカルから分離したクリーンな環境を、サーバーも立てずにスパッと作れたらいいと思いませんか？

概要

ということで、今回は

を実現したいと思います。 VSCodeとDockerさえインストールしてあれば10分あればできると思います。

Visual Studio Code(以下VSCode)のExtension(拡張機能)を使って、Dockerインストール以外の作業はずっとVSCodeの画面でおこなえます。楽！

今回の動作環境は以下のとおりです。

こちらよりダウンロードできます。 https://code.visualstudio.com/

VSCodeを開き、「Remote - Containers」というExtensionをインストールしておきましょう。

OSによってインストール手順が異なるため、割愛いたします。「Mac(Windows) Docker インストール」などで検索していただくと素敵な記事がヒットしますので、そちらをご参照ください。インストール後、起動しておきます。

それでは、コンテナ上でファイル編集をするところまでチュートリアル的にやってみましょう。

git clone https://github.com/serverworks-annex/docker_sample.git

2.VSCodeコマンドパレットを開く

MacのショートカットキーはCommand + Shift + P、WindowsならCtrl + Shift + Pです。

3.「Open Folder in Container...」を選択する

4.1でcloneしたリポジトリのディレクトリ(「docker_sample」)を開く

→.devcontainerディレクトリ内の設定ファイルを読み込んで、設定ファイルどおりに立ち上げたコンテナに接続してくれる！ \ワーオ/ (こんな画面になるので少し待ちます。)

5.Pythonファイルを実行する

# python sample.py
>>> {'userId': 1, 'id': 1, 'title': 'delectus aut autem', 'completed': False}

→HTTPリクエストをする処理が問題なく実行できました。 requirements.txtで指定されたライブラリも、コンテナ起動時にインストールされています。 .devcontainer/devcontainer.jsonの20行目にpip installコマンドを記載しているからですね。

Remote Containers拡張機能の設定をします。今回利用しているパラメータについて説明します。今回は使用していないパラメータもあります。詳しくは公式ドキュメントをご参照ください。

name
- コンテナの表示名
settings
- コンテナ側のVSCodeの設定ファイルに追記する内容
extensions
- コンテナにインストールするVSCodeのExtension IDリスト
- globalにインストールされていないExtensionでも問題ない
forwardPorts
- コンテナで使えるようにしたいポートのリスト
postCreateCommand
- コンテナを起動した後にコンテナ内で自動実行するコマンド
- 複数指定する場合は「&&」でつなげる