本文主要介绍使用docker在本地打包部署镜像的方法。 文章中详细介绍了示例代码。 对您的学习或工作有一定的参考学习价值。 如果需要的话可以关注下面小编学习学习
第一次在本地使用dockerphp打包部署镜像
首先我的电脑系统是MACOS 10.15.4
我安装的docker版本是v19.03.5
1、项目结构如下：
这是一个react项目网站镜像程序，打包后的静态资源路径为dist目录。
2.重点关注Dockerfile和docker/nginx.conf文件
1、Dockerfile是用于创建镜像的文本文件。 详细内容请参考链接：Docker Dockerfile
我的Dockerfile内容如下：
FROM nginx WORKDIR /usr/src/app/ COPY ./docker/nginx.conf /etc/nginx/conf.d/default.conf COPY ./dist /usr/share/nginx/html/ EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]
Dockerfile中的小写短语是命令，每个命令的含义解释如下：
2.docker/nginx.conf
server {
listen 80;
# gzip config
gzip on;
gzip_min_length 1k;
gzip_comp_level 9;
gzip_types text/plain text/css text/Javascript application/json application/javascript application/x-javascript application/XML;
gzip_vary on;
gzip_disable "MSIE [1-6].";
client_max_body_size 100m;
root /usr/share/nginx/html;
location / {
try_files $uri $uri/ /index.html;
}
location /api/ {
# 此处为后端地址
proxy_pass http://www.XXX.com/;
}
}
3、执行docker build命令制作镜像
我执行的命令是： docker bmUxbayAmUcuild -t mydocker 。
-t ：为镜像打一个标签，标签名为mydocker
别忘了前面有个点，意思是在当前路径下做镜像
4.执行docker run部署镜像
我执行的命令是： docker run -p php80:80 mydocker
-p 是指定映射到本机的端口
docker run -p 本地端口：镜像端口镜像名
5、打开localhost:80就可以看到项目了
第一次体验docker本地部署。 很多原理和docker命令都不太清楚，以后再学习吧~
我想补充一个小问题。 明天突然把镜像推送到公司私有云失败了。 是因为网络环境有问题，所以请同学帮忙推送。
我先将打包好的图片保存到本地：
docker save 10.10.10.52:5000/zhanwu-study/prod:4.1.2 > study.tar
然后通过钉钉将当前目录下生成的study.tar发送给朋友，他会将study.tar发送到本地，然后执行：
docker load < study.tar
更新版本（没有生成新的镜像，两个版本是同一个镜像）：
docker tag 10.10.10.52:5000/zhanwu-study/prod:4.1.2 10.10.10.52:5000/zhanwu-study/prod:4.1.3
然后推送到私有云：
docker push 10.10.10.52:5000/zhanwu-study/prod:4.1.3
至此，这篇关于使用docker打包部署镜像到本地的方法就介绍完了。 更多关于本地docker打包和部署镜像的内容网站镜像程序，请搜索我们之前的文章或者继续浏览下面的相关文章。 希望大家在以后的日子里多多支持我！
本文标题：如何使用docker打包部署镜像到本地
文章结构
少说话
上一家公司下班的时候，当时公司采用的技术架构，希望对有需要的同学有帮助。 需求是客户需要一个窗口售票软件。 之前向客户提供软件的公司因协议到期而不再提供服务。 因为提供服务的公司可能因为资金问题已经破产了，想要继续玩下去几乎是不可能的了。 只要找到我们公司就可以了。 让我们为他们提供开发新需求、升级系统等技术支持和服务。 但问题是哪些软件是用C#开发的。 而我们公司开发的微信公众号，除了懂C#的项目经理外，没有其他C#程序员。 而且网站应用程序，公司也看中了这个商机，想在其中长期发展。 会议讨论后放弃了C#网站应用程序，项目经理提供了另一个框架。 替换之前的C#窗口程序。
进入题外话的技术结构：
java+node-webkit（以下简称NW）+C#插件+HTML5
技术介绍：
一言以蔽之，我不会谈论 Java 的任何事情。 只提供socket，不提供页面，使用Netty。 将java开发的Web应用打包成桌面应用的关键就在这个NW。 NW是Chromium和node.js的结合体，通过它我们可以将基于chrome浏览器和node.js构建的Web应用程序打包成桌面应用程序，而且还可以跨平台。 显然，相对于传统的桌面应用，在特定领域使用html5+css3+js开发的Web应用更加简单高效，而且还可以使用node.js的功能，所以NW还是非常有利的。 如果您想获取相关信息，可以前往官方网站。 为什么NW还有C#插件？ 不是说被废弃了吗？ 这是因为有需要连接的硬件设备（打印机、门）。 因此需要通过C#连接设备，NW调用C#。 HTML5提供页面并向java请求数据。
综上所述，Java只负责处理业务和提供数据，NW是桌面应用程序外壳。 用于 NW 调用的 C# 对接设备。 HTML5 负责界面。
圆顶演示
由于java是独立的，因此演示中不包括Java部分。
准备：
要下载NW的运行环境，可以在官网下载NW环境（建议使用ie或者Microsoft Edge浏览器，谷歌会出现无法访问的情况）。 我这里使用的是v0.30.0版本。 需要注意的是，带sdk的版本是下载开发用的，不带sdk的版本是官方下载的。 （很多同学表示官网下载不了，我在下面的演示工程“NW-demo”中附上了对应版本的环境）在盘根目录下创建一个nwjs文件夹，将环境解压到里面。
原因是sdk版本可以通过按F12来调试，这是每个浏览器都自带的工具。 只是这个调试界面：
下载7-zip解压工具。 下载图标替换工具Resource Hacker。
OK，计划结束了，下载压缩工具和图标替换工具的目的是什么？ 读完NW你就会知道，所有的页面都必须放在app.zip中，而NW就是通过编译打包的app.zip。 生成 .exe 文件。 所以用它来开发一个打包工具。
我们将创建一个应用程序文件夹并创建以下文件：
具体的文件内容，我已经把这个demo提交到了码云的NW-demo上，html相关文件都放在了页面上。 需要修改的是package.json文件：
{
"main": "page/index.html", //这里配置你的欢迎页面。
"name": "nw-demo", //项目名称
"version": "0.1.0", //你的项目版本号
"description": "demo", //项目描述
"keywords": [
"demo",
"node-webkit"
],
"window": {
"title": "node-webkit demo", //系统内显示
"icon": "tbd.png", //窗体标
"toolbar": false,
"frame": false,
"fullscreen": false,
"width": 1200, //窗口宽度
"height": 700, //窗口高度
"min_width": 1200, //最小宽度
"min_height": 700 //最小高度
},
"webkit": {
"plugin": true,
"page-cache": false
},
"dependencies": {
"nsync": "0.0.3"
}
}
更详细的配置介绍，可以去官网查询。 这个配置对我来说已经足够了。 然后我们随意写一页。 我在这里找到了一个小工具页面，并将其放在该页面下方。 代码如下所示：
<html>
<head>
<meta charset="utf-8">
<link href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.9/theme-chalk/index.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.9/index.js"></script>
<script src="https://cdn.bootcss.com/lodash.js/4.17.11/lodash.min.js"></script>
</head>
<body>
<div id="app" style="padding-right: 25px;">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="集合A">
<el-input type="textarea" v-model="form.A" :rows="10"></el-input>
<el-collapse>
<el-collapse-item :title="ACount">
<div>{{ACollect}}</div>
</el-collapse-item>
</el-collapse>
</el-form-item>
<el-form-item label="集合B">
<el-input type="textarea" v-model="form.B" :rows="10"></el-input>
<el-collapse>
<el-collapse-item :title="BCount">
<div>{{BCollect}}</div>
</el-collapse-item>
</el-collapse>
</el-form-item>
<el-form-item label="计算方式">
<el-radio-group v-model="form.type" style="margin-top: 12px;">
<el-tooltip content="两个集合中都含有的元素" placement="bottom">
<el-radio label="jj">交集[*]</el-radio>
</el-tooltip>
<el-tooltip content="两个集合并在一起并去除其中重复元素的集合" placement="bottom">
<el-radio label="bj">并集[+]</el-radio>
</el-tooltip>
<el-tooltip content="第一个集合减去第二个集合所包含的元素" placement="bottom">
<el-radio label="cj">差集[-]</el-radio>
</el-tooltip>
</el-radio-group>
</el-form-item>
<el-form-item label="计算结果">
<el-collapse>
<el-collapse-item :title="resultText">
<div>{{result}}</div>
</el-collapse-item>
</el-collapse>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="cacl">计算</el-button>
<el-button @click="reset">重置</el-button>
</el-form-item>
</el-form>
</div>
<script>
window.app = new Vue({
el: '#app',
data: function() {
return {
form: {
A: '',
B: '',
type: 'jj'
},
result: [],
resultText: '点击下方计算按钮'
}
},
computed: {
ACount: function(){
var self = this;
var tmp = transform(self.form.A);
return '合计：' + tmp.length + '个';
},
ACollect: function(){
return transform(this.form.A);
},
BCount: function(){
var self = this;
var tmp = transform(self.form.B);
return '合计：' + tmp.length + '个';
},
BCollect: function(){
return transform(this.form.B);
}
},
methods: {
cacl: function(){
var self = this;
var A = transform(self.form.A);
var B = transform(self.form.B);
if(self.form.type === 'jj'){
// 交集[*]
self.result = _.intersection(A,B);
}else if(self.form.type === 'bj'){
// 并集[+]
self.result = _.uniq(_.union(A,B));
}else if(self.form.type === 'cj'){
// 差集[-]
self.result = _.difference(A,B);
}
self.resultText = self.result.length + '个';
},
reset: function(){
this.form.A = '';
this.form.B = '';
self.resultText = '点击下方计算按钮'
}
},
created: function () {
}
});
// 行列转换，去空格，去重复
function transform(arr){
var tmp = [];
try{
tmp = JSON.parse(arr);
}catch(e){
tmp = arr.split('n');
}
tmp = _.uniq(tmp);
tmp = _.remove(tmp, function(item){return (item+"").trim() != '';})
return tmp;
}
</script>
</body>
</html>
到这里就差不多了，但是我们不是在谈论开发打包工具。 这是为了方便开发，不用每次都自动打包，并替换loge。直接粘贴代码
:: 设定命令不显示，当需要显示时，可以将下行命令注释
::@echo off
:: 获取当前路径
set NOWPATH=%~dp0
:: APP的开发的路径
set SRC=app/*.*
:: 打包的EXE的名称
set TAG=Client
:: EXE名称说明
set EXE=%TAG%.exe
:: 压缩后的ZIP文件
set ZIP=%NOWPATH%%TAG%.zip
:: 重要: 设置7zip的压缩目录
set ZIPPATH="%NOWPATH%7-Zip"
:: 重要： 这里改成你的运行环境目录，需要注意的时调试时的运行环境带了JDK，非调试是没有JDK的
set TOPATH=C:nwjsnwjs-sdk-v0.30.0-win-x64
:: 重要: 这里是你的图标替换工具目录
set ICONPATH="%NOWPATH%Resource HackerResourceHacker.exe"
set ICON=app/icon.ico
:: 显示当前路径
echo 当前路径:%NOWPATH%
:: 显示开始压缩
echo 开始压缩文件
:: 删除已经压缩过的文件
del /F /S /Q %ZIP%
:: 开始压缩
%ZIPPATH%7z.exe a -tzip %ZIP% %NOWPATH%%SRC% -r
:: 显示开始压缩
echo 正在打包Exe
:: 进入运行环境目录
cd %TOPATH%
:: 重要：当你的目录和当前目录不在同一个盘时，需要运行下面的盘符命令，否则不需要
C:
:: 关闭已经打开的EXE
taskkill /f /im %EXE%
:: 删除历史生成的EXE，需要源程序已经关闭
del /F /S /Q %EXE%.temp
:: 打包生成EXE
copy /b nw.exe+%ZIP% %EXE%.temp
:: 删除中间生成的ZIP包
del /F /S /Q %ZIP%
:: 显示开始压缩
echo 正在替换图标
:: 等待Exe被完全关闭
cscript %NOWPATH%wait.vbs
:: 删除历史生成的EXE，需要源程序已经关闭
del /F /S /Q %EXE%
:: 替换图标
%ICONPATH% -open %EXE%.temp -save %EXE% -action addoverwrite -res %NOWPATH%%ICON% -mask ICONGROUP,IDR_MAINFRAME,
:: 删除历史生成的EXE，需要源程序已经关闭
del /F /S /Q %EXE%.temp
:: 创建文件夹
md %TOPATH%Config
:: 复制扩展文件到指定目录
xcopy %NOWPATH%Config %TOPATH%Config /e /s /y
echo 开始创建桌面快捷方式
::设置程序或文件的完整路径（必选）
set Program=%TOPATH%%EXE%
::设置快捷方式名称（必选）
set LnkName=%TAG%
::设置程序的工作路径，一般为程序主目录，此项若留空，脚本将自行分析路径
set WorkDir=%TOPATH%
::设置快捷方式显示的说明（可选）
set Desc=
if not defined WorkDir call:GetWorkDir "%Program%"
(echo Set WshShell=CreateObject("WScript.Shell"^)
echo strDesKtop=WshShell.SpecialFolders("DesKtop"^)
echo Set oShellLink=WshShell.CreateShortcut(strDesKtop^&"%LnkName%.lnk"^)
echo oShellLink.TargetPath="%Program%"
echo oShellLink.WorkingDirectory="%WorkDir%"
echo oShellLink.WindowStyle=3
echo oShellLink.Description="%Desc%"
echo oShellLink.Save
)>makelnk.vbs
echo 桌面快捷方式创建成功！
makelnk.vbs
del /f /q makelnk.vbs
:: 执行EXE,该EXE是发布之后的EXE文件，发布时仅仅需要EXE文件和 node-webkit 的运行环境即可
::%EXE%
::出错时取消下面注释，可以看到错误的内容
::pause
把这个bat文件放在app外，双击运行开始打包cmd界面，技术后桌面上会出现项目图标：
双击运行，进入我们编写的页面：
