| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
cxzy2008
5年前发布

搭建前端开发环境——docker篇

   <h3><strong>一、解决痛点</strong></h3>    <ol>     <li> <p>免搭建前端静态环境</p> </li>     <li> <p>分支切换,无需重新启动编译( package.json 或 gulpfile.js 文件改变除外)</p> </li>     <li> <p>nginx 可自行配置,满足不同项目的需求</p> </li>    </ol>    <h3><strong>二、前端静态搭建思路</strong></h3>    <p>基于 ubuntu 系统环境,利用 nginx 静态资源服务器经过 docker 暴露出来的端口进行请求转发,这样后端的开发机上面只需要安装 docker 就能够访问前端的静态资源,不需要访问前端开发机。</p>    <h3><strong>三、具体解决方案</strong></h3>    <ol>     <li> <p>用 Kitematic 客户端实现跨平台运行 Docker</p> </li>     <li> <p>用端口映射预览 Docker 里的文件</p> </li>     <li> <p>用 nginx + 端口映射编辑 Docker 里的文件</p> </li>     <li> <p>配置一个通用的 Image(镜像)</p> </li>    </ol>    <p>这里面有几个概念需要先解释一下。</p>    <p>首先, Kitematic 是一个 Docker GUI ,配置非常方便。</p>    <p>其次,Docker 中最重要的三个概念是 Container(容器)、Image(镜像)和 Volume(卷)。</p>    <p>Image 是静态内容,如果你要把某个 Image 跑起来,那就需要一个 Container。这里面有一点很重要:Container 中所做的改动不会保存到 Image。如果需要保存改动,很简单,执行 docker commit ContainerID TAG 即可,类似于 git 的 commit</p>    <p>如果不想使用 commit 仍想保存文件,docker 也提供了一个方法:使用 Volume。</p>    <p>Volume 就是专门存放数据的文件夹,启动 Image 时可以挂载一个或多个 Volume,Volume 中的数据独立于 Image,重启不会丢失。</p>    <p>最后说端口映射。前面说过,Docker 可以看做一个虚拟机,你的所有文件都在里面。如果你在 Container 中运行一个服务器,监听 127.0.0.1:8000 ,从你自己的机器上直接访问 http://127.0.0.1:8000 是不行的,因为 Container 和你的机器是两个不同的环境。</p>    <p>那怎么办呢?我们先来看一个大家都熟悉的问题。</p>    <p>日常开发中我们经常需要让同事预览网页效果,常用的方法是监听 0.0.0.0:8000 ,然后让同事连接同一个局域网,访问 http://你的机器IP:8000 即可。</p>    <p>Container 的问题非常相似,只不过我们自己变成了“同事”,需要访问 Docker 内部的网页。看起来只要拿到 Container 的 IP 问题就解决了。</p>    <p>幸运的是,Container 确实有 IP。</p>    <p>通常情况下这个 IP 是 192.168.99.100 (利用 Kitematic 启动 docker),只能从 Container 的宿主机(也就是运行 Docker 的机器)访问。不过 Container 的情况有些特别,它只关联了 IP,没有关联端口。因此如果想要访问 Container 内部的端口(比如 8000),你需要手动配置端口映射,把 Container 内部的端口映射到 IP 上。</p>    <h3><strong>四、动手</strong></h3>    <p>1. 下载 Docker Toolbox</p>    <p>Docker Toolbox 支持 Windows 和 Mac OS,可以到 <a href="/misc/goto?guid=4959673896733712805" rel="nofollow,noindex">官网</a> 下载安装,耗时较严重,建议找直接找下下好的包。</p>    <p>安装完毕之后打开 Kitematic,注册一个 Docker Hub 账号,方便之后的操作。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/6529451153416206d94a7c864b415ad8.jpg"></p>    <p>2. 下载 Ubuntu 镜像</p>    <p>在 Katematic 里面的搜索 Ubuntu</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/e407716ff338c342ac7509c740d26843.jpg"></p>    <p>选择第二排第一个,点击 create 按钮。</p>    <p>这里插一句, fuck GFW ,100M的文件能花两个小时下载,也是醉了。</p>    <p>下载完成后,在 Kitematic 左侧的 Container 列表中选择 ubuntu,然后点击上方的“START”按钮执行。点击“EXEC”可以进入系统命令行,输入 su 开启 root 权限。</p>    <p>这个时候,可以点击 Kitematic 右上角的“Settings”,点击“Ports”,你会看到一个 IP 地址,通常情况下是 192.168.99.100。打开自己的电脑的命令行,输入 ping 192.168.99.100,应该是通的。</p>    <p>3. 常规初始化工作</p>    <p>受够了渣下载速度,决定换源。采用的是中科大的源,你也可以尝试阿里云的源,速度都不错~</p>    <pre>  <code class="language-groovy">sed -i 's/archive.ubuntu.com/mirrors.ustc.edu.cn/g' /etc/apt/sources.list  apt-get update</code></pre>    <p>先安装必要的编辑器以及路径补全:</p>    <p>apt-get install vim bash-completion</p>    <p>其它的工具可以自行添加</p>    <p>4. 安装nginx以及nvm</p>    <p>nvm 是一个 node 版本管理器,利用它可以进行多个node版本的管理。</p>    <p>在开启root权限的终端输入:</p>    <pre>  <code class="language-groovy">apt-get update  apt-get install nginx  apt-get install curl  curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | bash  source ~/.bashrc  nvm install node</code></pre>    <p>安装完成不忙做nginx配置,我们需要等其挂载数据卷之后,再做nginx配置文件修改。</p>    <p>nvm 可以采用国内的淘宝源,速度比较快。</p>    <p>5. 导出image</p>    <p>在 mac 平台上面可以直接操作 Katematic 进行端口映射配置,但在 windows 平台上面只能通过 命令行 进行配置。挂载卷目前只能通过 命令行 进行配置。基于这种情况,我们统一利用 命令行 来配置。</p>    <p>首先, commit 。点击 Kitematic 左下角 “DOCKER CLI”,执行:</p>    <p>docker ps</p>    <p>类似于如下的输出:</p>    <pre>  <code class="language-groovy">➜  ~ docker ps  CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS                                                                                      NAMES  b357a78dc95e        f753707788c5        "/bin/bash"         3 days ago          Up 4 seconds        0.0.0.0:80->80/tcp, 0.0.0.0:443->443/tcp, 0.0.0.0:8080->8080/tcp, 0.0.0.0:8088->8088/tcp   iwjwdocker</code></pre>    <p>copy 出 container id ,这里是 b357a78dc95e 。</p>    <p>然后执行:</p>    <p>docker commit b357a78dc95e username/imagename</p>    <p>接下来,导出Image</p>    <p>docker export b357a78dc95e -o ubuntu.tar</p>    <p>查看你的个人目录。mac上面就是 /Users/你的用户名 ,就能找到 ubuntu.tar 文件。</p>    <p>接下来,我们会新建一个 image,在这个 image 上面进行整个的配置。</p>    <p>6. 配置端口映射以及挂载卷</p>    <p>配置流程:</p>    <ol>     <li> <p>在 Kitematic 中点击左下角“DOCKER CLI”打开 Docker 命令行</p> </li>     <li> <p>输入命令docker import,从文件夹中直接把 ubuntu 文件拖拽到命令行中(注意 ubuntu 文件路径中不能有中文,如果有,先把文件移动到另一个纯英文路径的文件夹中)</p> </li>     <li> <p>输入命令docker images,复制出镜像的 IMAGE ID(类似b357a78dc95e)</p> </li>     <li> <p>最重要的一步,输入命令:</p> </li>    </ol>    <pre>  <code class="language-groovy">docker run -t -i --privileged -p 80:80/tcp \      -p 443:443/tcp -p 8088:8088/tcp \      -p 8000:8000/tcp -p 8080:8080/tcp -d --name iwjw \      -v /Users/aaaa/test:/static \      -v /Users/aaa/nginxconf:/etc/nginx \      -v /Users/aaa/www:/www  IMAGEID \      /bin/bash</code></pre>    <p>解释一下上面的命令行:</p>    <ul>     <li> <p>-p 80:80/tcp :docker基于 TCP 协议暴露 80 端口</p> </li>     <li> <p>--name iwjw :在 Katematic 显示这个 image 的名称为 iwjw</p> </li>     <li> <p>-v /Users/aaaa/test:/static :将 /Users/aaaa/test 这个文件夹挂载到 docker 内Ubuntu系统的 /static 文件夹。简单说来,就是在docker命令行内 进入 /static 文件夹,能访问到宿主机(本人电脑)中的 /Users/aaaa/test 文件夹。</p> </li>     <li> <p>注意:挂载 /Users/aaaa/test 这个文件夹是用来存放 静态资源代码,挂载 /Users/aaa/nginxconf 是用来编写 nginx 配置文件的,挂载 /Users/aaa/www 可以用来存放一些自动化脚本</p> </li>    </ul>    <p>7. 根据自己的项目进行个性化配置</p>    <p>个性化配置:</p>    <ol>     <li> <p>nginx</p> </li>     <li> <p>运行脚本编写,可以考虑放在 /www 文件夹里进行管理。</p> </li>    </ol>    <p>shell脚本类似如下:</p>    <pre>  <code class="language-groovy">function init() {    nginx    npm install gulp -g    npm install  }  # 打开命令行提示    echo " -aaainit 进入 aaa 文件夹,并初始化aaa项目"  echo " -aaa 进入 aaa 文件夹,并初始化aaa项目"  echo " -h 帮助"    while [ -n "$1" ]  do      case "$1" in      "-aaainit")          echo "进入 aaa 文件夹,并初始化运行 aaa 项目"            cd /static/aaa          init          npm run start            ;;      "-aaa")          echo "进入 aaa 文件夹,并运行 aaa 项目"            cd /static/aaa          npm run start            ;;        "-h")          echo " -aaainit 进入 aaa 文件夹,并初始化aaa项目"          echo " -aaa 进入 aaa 文件夹,并初始化aaa项目"          echo " -h 帮助"          ;;      esac      shift  done</code></pre>    <h3><strong>五、结语</strong></h3>    <p>基本上,完成上面的docker配置,后端就可以自己在前端代码的分支进行自己接口的测试了。</p>    <p>引入docker之后,可以大大减少前后端联调的时间,从而加快开发进度。</p>    <p> </p>    <p> </p>    <p>来自:https://segmentfault.com/a/1190000007336706</p>    <p> </p>    
 本文由用户 cxzy2008 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
 转载本站原创文章,请注明出处,并保留原始链接、图片水印。
 本站是一个以用户分享为主的开源技术平台,欢迎各类分享!
 本文地址:https://www.open-open.com/lib/view/open1477987144177.html
Docker 前端开发