Dockerフロントエンド開発環境構築

ローカル開発環境としての docker の利点:

 隔離された環境

プロジェクトごとに必要なnodeやその他のプロジェクトのバージョンが異なり、切り替えるのが面倒 nvmでも解決できますが、dockerを使ったほうが良いでしょう

クイック設定環境

新しいコンピューター、新しいシステム、新しい環境、最初に行うことは開発環境を構成することです。ノード、git をダウンロードし、npm グローバル パッケージをいくつかインストールし、vscode をダウンロードし、vscode を設定し、プラグインをダウンロードします。

docker を使用した後は、事前にパッケージ化された開発環境イメージを docker Hub から取得するだけで、快適に開発できます。

ドッカーのインストール

docker 公式 Web サイト ( http://www.docker.com ) docker デスクトップをダウンロードしてインストールします

インストールが完了したら、docker を開き、完全に起動したら、コンソールを開いて次のように入力します。

docker -v

インストールされていることを示すバージョン情報が表示されます

開発環境を構成する

ノード バージョン 8.14.0 で実行する必要があるプロジェクトがあると仮定すると、まず Docker ハブに移動して、このバージョンのノード イメージをプルダウンします。

docker pull node:8.14.0

プルが完了したら、ミラーをリストします。

docker images

 

コンテナを起動します。

docker run -it --name test_container d543faf5bdd8 /bin/bash

上記のコマンドは、コマンド ライン対話モードでコンテナーを起動し、コンテナーの名前を test_container として指定することを意味します。

この時点で、新しいコンテナが作成され、入力されました。コンテナは Linux システムです。Linux コマンドを使用できます。いくつかのコマンドを入力してみましょう:

このノード イメージはノード 8.14.0 とともにプリインストールされていることがわかります。

ミラーとコンテナの関係: ミラーは最も基本的な環境のみをプリインストールします。たとえば、上記のノード:8.14.0 ミラーはノード 8.14.0 がプリインストールされた Linux システムとみなすことができ、コンテナはミラーに基づく別のクローンです。Linux システムは、このシステムに Java、Python などの他の環境をインストールできます。ミラーは複数のコンテナを作成でき、各コンテナ環境は互いに分離されており、相互に影響しません (たとえば、Java がコンテナ A にインストールされている場合、コンテナ B はインストールされていません)

コマンド ラインを使用してプロジェクトを操作するのは不便なので、最初にコマンド ライン モードを終了し、exit を使用して終了します。

 IDE の助けを借りて、docker をプレイするのがより便利です。ここでは、vscode を選択し、vscode を開き、Remote - Containers 拡張機能をインストールします。この拡張機能により、コンテナをより便利に管理できるようになります。

インストールが成功すると、左下隅にアイコンが表示されるので、次をクリックします。

 

展開されたメニューから「実行中のコンテナにアタッチ」を選択します。

 

この時点で、「接続する実行中のコンテナがありません。」というエラーが報告されます。コマンド ライン対話モードを終了したばかりなので、コンテナは停止状態を処理しています。次のコマンドを使用して表示できます。実行中のコンテナ:

docker ps

 リストに実行中のコンテナがないことがわかりました。新しく作成したコンテナを見つけて実行する必要があります。まず、すべてのコンテナのリストを表示します。

# -a 可以显示所有容器，包括未运行的

docker ps -a

# 使用容器名称

docker start my_container

docker ps コマンドを再度実行すると、実行中のコンテナーが表示されます。次に、vscode に戻り、[実行中のコンテナにアタッチ] を再度選択すると、実行中のコンテナのリストが表示されます。

入るコンテナを選択し、bash ターミナルを追加すると、先ほどのコマンド ライン モードに入ることができます。

 vue-cli をインストールし、/home ディレクトリにプロジェクトを作成します。

# 安装 vue-cli

npm install -g @vue/cli


# 进入到 home 目录

cd /home


# 创建 vue 项目

vue create demo

vscode でディレクトリを開くと、それがマシンのディレクトリではなく、コンテナ内のディレクトリになっていることがわかります。先ほど作成した /home/demo を見つけて開きます。

 

npm runserve と入力すると、楽しく開発できます。

 

上記では、開発環境を作成する例としてノード 8.14.0 イメージを使用しました。新しいバージョンのノードを使用する場合も同様です。指定されたバージョンのノード イメージをプルするだけで済みます。その後、これを使用しますイメージを使用してコンテナーを作成し、コンテナー内でプロジェクトを作成するか、開発のために Git ウェアハウスからプロジェクトを取得することで、2 つの異なるバージョンのノード開発環境が存在し、同時に開発できます。

ポイント：ubuntuを使った開発環境の構築【ミラークイック構成】

ノード イメージにはノードと git しかインストールされていないため、上記の方法は実際には使用するには不便です。また、イメージにさらに多くの組み込み機能 (nrm や vue-cli などのプリインストールされた npm グローバル パッケージなど) を含めることができることを期待する場合もあります。 、またはプレインストールされた vscode の拡張機能など）により、イメージを使用して新しく作成されたコンテナーにもこれらの機能が含まれるため、コンテナーごとに 1 回インストールする必要はありません。

ubuntu をベースとして使用して開発環境を自由に構成できます。まず、ubuntu イメージを取得します。

# 不输入版本号，默认获取 latest 即最新版

docker pull ubuntu

新しいコンテナを作成します。

docker run -itd --name fed 597ce /bin/bash

ここでの -itd は、実際には -i -t -d を共作成したもので、-d はコンテナをバックグラウンドで実行します。これは、新しいコンテナを作成するときにコンテナを一緒に起動するのと同じなので、必要はありません。 docker start コマンドを使用します。後で vscode を直接使用してコンテナを操作するため、コマンドライン モードを使用する必要はありません。

コンテナーに fed (フロントエンド開発を意味する) という名前を付けましたが、コンテナーの名前は短くて入力しやすい名前にすることをお勧めします。

ubuntu イメージは非常に純粋 (わずか 72m) で、最も基本的な機能のみを備えています。

sudo をインストールします。

apt-get install sudo

git をインストールします。

apt-get install git

wget をインストールします (wget はダウンロード ツールです。ソフトウェア パッケージをダウンロードするために使用する必要があります。もちろん、個人の好みに応じて axel を選択することもできます)。

apt-get install wget

プロジェクトとソフトウェア パッケージの管理を容易にするために、/home ディレクトリに 2 つのフォルダー (プロジェクトとパッケージ) を作成します。プロジェクトはプロジェクトの保存に使用され、パッケージはソフトウェア パッケージの保存に使用されます。

cd /home

mkdir projects

mkdir packages

ubuntu ソースのノードのバージョンは比較的古いため、公式 Web サイトから最新バージョンをダウンロードし、wget を使用してノード パッケージをダウンロードします。

# 将 node 放到 /home/packages 中

cd /home/packages


# 需要下载其它版本修改版本号即可

wget https://nodejs.org/dist/v14.18.0/node-v14.18.0-linux-x64.tar

ファイルを解凍します:

tar -xvf node-v14.18.0-linux-x64.tar


# 删除安装包

rm node-v14.18.0-linux-x64.tar


# 改个名字，方便以后切换 node 版本

mv node-v14.18.0-linux-x64 node

ノード環境変数を構成します。

# 修改 profile 文件

echo "export PATH=/home/packages/node/bin:$PATH" >> /etc/profile


# 编译 profile 文件，使其生效

source /etc/profile


# 修改 ~.bashrc，系统启动时编译 profile

echo "source /etc/profile" >> ~/.bashrc


# 之后就可以使用 node 和 npm 命令了

node -v

npm -v

nrm をインストールし、taobao ソースに切り替えます。

npm install nrm -g

nrm use taobao

eslint、vetur などの vscode 拡張機能をインストールします。拡張機能はコンテナーにインストールされ、構成ファイルはコンテナー内に保持され、パッケージ化されたイメージも一緒にパッケージ化されます。コンテナを閉じて vscode を開くと、これらの拡張機能がこのマシンの vscode にインストールされていないことがわかります。

これまでのところ、シンプルなフロントエンド開発環境が構成されており、yarn、nginx、vim などの独自の好みに応じていくつかのパッケージを追加できます。

パッケージイメージ

上記ではubuntuによる簡単な開発環境を構築しましたが、この環境を再利用するにはミラーにパッケージ化してDocker Hubにプッシュする必要があります。

ステップ 1 : まず、docker にアカウントを登録します。

ステップ 2 : シェルを開いて Docker にログインします。

ステップ 3 : コンテナーをイメージにパッケージ化します。

# commit [容器名称] [镜像名称]

docker container commit fed fed

ステップ 4 : イメージにタグを付けます。イメージは Docker ハブにプッシュされ、タグはバージョンを区別するために使用されるため、ここでは最初にそれを最新に設定します。Docker ハブ上のイメージとの競合を防ぐために、タグ名は名前空間としてユーザー名とともに追加されます。

docker tag fed huangzhaoping/fed:latest

ステップ 5 : タグを Docker ハブにプッシュします。

docker push huangzhaoping/fed:latest

ステップ 6 : フィードに関するローカル イメージとコンテナーをすべて削除し、Docker ハブからプッシュしたばかりのイメージをプルします。

# 拉取

docker pull huangzhaoping/fed


# 创建容器

docker run -itd --name fed huangzhaoping/fed /bin/bash

vscode でコンテナーを開き、コマンドラインを開いて、次のように入力します。

node -v

npm -v

nrm -V

git --version

次に、vscode 拡張機能を確認すると、拡張機能がインストールされていることがわかります。

ノードのバージョンを切り替えたい場合は、指定したバージョンのノードをダウンロードし、解凍して /home/packages/node を置き換えるだけです。

これまでのところ、Docker 開発環境のイメージが構成されており、このイメージをさまざまなコンピューターやさまざまなシステムで共有して、開発環境を迅速に構成するという目的を達成できます。

知らせ

• 重要なファイルや情報をコンテナーに保存しないでください。コンテナーがこれらのファイルを誤って削除すると、それらのファイルが失われます。マウントされたボリュームを使用して、ストレージ用のホストにマッピングできます。