##環境構築はDockerで作りたい。
Dockerに慣れてくると何でもDockerを使いたくなりませか？
僕はそんな人間の一人で、パソコンを買い換えてDockerを本格的に使い始めてから、手元の環境が汚れるのが嫌で環境構築は全てDockerを使っています。潔癖症かな?
今回は、VSCodeでDockerを使い倒すための神拡張機能のRemote-Containersを使って、JavaScriptのライブラリのReactの開発環境を作っていきます。
#####事前に準備が必要なもの
- Docker
- VSCode
##Remote-Containersを使って環境を作る
事前にDockerがインストールされているものとします。
拡張機能のDockerとRemote-Containers をインストールします。
適当なフォルダを開いて、コマンドパレットから
Remote-Containers:Add Development Containers Configuration Files
を選択。
インストールしたい環境のサンプルが表示されるので、Show All Definitionsを選択し、
最新版であるNode.js 14 & TypeScriptを選択。
そうすると.devcontainerフォルダが生成され、中にはMS社が用意してくれた指定した環境のDockerFileと追加設定を行うdevcontainer.jsonが保存されています。
Reactを利用するにはコマンドラインツールのcreate-react-appを使うのがラクチンなので、これをnpmでインストールする設定をDockerFileに追記しておきます。
また、コンテナ側の3000番ポートを使用することになるので、devcontinaer.jsonファイルにフォワードポートの設定を追記します。
最後にこれらのファイルを元にDockerイメージとコンテナを生成します。拡張機能からRemote-Containers:Rebuild and Reopen in Container 実行。
（または右下に出てるであろうポップアップをクリック）
画面が一度閉じ、再び開いたあと少し待つと、VScodeの左下がコンテナの中に入っていることを示す状態に変わっていると思います。
これでReactの環境は完成です。簡単！
##実際に動かしてみる
create-react-appを実際に使って、サンプルアプリを動かしてみます。
ターミナルを開いて、
を実行。必要なライブラリ一式がダウンロードされていきます。
Happy hacking!の文字が出たら完了です。
testディレクトリが作成されており、中にはReactを動かすためのテンプレート になるファイルが生成されています。
こいつを動かしてみます。
# cd/test //カレントディレクトリを移動
# npm start //アプリを起動
アプリを起動したらlocalhost:3000にアクセス。下記のような画面が表示されていたら成功です！
コンテナから抜けるには、VSCodeの画面を閉じるだけでコンテナOKです。
再びコンテナに入るには、VSCodeのDockerのオプションからお目当てのコンテナを右クリックして、Startをクリック。
そうするとコンテナが立ち上がるので、もう一度右クリックしてAttach Visual Studio Codeをクリックして完了です。
それでは、良いDocker & Reactライフを！