如何命令行结束react程序_想要成为前端Star 吗?一首歌时间将React / Vue 应用Docker 化...
前言
以前一直有疑问困扰着我:人人都在吹的Docker
容器化,与前端有何关系?
然而在近两年的编程生涯,在每一次产品迭代中,渐渐体会到了容器化其魅力所在。
应用部署从刀耕火种,到DevOps
崛起,原来不止前端在迅捷发展。接下来,我将用一首歌的时间,带大家真实的体验一番Docker
容器化。
1. 朴素的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 serveCMD ["npm", "start"]
是的,开发环境在Docker
部署,关键配置就那么几行。
![](/assets/blank.gif)
此外,还需要添加一个.dockerignore
文件,加快构建过程的速度
node_modules/**/*build/**/*.DS_Store
2. 为应用构建Docker
镜像
首先确认你的Dcoker
正在运行。
运行以下命令来构建Docker
映像。react-docker
可以替换为你要为镜像命名的任何值。
docker build -t react-docker .
其中-t
为打标签的意思,执行完后将会看到:
![](/assets/blank.gif)
Successfully built 137c69857dd0Successfully tagged react-docker:latest
您的镜像已经嗷嗷待发。
3. 运行Docker
+ React/Vue
现在,使用以下docker run
命令, 通过Docker
在端口3000
上运行React
应用。
docker run -p 3000:3000 react-docker
其中:前一个 3000 对应本机http://localhost:3000/
,第二个 3000 则是Docker
容器端口。
![](/assets/blank.gif)
可以通过Dcoker ps
查看容器信息
在Docker
的Dashboard
中也可以看到:
![](/assets/blank.gif)
此时打开http://localhost:3000/
就会看到熟悉又亲切的画面
![](/assets/blank.gif)
到这里,你的一首歌的时间之Docker
之旅就结束了。接下来的将是更标准化的流程,劝退劝退!
4. Docker Compose
标准化流程
将docker-compose.yml
文件添加到项目根目录:
version: '3.7'services: sample: container_name: sample build: context: . dockerfile: Dockerfile volumes: - '.:/app' - '/app/node_modules' ports: - 3000:3000 environment: - CHOKIDAR_USEPOLLING=true
有了该文件,就不需要分步执行了,直接:
docker-compose up -d --build
![](/assets/blank.gif)
就能看到一样构建了:
![](/assets/blank.gif)
5. 生产环境下的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:$PATHCOPY package.json ./COPY package-lock.json ./# 前端项目构建命令 — npm ci 或 npm install# http://www.gaoxiukun.com/wp/archives/509RUN npm ci# React 应用需要react-scriptRUN npm install react-scripts@3.4.1 -gCOPY . ./RUN npm run build# 安装nginxFROM nginx:1.17-alpineRUN apk --no-cache add curlRUN 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/binCOPY ./nginx.config /etc/nginx/nginx.templateCMD ["/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 .
![](/assets/blank.gif)
接下来执行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-prod build: context: . dockerfile: Dockerfile.prod ports: - '3000:80'
启动容器:
docker-compose -f docker-compose.prod.yml up -d --build
在浏览器中再次进行校验。
![](/assets/blank.gif)
❤️ 结语
在以往,我对Docker
容器化的概念,仅停留在了解。而真正实操中,也是被一群指令,配置给吓到劝退。
本文弱化了命令行参数,希望能让广大萌新们能先看懂,再去演练一番,举一反三,不再怕Docker
,然后再去学习k8s
相关。
![](/assets/blank.gif)
Docker
在接下来的几年里,会逐渐成为开发的标配,希望大家能放下对运维领域的偏见,多多学习这些行业内的新标准与概念。
如果你觉得这篇内容对你挺有启发,我想邀请你帮我三个小忙:
- 点赞,让更多的人也能看到这篇内容(收藏不点赞,都是耍流氓 -_-)
- 关注公众号「前端劝退师」,不定期分享原创知识。
- 也看看其它文章
![](/assets/blank.gif)
劝退师个人微信:huab119,或公众号留言,我加你们
也可以来我的GitHub
博客里拿所有文章的源文件:
前端劝退指南:https://github.com/roger-hiro/BlogFN 一起玩耍呀。~
如何命令行结束react程序_想要成为前端Star 吗?一首歌时间将React / Vue 应用Docker 化...相关推荐
- c语言用命令行编译运行程序_使用C程序执行系统命令
c语言用命令行编译运行程序 Sometimes, we may need to execute Linux/Windows DOS commands through our C program. (N ...
- docker web程序本地化_想要成为前端Star 吗?一首歌时间将React / Vue 应用Docker 化...
前言 以前一直有疑问困扰着我:人人都在吹的Docker容器化,与前端有何关系? 然而在近两年的编程生涯,在每一次产品迭代中,渐渐体会到了容器化其魅力所在. 应用部署从刀耕火种,到DevOps崛起,原来 ...
- 命令行执行java程序_命令行执行
每当您旅行到一个居民说不同寻常的母语的国家时,您都可能会用一些基本的生存短语武装自己,例如"这要花多少钱?","这是哪种肉?"和"哪里在洗手间吗?&q ...
- 如何用命令行写java程序_如何用java实现doc命令行
如何用java实现doc命令行, dir显示当前所有目录下的文件 cd 文件目录 进入到该目录 cd ..退到上级目录,一面是我写的代码,调试了. 不过有点小bug就是当你进去的是文件就会提示空指针异 ...
- 用一首歌时间将 React 应用 Docker 化,成为前端 Star!
作者 | 前端劝退师 责编 | 郑丽媛 来源 | 前端劝退师(ID:quantuishi) 以前一直有疑问困扰着我:人人都在吹的Docker容器化,与前端有何关系? 然而在近两年的编程生涯,在每一次产 ...
- javase开发工具包中的什么命令负责运行应用程序_想当程序员?先搞懂JavaSE、JavaEE和JavaME之间的区别吧!...
Java是一门比较灵活的编程语言,且目前行业90%的应用软件服务器端都采用Java语言进行开发,而Java编程的相关技术人才始终是各领域技术型岗位不可或缺的. 作为0基础或者想转行当程序员最好还是先搞 ...
- 如何用命令行运行python程序_如何使用运行python代码命令行.exe从C应用程序?
下面的例子运行命令运行TCL脚本(我已经安装在我的计算机上了),您只需要替换命令就可以运行Python并添加脚本文件. 注意脚本文件名后面的"&exit"命令-这会使cmd ...
- C#中的样板命令行工具应用程序
目录 介绍 概念化这个混乱 处理命令行参数 异常处理 用户界面 过期文件处理 编码此混乱 MSBuild支持 用于在C#中构建命令行工具应用程序的入门代码.该样板代码为应用程序提供异常处理和命令行参数 ...
- 使用Chatkit构建Node.js命令行聊天应用程序
by Hugo 雨果 使用Chatkit构建Node.js命令行聊天应用程序 (Build a Node.js command-line chat application with Chatkit) ...
最新文章
- vcenter用到java吗_Vijava 学习笔记之 VCenter连接
- 【怎样写代码】偷窥高手 -- 反射技术(一):前期准备
- 江苏省事业单位计算机入面分数线,2020江苏事业单位统考周日笔试,考多少分进面?...
- nodejs接收get请求参数
- C#调用百度地图API入门解决BMap未定义问题
- Docker-构建/启停容器镜像及常用命令介绍
- PyTorch 1.0 中文文档:torch.hub
- 移植busybox构建最小根文件系统
- centos7按报错dracut
- 学java后学python,宁波学习java还是python(孩子学Python怎么样)
- javweb音乐网站_音乐网站javaweb源码
- java代码对比工具_代码比较工具(Diffuse)
- GP数据库锁表如何解锁
- C语言-快速排序算法-原理-详解(完整代码)
- python图像质量评价_OpenCV--Python 图像质量评价.docx
- 计算机可以关闭家庭组,win10系统禁用(关闭)家庭组功能的具体方法
- 苹果 python蚂蚁森林自动收能量_蚂蚁森林自动收能量的最新脚本
- 国家计算机病毒中心发现篡改IE的恶意木马
- 不经一番寒彻骨,那有冰冻三尺,那有不经波折的人生?
- 深入分布式缓存:微博是如何应对日访问量百亿级的缓存架构设计
热门文章
- Chrome Cookie SameSite 属性设置
- C++常见面试题(2019年校招总结)
- C++学习之路 | PTA乙级—— 1057 数零壹 (20 分)(精简)
- vscode php断点,VSCode中设置断点调试PHP(示例代码)
- axios vue 回调函数_前端Vue 面试题大全
- ThreadX应用开发笔记之二:移植ThreadX到STM32H7平台
- spring boot controller 增加指定前缀的两种方法
- 微软开源自动机器学习工具 – NNI安装与使用
- 域控下发脚本_域环境下做到单用户登陆控制脚本
- smbus协议的command_SMBus总线概述