1はじめに
先週の作業では、さまざまな環境（開発、テスト、ベータ、リリース）でさまざまな値を渡す必要がありました。まず、ビジネスが主な目標でした。したがって、ブロガーの最初のアプローチは、違いを判断することでした。異なる値を渡すためのホスト名はシンプルで迅速ですが、2つの欠点があります：
1）ホスト名が変更されたときにコードを変更する必要があります複数のサービスにこの要件がある場合、ワークロードが発生します
2）サービスデカップリングなし、手動調整は必要ありません
3）少し低く、コードが非常に不快に見える
ため、ブロガーは今日、最適化と改善を行うことにしました。現在の動作環境を取得するためにdockerの環境変数を取得することにより、以下のブロガーは、最小限の例で使用されているVueは、React AngularJQにも適用できます。
プロジェクト終了後は原則をわかりやすく説明する必要があるため、ブロガーが先に実装プロセスを説明します。理解できないことが多いので、実装完了後、ブロガーが1つずつ説明します。
2最小限の完全な実装
2.1最小限のvueプロジェクトを作成する
最小で最速なので、vueスキャフォールディングを直接使用してプロジェクトをプルできます
mkdir Get_Docker_ENV
# 创建Get_Docker_ENV文件夹
cd Get_Docker_ENV
# 进入Get_Docker_ENV文件夹
vue create vue_app
# 利用vue脚手架创建vue_app项目
スキャフォールディングがプロジェクトを自動的にプルするのを待ち、プルが完了します。
完成したプロジェクトディレクトリは次のとおりです。次のコードをmain.jsに追加します。これらのコードを追加する具体的な理由は、プロジェクトの完了後にブロガーによって詳細に説明されます。
const ENV_NOW = document.querySelector("html").getAttribute("env_now");
// 获取html标签的env_now属性值
if (ENV_NOW) {
Vue.prototype.$ENV_NOW = `${
ENV_NOW}`;
// 将$ENV_NOW设置为vue全局变量
}
次のコードを追加して、app.vueにデフォルトをエクスポートします
created() {
console.log(this.$ENV_NOW);
}
// 打印出 this.$ENV_NOW ，主要是为测试能否获取到这个变量
変更後にプロジェクトをパッケージ化してビルドする
yarn run build
# 构建项目
この時点で、プロジェクトのビルド後のファイルであるdistファイルが生成されます。
2.2 dockerfileを使用して、イメージを構築し、コンテナーを実行します
現在のディレクトリ内
vim dockerfile
# 创建并打开dockerfile
この時点でdockerfileファイルを編集します
FROM nginx
# 以nginx为基础镜像
COPY ./vue_app/dist/ /usr/share/nginx/html/
# 复制 ./vue_app/dist/ 到 /usr/share/nginx/html/
# /usr/share/nginx/html/为 nginx 默认的启动文件夹
CMD ["/bin/bash", "-c", "sed -i \"s@<html@<html env_now=\"$ENV\"@\" /usr/share/nginx/html/index.html; nginx -g \"daemon off;\""]
# 启动命令
# "sed -i \"s@<html@<html env_now=\"$ENV\"@\" /usr/share/nginx/html/index.html;"
# 这行代码是指将/usr/share/nginx/html/index.html中的<html 替换成 <html env_now=\"$ENV\"
# 也就是说，当docker run 时，index.html中的html标签就添加了这样一个属性
実行中は、dockerrunで変数ENVを渡すだけです。
2.3イメージを作成してコンテナを実行する
Dockerビルド-tnginx_vue。
docker build -t nginx_vue .
# 根据dockerfile来创建nginx_vue镜像
docker run -p 6090:80 -e ENV=’now_env’ -d -t nginx_vue
# 以nginx_vue为镜像运行容器并传入环境变量ENV=’now_env’
2.4テストの実行
この時点で、ローカルでlocalhost：6090にアクセスして、実行中のプロジェクトを確認できます。コンソールにnow_envが出力されていることを確認できます。つまり、プロジェクトにこの変数があります。
同時に、Elementsを確認すると、この時点で確認できます。このような属性は、htmlに動的に追加されます。
3詳細
実際、これを見て、ほとんどの学生はすでに練習のプロセスを理解していると思います。ブロガーはここで整理します。
（1）最終的な実装は、構築されたindex.htmlのhtmlタグに属性を追加し、動的に与えることです。この属性は、dockerの環境変数を取得するために値によって渡されます
（2）事前にhtmlでこの値を取得し、vueグローバルにコピーして、vueプロジェクトで取得できるようにします。
したがって、この実装はフレームワークに限定されず、Vue ReactAngularを使用できます。
4まとめ
ブロガーは実装後に実際にテストし、まったく問題はありませんでしたが、夜に考えていました。これはhotsnameを判断するよりもはるかに優れていますが、ホスト名に起因する欠陥を完全に解決します。ただし、htmlは、htmlの属性値を取得するように変更されます。 、変数をプロジェクトに直接動的に転送できる場合、それは素晴らしいことですが、この方法はブロガーによって達成されていません。主な理由は次のとおりです。
（1）ドッカーイメージはすでにプロジェクトです。ビルドされているため、現時点でプロジェクトはすでにビルドされており、動的に値を渡すことは困難です
書かれているように、ブロガーはプロジェクトを構築しないという考えを持っているようです。そして、プロジェクトの構築を開始し、ミラーが構築されたときに値を渡します。最初にこれを試してから、新しい進捗状況を記録してください