docker 搭建前端开发环境不完全指南

AnthonyHan 发布于2019-06-28 16:36 / 1648人阅读

摘要：本文需要对和现代前端开发模式有一定了解入门可以参考入门教程不同系统请自行安装环境初始化项目目前网上找到的搭建前端开发环境的资料都比较老了所以有了此篇文章创建项目安装依赖的过程可以直接停止因为我们可以在环境中安装依赖在中安装依

本文需要对docker 和现代前端开发模式有一定了解, docker入门可以参考 docker入门教程
不同系统请自行安装docker环境

初始化项目

目前网上找到的docker 搭建前端开发环境的资料都比较老了, 所以有了此篇文章

docker --version
Docker version 17.09.1-ce, build 19e2cf6

创建项目:

create-react-app my-project-react

安装依赖的过程可以直接ctrl-c停止, 因为我们可以在docker环境中安装依赖

在docker 中安装依赖

拉取docker image, 直接采用node镜像

docker pull node:8.11.4-stretch

下载完成后docker image ls可以查看已经在本地image:

cd my-project-react
docker run  -v `pwd`:/workspace -w /workspace --privileged=true node:8.11.4-stretch yarn

命令具体下文解释
install速度慢的, 可以添加.npmrc 和 .yarnrc文件

registry "https://registry.npm.taobao.org"
sass_binary_site "https://npm.taobao.org/mirrors/node-sass/"
phantomjs_cdnurl "http://cnpmjs.org/downloads"
electron_mirror "https://npm.taobao.org/mirrors/electron/"
sqlite3_binary_host_mirror "https://foxgis.oss-cn-shanghai.aliyuncs.com/"
profiler_binary_host_mirror "https://npm.taobao.org/mirrors/node-inspector/"
chromedriver_cdnurl "https://cdn.npm.taobao.org/dist/chromedriver"

在docker中运行

cd my-project-react

docker run -it -v `pwd`:/workspace -w /workspace -p 8000:8000 --privileged=true node:8.11.4-stretch yarn start

命令比较长, 逐段解释
docker run -it node:8.11.4-stretch
以node:8.11.4-stretch这个image 运行 docker container, -it 表示进入交互式终端;

-v `pwd`:/workspace
稍微熟悉shell脚本的就知道, pwd代表当前目录,pwd反引号代表执行pwd命令, 并输出, 作用就是将当期项目目录挂载到docker 容器中的 /workspace 目录;

-w /workspace --privileged=true
-w 指定工作目录为 /workspace(容器中), --privileged=true, 以防万一, 获取容器的root权限;

-p 8000:8000
将运行中容器的8000端口(项目运行端口)映射到主机的8000端口, 注意, 这两个端口必须一致, 否则热更新有问题.本地localhost:8000无法打开网页, 请先吧webpack-dev-server中host配置改为0.0.0, 再查看本机8000端口占用情况;

yarn start
以开发模式运行项目, 命令根据自己项目实际情况而定.

当然运行run命令也可以不加上 -it 参数, 直接运行, 这样的缺点是无法直接ctrl-c停止运行, 停止container 需要使用 docker container stop containerId命令

在docker中build

以上步骤都ok, build 过程就很简单了, 只需要把 yarn start 命令改成yarn build 即可, 也不需要端口.

docker run -v `pwd`:/workspace -w /workspace  --privileged=true node:8.11.4-stretch yarn build

云服务器 GPU云服务器 docker搭建开发环境前端开发环境搭建 docker环境搭建 docker 打造开发环境

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/27435.html

docker 搭建前端开发环境不完全指南

摘要：本文需要对和现代前端开发模式有一定了解入门可以参考入门教程不同系统请自行安装环境初始化项目目前网上找到的搭建前端开发环境的资料都比较老了所以有了此篇文章创建项目安装依赖的过程可以直接停止因为我们可以在环境中安装依赖在中安装依本文需要对docker 和现代前端开发模式有一定了解, docker入门可以参考 docker入门教程不同系统请自行安装docker环境初始化项目目前网上找到...

airborne007 2019-08-23 11:44 评论0 收藏0
网站部署

摘要：就鹿晗宣布恋情导致微博宕机事件浅谈大型网站高可用性架构中午吃饭刷着刷着微博发现微博突然挂了。用户在使用浏览器访问一个网站时需要先通过协议向服务器发送请求，之后服务器返回文件与响应信息。 webpack：从入门到真实项目配置自从出现模块化以后，大家可以将原本一坨代码分离到个个模块中，但是由此引发了一个问题。每个 JS 文件都需要从服务器去拿，由此会导致加载速度变慢。Webpack 最主...

endless_road 2019-06-24 17:57 评论0 收藏0
CI Weekly #3 | 关于微服务、Docker 实践与 DevOps 指南

摘要：围绕软件工程效率提升进行一系列技术内容分享，包括国内外持续集成持续交付，持续部署自动化测试等实践教程工具与资源，以及一些工程师文化相关的程序员。划分了数据库日志安全监控配置管理云服务等个大类，个工具。 CI Weekly 围绕『软件工程效率提升』进行一系列技术内容分享，包括国内外持续集成、持续交付，持续部署、自动化测试、 DevOps 等实践教程、工具与资源，以及一些工程师文化相关...

monw3c 2019-06-28 17:46 评论0 收藏0
手把手教你搭APM之Skywalking搭建指南(支持Java/C#/Node.js)

摘要：通过跟踪请求的处理过程，来对应用系统在前后端处理服务端调用的性能消耗进行跟踪，关于的介绍可以看这个链接，大规模分布式系统的跟踪系统作者刀把五链接来源知乎著作权归作者所有。手把手教你搭APM之Skywalking 前言什么是APM?全称:Application Performance Management 可以参考这里: 现代APM体系，基本都是参考Google的Dapper（大规模...

ingood 2019-08-19 11:13 评论0 收藏0
基于 Docker 搭建 TensorFlow 开发环境

摘要：它是目前最流行的容器解决方案。提供一次性的环境。端驻守在后台，称之为。入门指南简介是一个使用数据流图进行数值计算的开放源代码软件库。学习资料官网中文社区官方文档中文版极客学院什么是数据流图数据流图用结点和线的有向图来描述数学计算。转载需经本人同意且标注本文原始地址：https://zhaomenghuan.github.i... 前言第一次听到 Docker 这个词，是两年前找实...

tianhang 2019-06-28 16:27 评论0 收藏0