前言之前一直被问题困扰：大家都在说的Docker容器化和前端有什么关系？然而，在这两年的编程生涯中，在每一次产品迭代中，我都逐渐体会到容器化的魅力。从刀耕火种到DevOps在应用部署中的兴起，事实证明，不仅仅是前端在快速发展。接下来，我将用一首歌的时间，为大家带来Docker容器化的真实体验。1.简单的Dockerfile首先准备一个带有标准运行指令的web应用，可以用脚手架creat-react-app或者VueCLI生成。下面的Dockerfile没有混入其他依赖，力求通俗易懂：#SpecifytheNodeversionFROMnode:12.18.3#应用在容器中的路径。使用web目录作为工作目录WORKDIR/web#将package.json复制到Docker环境COPY./package.json/web/package.json#安装依赖RUNyarn#将代码复制到Docker容器中的Web目录COPY./web/#暴露容器内部访问端口，根据项目更改EXPOSE8080##如果是VueCLi，换成yarnserveCMD["npm","start"]是的，部署好开发环境在Docker中，关键配置就那么几行。此外，您需要添加一个.dockerignore文件以加快构建过程node_modules/**/*build/**/*.DS_Store2。要为应用程序构建Docker映像，首先确保您的Docker正在运行。运行以下命令来构建Docker映像。react-docker可以替换为您想要命名图像的任何名称。dockerbuild-t反应泊坞窗。其中-t表示标记。执行后，你会看到：Successfullybuilt137c69857dd0Successfullytaggedreact-docker:latest你的镜像已经可以发布了。3.运行Docker+React/VueApp现在，使用以下dockerrun命令通过Docker在端口3000上运行React应用程序。dockerrun-p3000:3000react-docker其中：前3000对应本地http://localhost:3000/，第二个3000为Docker容器端口。可以通过Dockerps查看容器信息，也可以在DockerDashboard中看到：这时候打开http://localhost:3000/就会看到熟悉友好的画面。旅行结束了。下一步将是一个更加规范的流程，劝说劝说！4、使用DockerCompose标准化流程，在项目根目录添加docker-compose.yml文件：version:'3.7'services:sample:container_name:samplebuild:context:。dockerfile:Dockerfilevolumes:-'.:/app'-'/app/node_modules'ports:-3000:3000environment:-CHOKIDAR_USEPOLLING=true有了这个文件就不用一步步执行了，直接：docker-composeup-d--build看到一样的build：5.生产环境中的Dockerfile生产环境中需要配置nginx，先创建nginx.configserver{listen${PORT:-80};服务器名称_;根/usr/share/nginx/html；索引index.html；位置/{try_files$$uri/index.html;让我们为生产环境创建一个单独的Dockerfile，称为Dockerfile.prod:FROMnode:12.18.3ASbuilderWORKDIR/appENVPATH/app/node_modules/。bin:$PATHCOPYpackage.json./COPYpackage-lock.json./#前端项目构建命令——npmci或npminstall#http://www.gaoxiukun.com/wp/archives/509RUNnpmci#Required通过React应用程序react-scriptRUNnpminstallreact-scripts@3.4.1-gCOPY。./RUNnpmrunbuild#从nginx:1.17-al安装nginxpineRUNapk--no-cache添加curlRUNcurl-Lhttps://github.com/a8m/envsubst/releases/download/v1.1.0/envsubst-`uname-s`-`uname-m`-oenvsubst&&\chmod+xenvsubst&&\mvenvsubst/usr/local/binCOPY./nginx.config/etc/nginx/nginx.templateCMD["/bin/sh","-c","envsubst/etc/nginx/conf.d/default.conf&&nginx-g'daemonoff;'"]COPY--from=builder/app/build/usr/share/nginx/html因为Dockerfile.prod不是默认的执行文件，所以需要构建和标记：dockerbuild-fDockerfile.prod-tsample:prod。然后执行dockerrundockerrun-it--rm-p3000:80sample:prod-i:以交互方式运行容器-t:为容器重新分配一个伪输入终端，通常和-i一起使用。--rm：容器退出时自动清理容器内部的文件系统，不明白可以无视-p：指定端口。成功运行：在浏览器中导航到http://localhost:3000以查看应用程序。接下来，使用新的DockerCompose文件和docker-compose.prod.yml进行测试：version:'3.7'services:sample-prod:container_name:sample-prodbuild:context:.dockerfile:Dockerfile.prodports:-'3000:80'启动容器：docker-compose-fdocker-compose.prod.ymlup-d--build在浏览器中再次验证。??结语以前，我对Docker容器化的概念仅仅局限于理解。实际操作中，我也被一组指令和配置吓到，又被说服了。本文弱化了命令行参数，希望广大新手能先了解，再实践，举一反三，不再害怕Docker，再学习k8s相关。未来几年，Docker将逐渐成为开发的标配。希望大家能够放下对运维领域的成见，多了解这些行业的新标准和新概念。如果您觉得这篇内容对您很有启发，请您帮我三个小忙：点赞，让更多人看到这篇内容（如果不喜欢，都是耍流氓-_-）关注公众号“前端劝导老师”，不定期分享原创知识。也看看其他的文章，也可以来我的GitHub博客获取所有文章的源文件：前端说服指南：https://github.com/roger-hiro...一起来玩吧。~
