探索Docker在前端开发中的应用一：背景

Docker with node

Docker是一项具备划时代意义的开源项目，它在服务端开发以及部署中大放异彩，本着对优秀技术的不断学习态度，很是建议将Docker做为你下一项学习的技术。

本文做为Docker在前端中应用的背景篇章，会对Docker及其优点作精简的介绍，而后列举一些前端开发、测试、部署过程当中遇到的问题，但愿能够借助Docker优雅地解决。

场景

1、在开发过程当中，有没有遇到过如下场景：

1. 须要本身配置proxy解决跨域请求问题
2. 接手一个新项目以后，想要跑起来，并无想象中的那么流畅，除了前端依赖，还要配置若干系统内容

   • npm i
   • npm start
   • Error XXX服务未配置
3. 一个Node服务(好比SSR、打印服务、普通的数据处理服务)，在部署的时候，脚本控制权并不在前端手中，容易出现一些配合问题
4. 后端项目须要在本地运行，你须要安装所有的后端环境，而后这些环境在你开发下一个项目的时候，你还在考虑如何能清理干净。

   • MySql
   • MongoDb
   • Java
   • PHP
   • Redis
   • Nginx
   • ...

2、在搭建团队基础服务过程当中，有没有遇到过如下场景：

1. 须要在服务器上部署一个项目要安装若干的基础服务
2. 你发现系统上已经存在了旧版本的服务，你不肯定升级该服务，会影响系统上的哪些应用，可是不升级，你的应用不支持安装

3、在学习过程当中，是否有过如下场景：

1. 搭建一个普通的博客，都须要花费大量时间安装一些基础服务：

   • PHP环境
   • Apache
   • 各类数据库服务
2. 若是有一天你不须要了，还要花费时间去清理
3. 项目开发完以后，还要考虑服务端的环境问题
4. 你的一个Demo项目，但愿在任何服务器都能快速部署

需求总结

咱们将咱们的需求汇总一下，咱们但愿的功能有：

1. 开发所需的非前端环境一键配置
2. 所需的服务方便配置、简单移除
3. 项目开发配置完成后，方便部署在不一样平台而且运行效果一致
4. 其余人接手项目后，可以快速搭建好环境，而且运行起项目

Docker介绍

Docker的官方化介绍，能够在其官网[1]中了解到，对于咱们来讲Docker就是一个将项目运行所需全部环境打包到一个虚拟化容器中的工具， 同时，借助Docker，咱们也能够很是方便的获取所需的依赖环境。

举个例子：个人项目须要在本地安装MySQL服务。

只须要在命令行使用Docker使用mariadb镜像启动一个容器便可。

docker run \
--name some-mariadb --rm \
-p 3306:3306 -e MYSQL_ROOT_PASSWORD=password \
mariadb:latest
复制代码

使用用户名root，密码：password便可成功链接MySQL。

docker mysql

若是想中止，直接按下Ctrl+\，服务又从电脑中移除，很是干净。

★

备注：为什么这里不是Ctrl+C来终止命令，能够参阅本文[3]

”

该命令中有几个参数具体分享一下：

• --rm 容器结束时，移除container，与之相对的有-d
• -p 映射容器端口到主机端口，主机端口:容器端口
• -e Env 环境变量
• -d --detach 后台运行，和--rm不能同时使用
• -v 挂载数据卷，bind的方式

接着启动数据库的例子，咱们会发现，在结束掉服务后，下次再启动会发现数据全没了，咱们若是但愿将本身的数据保存在本地，那么能够增长-v参数。

docker run \
--name some-mariadb --rm \
-p 3306:3306 -e MYSQL_ROOT_PASSWORD=password \
-v /you/data/path:/var/lib/mysql
mariadb:latest
复制代码

这样本地路径/you/data/path就会将MySQL产生的数据持久化保存了，每次启动MariaDB都会还原以前的数据了。

以上咱们便体验了Docker的一大特色快速部署，即快速将MySQL服务部署到你的电脑上，不管是Windows/OSX/Linux系统，都是一段命令搞定，大大节省了时间和精力。

这样在咱们的开发服务器上，只须要存储一些配置和数据文件，执行文件彻底交由Docker管理。

举个例子：我须要使用Nginx作一个接口转发

咱们须要在开发中须要用到该接口：https://yapi.thisjs.com/mock/21/antd/games，我须要使用nginx对其进行一些代理配置，这样咱们只须要建立一个.conf文件，而后使用Docker启动一个Nginx挂载该conf文件到conf.d/目录下便可。

# proxy.conf
复制代码server { listen 8080; location / { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header Cache-Control private; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'; proxy_pass yapi.thisjs.com/mock/21/ant… } } 复制代码

在配置目录下执行该命令

docker run \
--name proxy-server \
-v "$(pwd)/proxy.conf":/etc/nginx/conf.d/proxy.conf:ro \
-d -p 8080:8080 \
nginx
复制代码

这时候，咱们便可访问 http://localhost:8080/games，便可获取到所须要的数据。

当咱们开发/调试结束后，若是须要将nginx容器中止并移除能够参考如下命令。

# 查看正在运行中的container
docker ps
# 中止名称为 proxy-server 的container
docker stop proxy-server
# 删除名称为 proxy-server 的container
docker container rm proxy-server
复制代码

至此，Docker已经基本知足了咱们的两个需求：

1. 开发所需的非前端环境一键配置
2. 所需的服务方便配置、简单移除

可是尚未彻底达到，咱们但愿所需环境一键配置，而不是一键又一键的配置，所以但愿能在下一个篇章里介绍Docker更轻松维护服务的相关内容。

安装Docker

看到这，你可能尚未安装Docker，其实Docker安装很是的简单。好比Mac，只须要下载镜像而后直接安装便可：

安装Docker

其余系统的Docker安装都很是的简单，能够参考这篇文章介绍：

安装 Docker

安装完以后

安装完以后，不如尝试启动一个普通的前端项目。

docker run \
-p 80:80 --name react-demo \
--rm \
mrxf/craantdbasic:latest
复制代码

这是一个基于create react app的前端项目，启动以后直接访问 localhost便可看到页面。

结语

不能为了用Docker而用Docker，不然会出现Docker也成了咱们开发中的一项没有必要的服务。遇到问题，仍是要之前端的方式解决。

如下以2个场景进行分析：

1.开发中的代理请求

若是是单一的代理请求来解决跨域问题的场景，那么最佳方案是之前端的方案解决

在现代前端框架脚手架中都集成了很是方便的proxy方案，以Create React App[2]为例，就提供了http和https代理功能，在未eject的项目的package.json文件中增长一项配置便可。

"proxy": "http://url.to.poxy",
复制代码

Creact React App在执行eject以后，与其余基于Webpack的项目均可以经过配置webpack.config.js，在devServer中新增proxy便可。

proxy: {
    '/api': {
        target: 'http://localhost:3000',
        pathRewrite: {'^/api' : ''}
    }
}
复制代码

只有在遇到比较特殊的状况下，咱们才会去配置Nginx

1. 项目请求多个URL，咱们须要将某些地址作转发，以阻止其访问原来的地址。
2. 直播数据流地址

对于场景1，咱们须要Nginx + Hosts的配合来实现。首先修改Hosts将原来的访问地址转发到本地，而后使用nginx来将其指向目标地址。

{
    listen     80;
    server_name api.serverurl.com;
    location / {
        ...其余配置...
        proxy_pass http://127.0.0.1:4300;
    }
}
复制代码

2.前端项目部署问题

前端线上部署到底要不要用Docker？纯静态前端项目彻底不须要，由于前端项目更依赖网络资源和浏览器资源，所以常规场景下，CDN才是纯静态项目的部署方案。

附录

[1]Docker: Empowering App Development for Developers

[2]Proxying API Requests in Development

[3]Ctrl+C does not kill mysqld