前端必须掌握的 docker 技能(1)
概述
作为一个前端,我觉得必须要学会使用 docker 干下面几件事:
- 部署前端应用
- 部署 nginx
- 给部署的 nginx 加上 https
- 使用 docker compose 进行部署
- 给 nginx 加上 redis
- 使用 kubernetes
下面我按照这个节奏一一研究一遍,把心得记录下来,供以后开发时参考,相信对其他人也有用。
部署前端应用
(安装 docker 的过程就略去了,请自行查看官方文档安装)
1.我们设置国内镜像,方便以后下载镜像文件。
1.点击屏幕上方的鲸鱼 docker 图标。
2.点击 Preferences。
3.点击 Deamon。
4.在 Registry mirrors 那里填上 https://registry.docker-cn.com
2.拉取 node 镜像。输入下面的命令远程拉取最新版本的 node 镜像。
docker pull node:latest
查看本地镜像有哪些:
docker images
3.在前端项目的主目录下建立 Dockerfile 文件,写入如下内容:
FROM node:latest
WORKDIR /home/app
COPY . .
RUN npm install
expose 8080
CMD npm run serve
// 使用最新的 node 镜像
// 设置工作目录为 /home/app
// 把当前目录下的文件全部复制到工作目录下面
// 在工作目录下面运行 npm install
// 暴露 8080 端口(注意:这个 8080 端口就是 npm run serve 的端口)
// 在 cmd 里面使用 npm run serve 命令(注意:这里需要用你自己项目中的命令)
4.我们并不需要把 node_modules 里面的文件复制到 docker 里面去,所以我们在前端项目的主目录下建立 .dockerignore 文件,并写入如下内容:
node_modules
5.上面只是准备工作,现在才正式开始。我们使用刚才建立好的 Dockerfile 文件给项目进行打包,建立一个镜像文件:
docker build -t docker-app:latest .
docker 内部会生成一份这个镜像文件,我们可以用docker images
查看。
6.用这个镜像文件创建一个实例并运行。
docker run -d -p 2001:8080 docker-app
// -d 意思是在后台运行
// -p 2001:8080 意思是把 docker 的 8080 端口连接到本机的 2001 端口
// 以后就可以通本机的 2001 端口访问 docker 的 8080 端口了
7.最后打开 localhost:2001 即可。
搞事
有时我们想进入 docker 的 bash 里面搞点事,那方法是运行如下命令即可:
docker exec -it [container_id] /bin/bash
那我们怎么得到这个容器 container_id 呢? 运行如下命令即可:
docker ps -a
那我们要怎么删除一个镜像/容器呢?
docker rmi -f [image_id]
docker rm -f [container_id]
那我们要怎么停止/开始一个容器呢?
docker stop [container_id]
docker start [container_id]
注意:本文的步骤显然不是正常部署的步骤,因为我们在 docker 里面使用的是 npm run dev 命令啊。所以实际上部署只需要把 dist 文件夹里面的内容 copy 进 docker 镜像里面去就可以了。
前端必须掌握的 docker 技能(1)的更多相关文章
- 前端必须掌握的 docker 技能(3)
概述 作为一个前端,我觉得必须要学会使用 docker 干下面几件事: 部署前端应用 部署 nginx 给部署的 nginx 加上 https 使用 docker compose 进行部署 给 ngi ...
- 前端必须掌握的 docker 技能(2)
概述 作为一个前端,我觉得必须要学会使用 docker 干下面几件事: 部署前端应用 部署 nginx 给部署的 nginx 加上 https 使用 docker compose 进行部署 给 ngi ...
- 将你的前端应用打包成docker镜像并部署到服务器?仅需一个脚本搞定
1.前言 前段时间,自己搞了个阿里云的服务器.想自己在上面折腾,但是不想因为自己瞎折腾而污染了现有的环境.毕竟,现在的阿里云已经没有免费的快照服务了.要想还原的话,最简单的办法就是重新装系统.而一旦重 ...
- web前端开发需要具备的技能
web前端开发需要具备以下7种技能: 1.页面标记(HTML) HTML页面固定,标签不多,相对来说学起来比较容易.编写HTML代码需遵循HTML代码规范(http://www.cnblogs.com ...
- 八卦某 G 的前端开发方式及流程--百度FEX前端nwind信息搜集神技能
他山之石,可以攻玉. 话说本人从毕业到现在一直在某 B 公司工作,前些年折腾过不少开发方式和工具,但总觉得或许有更好的方案,所以很好奇其它公司内部是如何工作的,我曾经浏览过某 Y 公司内部无所不包的 ...
- 前端必须掌握的 nginx 技能(4)
概述 作为一个前端,我觉得必须要学会使用 nginx 干下面几件事: 代理静态资源 设置反向代理(添加https) 设置缓存 设置 log 部署 smtp 服务 设置 redis 缓存(选) 下面我按 ...
- 前端必须掌握的 nginx 技能(3)
概述 作为一个前端,我觉得必须要学会使用 nginx 干下面几件事: 代理静态资源 设置反向代理(添加https) 设置缓存 设置 log 部署 smtp 服务 设置 redis 缓存(选) 下面我按 ...
- 前端必须掌握的 nginx 技能(2)
概述 作为一个前端,我觉得必须要学会使用 nginx 干下面几件事: 代理静态资源 设置反向代理(添加https) 设置缓存 设置 log 部署 smtp 服务 设置 redis 缓存(选) 下面我按 ...
- 前端必须掌握的 nginx 技能(1)
概述 作为一个前端,我觉得必须要学会使用 nginx 干下面几件事: 代理静态资源 设置反向代理(添加https) 设置缓存 设置 log 部署 smtp 服务 设置 redis 缓存(选) 下面我按 ...
随机推荐
- Vue.nextTick 的原理和用途
转载自https://segmentfault.com/a/1190000012861862 概览 官方文档说明: 用法: 在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法 ...
- oracle分页查询按日期排序失败问题
今天对已经上线的代码进行测试,结果发现分页是失效的,一度怀疑是前台页面分页失效,排查后发现是分页sql有问题,分页sql按日期排序,导致分页失败. 按日期排序,会造成相同的数据重复出现. 解决方案:在 ...
- IMAPd - Internet 邮件存取协议服务器
总览 /usr/etc/imapd 描述 imapd 是个支持 IMAP4rev1 远程邮件存取协议(由RFC2060定义)的服务器. imapd 是由internet服务器(参见 inetd(8)) ...
- laravel5.8 源码分析(1) Route
https://learnku.com/docs/laravel/5.8 源码路径 vendor\laravel\framework\src\Illuminate\Routing\Router.php ...
- PAT Basic 1067 试密码 (20 分)
当你试图登录某个系统却忘了密码时,系统一般只会允许你尝试有限多次,当超出允许次数时,账号就会被锁死.本题就请你实现这个小功能. 输入格式: 输入在第一行给出一个密码(长度不超过 20 的.不包含空格. ...
- canvas在高倍屏下变模糊的处理办法
因为canvas不是矢量图,而是像图片一样是位图模式的.如果不做Retina屏适配的话,例如二倍屏,浏览器就会以2个像素点的宽度来渲染一个像素,该canvas在Retina屏幕下相当于占据了2倍的空间 ...
- [ZJOI2014]力 题解
题目地址 洛谷P3338 Solution 第一道FFT的应用AC祭! 我们要求: \[E_j=\frac{F_j}{q_j}=\sum_{i<j}\frac{q_i}{(i-j)^2}-\su ...
- 负载均衡(四)Nginx负载均衡策略
一.Nginx的作用 1.反向代理 代理:转发请求的服务器,分代理和反向代理.代理一般指的是我们使用的DNS,反向代理是放在服务端的大家通常用Nginx来解决.实际应用中,由于服务端处于一个中心位置, ...
- Python之常用模二(时间、序列号等等)
一.time模块 表示时间的三种方式: 时间戳:数字(计算机能认识的) 时间字符串:t='2012-12-12' 结构化时间:time.struct_time(tm_year=2017, tm_mon ...
- 带 like 的字符串匹配查询
1.百分号通配符 '%' ,匹配任意长度的字符,甚至包括零字符 例:查询所有以 'a' 字母开头的水果,sql 语句如下 select f_id,f_name from fruits wher ...