1/24 分かりにくかったので説明と図を追加＆変更

1/29 アドバイスを頂いたので変更

こんばんは。まつあきです。

前回に続き、2回目です。開発環境を作っていきましょう。

今回は開発環境を準備しますが、仮想環境というのを作って、その中に開発環境を準備します。

仮想環境を間に挟む理由ですが、端的に言うと学習効率と運用効率を上げるためです。WindowsやMacの中に開発環境を用意すると、OSごとに指示を変えたり、学習者がOS切り替えた時に躓くというのも非効率な話です。

仮想環境であれば、スペックは置いておいて同じような環境を用意して開発することができるので、学習コストが下がります。また、運用面でも運用想定をした仮想環境で開発していきながら、仮想環境まるごとサーバーにアップロード、というのもトレンドです。

開発環境の用意

という訳で、仮想環境を用意していくために、色々とソフトを使用します。

必要なソフト

・Docker (OSによって入れるものが違ってきます下記参照)

・エディタ（atomかVSCodeがいいと思います）

・ 教材ここからダウンロード

Windows home の方　→ Docker Toolbox

Windows Pro 等の方でHyper-Vを使用する場合　→　Docker for Windows

Windows Pro 等の方でHyper-Vを使用しない場合　→　Docker Toolbox

Mac の方で仮想環境を作る→　Docker Desktop for Macもしくは Docker Toolbox for mac

(Docker Desctop for Mac は仮想マシンを1台で運用するようです。仮想マシンが何台も欲しい方はDocker Toolbox for macを導入しておくと良いです。両方インストールするやり方もあります)

Macは持っていないので、持ってる方お願いします。

Linux

Docker入れてください

Docker？

開発（仮想）環境を作るためのソフトです。

これから開発を行うにあたって、Dockerで仮の箱（仮想環境）を用意してあげて、その中で開発（工事とかインストール）をやっていきます。

先にスキームをお見せした方がわかりやすいと思いますので・・・

Dockerが仮想環境を構築してくれます。といっても中身が空なので、中身に開発に必要な色々をインストールする必要があります。

私がレシピを書いておいたので、Docker-Compose君がそれを読み取って、ダウンロードして箱の中の開発環境を整えてくれます。

これから仮想環境の中で作業をするので、OSに依存無くチュートリアルが書けるので私も助かります。

同時に、使わなくなった時には仮想環境を減らしたり、環境を用意してその中で遊んだりもできるので、今後の（開発）人生に有意義かと思います。

スキーム２です。

コマンドプロンプト上では仮想環境や開発環境で作業をするためには、ログインする必要があります。それを指示するのが、docker exec -it フォルダ名_app_1 bashになります。bashが/bin/bashになったりする場合もありますが、そこはエラーが出たら教えてください。

箱を開けた後、fukuyama-it-webに移動(cd)していただいて、開発に必要なツール等npmで一括インストールします。

インストールすると、色々なコマンドが動くようになるのですが、npm run buildを入力することで、ページを組み立ててくれます。

今回はここまで行って終わりです。

インストール

前述したソフトやファイルについてのインストール、解凍については良きに計らってお願いします。

Windowsの方はCドライブ配下のユーザー内に解凍したフォルダがあるとDockerも手間なく認識してくれます。

Macの方はすみません、持っていなくて適切な方法が提示できておりませんが、恐らくユーザーフォルダ内に解凍していただけると手間なく認識していただけると思います。

Docker起動

コマンドプロンプトを開いてください。黒い画面のやつです。

コワクナイヨー。

コマンドプロンプトは、基本的に　プログラム名　命令文　対象　で書いていきます。

今回使うプログラム名

４通りあります。

①docker、②docker-machine、③docker-compose、④npmです。基本的にdockerっていう仮想環境を作るソフト使うから、それを使う。

npmについては、開発環境内で馬車馬のごとく働いて貰う、単語だと思っていただければよいかと。(興味が持てたらググろう！)

使う命令文基礎

cd ディレクトリ

移動コマンドです。プログラム名を記載せずに入力することでディレクトリを移動します。ディレクトリというのは、フォルダの階層とかのやつです。

windowsだとエクスプローラー上あたりに表示されるアレです。

これで、コマンドプロンプト内で教材の位置まで移動します。

exit

何もつけずにexitを指示すると、とにかくログアウトや終了します。logoutも覚えておいてください。わからん！ってなった時にこの２つのいずれかを入力することで一旦、作業を終えることができます。動いている環境等は、stopしてあげてください。

docker-machine関係

start

docker-machineとつけることで、仮想環境を起動させます。1回目はダウンロードとインストールでしばらく時間がかかると思います。

stop

仮想環境が止まります。

docker-compose関係

up -d

docker-compose と合わせることで、仮想環境内で指定された構造の環境を組み上げてくれます。(docker-compose.yamlに命令が書いてあります)

Starting  〇〇って英語で書いてあると思うので、その名前は覚えておいてください。

stop

開発環境が止まります。

dokcer関係

exec -it 〇〇_app_1 bash

多分最難関です。仮想環境はふつうは中身を見れないので、フタを開けて、中に入るコマンドです。

npm関係

run build

ソースコード（頑張って書いたコード）を動くような形で組み立ててくれます。これをすると、教材内にpublicフォルダとjsファイルが作成されます。以降は上書きされます。

着地点

今回は、npm run buildを入力すると、教材フォルダ内/fukuyama-it-web内にpublicのファイルが生成されるところまでを今回のゴールにしています。

躓いたところ、うまくいかないところがありましたら、恐縮ですが、コメント欄まで記入いただけますと幸いです。エラー文があるとより的確な回答ができると思います。