用一首歌时间将 React 应用 Docker 化,成为前端 Star!
作者 | 前端劝退师
责编 | 郑丽媛
来源 | 前端劝退师(ID:quantuishi)
以前一直有疑问困扰着我:人人都在吹的Docker容器化,与前端有何关系?
然而在近两年的编程生涯,在每一次产品迭代中,渐渐体会到了容器化其魅力所在。
应用部署从刀耕火种,到DevOps崛起,原来不止前端在迅捷发展。接下来,我将用一首歌的时间,带大家真实的体验一番Docker容器化。
朴素的Dockerfile
首先准备一个有标准运行指令的Web应用,用脚手架creat-react-app或Vue CLI等生成的即可。
以下的Dockerfile不参杂其它依赖,争取做到都能看懂:
# 指定Node版本
FROM node:12.18.3
# 容器中应用程序的路径。将Web目录作为工作目录
WORKDIR /web# 将package.json 复制到 Docker 环境
COPY ./package.json /web/package.json# 安装依赖
RUN yarn# 将代码复制到Docker容器中的Web目录
COPY . /web/# 暴露容器内部访问端口,根据项目变动
EXPOSE 8080## 如果是Vue CLi,则换成 yarn serve
CMD ["npm", "start"]
是的,开发环境在Docker 部署,关键配置就那么几行。
此外,还需要添加一个.dockerignore文件,加快构建过程的速度
node_modules/**/*
build/**/*
.DS_Store
为应用构建Docker镜像
首先确认你的Dcoker 正在运行。
运行以下命令来构建Docker映像。react-docker 可以替换为你要为镜像命名的任何值。
docker build -t react-docker .
其中-t 为打标签的意思,执行完后将会看到:
Successfully built 137c69857dd0
Successfully tagged react-docker:latest
您的镜像已经嗷嗷待发。
运行Docker + React/Vue
现在,使用以下docker run命令, 通过Docker在端口3000上运行React应用。
docker run -p 3000:3000 react-docker
其中:前一个3000对应本机http://localhost:3000/,第二个3000则是Docker容器端口。
可以通过Dcoker ps查看容器信息
在Docker的Dashboard中也可以看到:
此时打开http://localhost:3000/就会看到熟悉又亲切的画面
到这里,你的一首歌的时间之Docker之旅就结束了。接下来的将是更标准化的流程,劝退劝退!
Docker Compose 标准化流程
将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-compose up -d --build
就能看到一样构建了:
生产环境下的Dockerfile
生产环境下需要nginx配置,在根目录先创建nginx.config
server {listen ${PORT:-80};server_name _;root /usr/share/nginx/html;index index.html;location / {try_files $$uri /index.html;}
}
让我们创建一个单独的Dockerfile,用于生产环境,称为Dockerfile.prod:
FROM node:12.18.3 AS builderWORKDIR /appENV PATH /app/node_modules/.bin:$PATH
COPY package.json ./
COPY package-lock.json ./# 前端项目构建命令 — npm ci 或 npm install
# http://www.gaoxiukun.com/wp/archives/509RUN npm ci
# React 应用需要react-script
RUN npm install react-scripts@3.4.1 -gCOPY . ./
RUN npm run build# 安装nginx
FROM nginx:1.17-alpine
RUN apk --no-cache add curl
RUN curl -L https://github.com/a8m/envsubst/releases/download/v1.1.0/envsubst-`uname -s`-`uname -m` -o envsubst && \chmod +x envsubst && \mv envsubst /usr/local/bin
COPY ./nginx.config /etc/nginx/nginx.template
CMD ["/bin/sh", "-c", "envsubst < /etc/nginx/nginx.template > /etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'"]COPY --from=builder /app/build /usr/share/nginx/html
因为Dockerfile.prod不是默认的执行文件,所以需要构建并标记:
docker build -f Dockerfile.prod -t sample:prod .
接下来执行docker run
docker run -it --rm -p 3000:80 sample:prod
-i: 以交互模式运行容器。
-t: 为容器重新分配一个伪输入终端,通常与 -i 同时使用。
--rm:在容器退出时自动清理容器内部的文件系统,不懂可忽略
-p: 指定端口。
成功运行:
在浏览器中导航到http://localhost:3000 以查看该应用程序。
接下来使用新的Docker Compose文件以及docker-compose.prod.yml进行测试:
version: '3.7'services:sample-prod:container_name: sample-prodbuild:context: .dockerfile: Dockerfile.prodports:- '3000:80'
启动容器:
docker-compose -f docker-compose.prod.yml up -d --build
在浏览器中再次进行校验。
结语
在以往,我对Docker容器化的概念,仅停留在了解。而真正实操中,也是被一群指令,配置给吓到劝退。
本文弱化了命令行参数,希望能让广大萌新们能先看懂,再去演练一番,举一反三,不再怕Docker,然后再去学习k8s相关。
Docker 在接下来的几年里,会逐渐成为开发的标配,希望大家能放下对运维领域的偏见,多多学习这些行业内的新标准与概念。
更多精彩推荐
☞文件系统:隐匿在 Linux 背后的机制
☞把人脑智能化后,能再创造出更强的人工智能吗?
☞5年5亿美金,华为昇腾如何争夺AI开发者?
☞GitHub 标星 20000+,国产 AI 开源从算法开始突破 | 专访商汤联合创始人林达华
☞下一代 IDE:Eclipse Che 究竟有什么奥秘?
☞BM发声,孙宇晨入场,国产公链集体进军DeFi
点分享点点赞点在看
用一首歌时间将 React 应用 Docker 化,成为前端 Star!相关推荐
- 如何命令行结束react程序_想要成为前端Star 吗?一首歌时间将React / Vue 应用Docker 化...
前言 以前一直有疑问困扰着我:人人都在吹的Docker容器化,与前端有何关系? 然而在近两年的编程生涯,在每一次产品迭代中,渐渐体会到了容器化其魅力所在. 应用部署从刀耕火种,到DevOps崛起,原来 ...
- docker web程序本地化_想要成为前端Star 吗?一首歌时间将React / Vue 应用Docker 化...
前言 以前一直有疑问困扰着我:人人都在吹的Docker容器化,与前端有何关系? 然而在近两年的编程生涯,在每一次产品迭代中,渐渐体会到了容器化其魅力所在. 应用部署从刀耕火种,到DevOps崛起,原来 ...
- java如何将两首歌按时间合成,用goldwave怎样把两首歌合并在一起
类型:音频处理大小:11.3M语言:中文 评分:4.6 标签: 立即下载 goldwave是一款非常好用功能强大的音频编辑软件,用户可以使用goldwave录制.编辑.转换音频,可以进行相应的音频处理 ...
- 想找首歌来表达心情!
想找首歌来表达此时没来由的情绪,烦闷,抑郁,自卑,悲观!!我不喜欢这种情绪,不喜欢情绪低落的自己.所以内心在努力挣扎,告诫自己不要被这种情绪控制!努力坚持到现在,鼓励性质的告诉自己:马上就下班了,回家 ...
- 单曲循环 翻译_有没有那么一首歌是你的单曲循环?
相信每个人的列表都有一首单曲循环 可能是歌手的声音打动了你 可能是歌词说出了你的心声 可能是旋律让你入耳难忘 可能是陪伴你走过一段难忘的岁月 还有很多很多 .................. 不论是 ...
- 适合做手机铃声的81首歌_“想下载这首歌作为你的手机铃声吗?”
最近,#十年来手机铃声的变化#的话题登上热搜榜,引起不少人对多年前铃声的"感慨".对于95后小编而言,再次听起2000年代的铃声旋律时,依然清(洗)晰(脑). 01.老鼠爱大米 发 ...
- 我喜欢的一首歌--《幸福的瞬间》
看了<薰衣草>就开始喜欢这首歌了,看的时候还会为了电视里男女主角痴情的爱情故事落泪,可见我还不成熟. 今天正当我和下班人群一起在572上被挤得快变形的时候,车厢里放起了这首歌,我差点以为是 ...
- 每首歌都保存着一份记忆
繁忙的日子,总有歌声伴随着我们,每首歌都保存着一份记忆... 周杰伦2001年9月新作<FANTASY>----简单爱 说不上为什么 我变得很主动 若爱上一个人 什么都会值得去做 我想 ...
- Python 爬取张国荣最火的 8 首歌,60000 评论看完泪奔!
今天是4月1日. 每年的这一天, 一部分人搜索枯肠想尽办法整蛊, 一部分人感怀四月该很好,倘若你还在. 甚至有人,用AI的方式来还原你. 但那终究不是你啊. 图源见水印 你走了16年了,那些当年在课桌 ...
最新文章
- Annotation之补充
- 微信小程序获取openid
- 读书笔记 --- [基础知识点] 小结3
- [蓝桥杯]回形取数-方向向量+模拟
- Centos7静态ip设置(亲测有效)
- python函数应用_python 函数应用
- 25条div+CSS编程提醒及小技巧整理
- GPU 编程 CPU 异同点_专业软件与CPU的性能相关性详细对比
- Pycharm初识JS
- 【专题5: 硬件设计】 之 【62.案例四:简易空气净化器,完整原理图】
- 优学院中国近现代史纲要试题及答案
- HTMLTestRunner测试报告定制
- 西藏计算机一级,西藏计算机等级考试级别
- 没那么简单,没那么困难
- 2.HTML元素、属性、标题
- pku 2251 Dungeon Master 基本BFS
- 指令在Vue.js 2.0中的变化
- php里面的箭头怎么打出来,PHP打印左右箭头图案的实现方法(代码示例)
- php html 字符串 转 数组 用于小程序转换
- 将最大位1000位的16进制转化位8进制(蓝桥杯)
热门文章
- vc 编译器的一些精典报错
- redis-cli 命令总结
- 事件---------2
- bcp: 给boost瘦身
- matlab 手工实现normalize函数 未定义与 ‘double‘ 类型的输入参数相对应的函数 ‘normalize‘
- 数值分析(第五版) 第一章知识点总结
- 解决pytorch安装过程中下载总是出错的问题
- python 多and or执行顺序
- linux正则表达式_【开发者成长】5 分钟搞定 Linux 正则表达式
- 剑指offer之连续子数组的最大和