概述

作为一个前端,我觉得必须要学会使用 docker 干下面几件事:

  1. 部署前端应用
  2. 部署 nginx
  3. 给部署的 nginx 加上 https
  4. 使用 docker compose 进行部署
  5. 给 nginx 加上 redis
  6. 使用 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)的更多相关文章

  1. 前端必须掌握的 docker 技能(3)

    概述 作为一个前端,我觉得必须要学会使用 docker 干下面几件事: 部署前端应用 部署 nginx 给部署的 nginx 加上 https 使用 docker compose 进行部署 给 ngi ...

  2. 前端必须掌握的 docker 技能(2)

    概述 作为一个前端,我觉得必须要学会使用 docker 干下面几件事: 部署前端应用 部署 nginx 给部署的 nginx 加上 https 使用 docker compose 进行部署 给 ngi ...

  3. 将你的前端应用打包成docker镜像并部署到服务器?仅需一个脚本搞定

    1.前言 前段时间,自己搞了个阿里云的服务器.想自己在上面折腾,但是不想因为自己瞎折腾而污染了现有的环境.毕竟,现在的阿里云已经没有免费的快照服务了.要想还原的话,最简单的办法就是重新装系统.而一旦重 ...

  4. web前端开发需要具备的技能

    web前端开发需要具备以下7种技能: 1.页面标记(HTML) HTML页面固定,标签不多,相对来说学起来比较容易.编写HTML代码需遵循HTML代码规范(http://www.cnblogs.com ...

  5. 八卦某 G 的前端开发方式及流程--百度FEX前端nwind信息搜集神技能

    他山之石,可以攻玉. 话说本人从毕业到现在一直在某 B 公司工作,前些年折腾过不少开发方式和工具,但总觉得或许有更好的方案,所以很好奇其它公司内部是如何工作的,我曾经浏览过某 Y 公司内部无所不包的 ...

  6. 前端必须掌握的 nginx 技能(4)

    概述 作为一个前端,我觉得必须要学会使用 nginx 干下面几件事: 代理静态资源 设置反向代理(添加https) 设置缓存 设置 log 部署 smtp 服务 设置 redis 缓存(选) 下面我按 ...

  7. 前端必须掌握的 nginx 技能(3)

    概述 作为一个前端,我觉得必须要学会使用 nginx 干下面几件事: 代理静态资源 设置反向代理(添加https) 设置缓存 设置 log 部署 smtp 服务 设置 redis 缓存(选) 下面我按 ...

  8. 前端必须掌握的 nginx 技能(2)

    概述 作为一个前端,我觉得必须要学会使用 nginx 干下面几件事: 代理静态资源 设置反向代理(添加https) 设置缓存 设置 log 部署 smtp 服务 设置 redis 缓存(选) 下面我按 ...

  9. 前端必须掌握的 nginx 技能(1)

    概述 作为一个前端,我觉得必须要学会使用 nginx 干下面几件事: 代理静态资源 设置反向代理(添加https) 设置缓存 设置 log 部署 smtp 服务 设置 redis 缓存(选) 下面我按 ...

随机推荐

  1. 响应式前端框架Bootstrap系列(11)分页

    分页功能已经封装成一个独立的js文件,也是用bs完成的,名称为bootstrap-paginator.js. 使用前先导入文件 : <script src="../libs/boots ...

  2. css的样式问题

    项目里面遇到一个布局: 然后侧边栏菜单的高度要随着内容的高度变化而变化:所以在这里贴一下代码:效果如下 <!DOCTYPE html> <html lang="en&quo ...

  3. Solr IK分词器配置

    下载地址:https://search.maven.org/search?q=com.github.magese 分词器配置: 参考:https://www.cnblogs.com/mengjinlu ...

  4. linux ssh连接超时断连设置

    以下均针对redhat6.5系统进行说明. 一.设置ssh超时断连 使用root用户,编辑/etc/profile文件,在 HOSTNAME='/bin/hostname' HISTIZE=30 后增 ...

  5. AIX中物理卷管理

    1.物理卷管理   1.1物理卷区域的分布 按照磁头在硬盘上的读写速率不同可以把硬盘划分成几个不同级别的区域.因此逻辑卷对应的PP在哪一个级别的区域上,对逻辑卷的读写速率影响很大. 硬盘的截面分为5个 ...

  6. 洛谷P2401 不等数列 题解

    可食用的题目链接 题解: 有题目得:这个题有巧做法而不是暴力模拟.废话 这个题看着像一道dp,因为可以由前一种(数据更小的推出数据更大的)推出后一种. 我们设已经得到了n-1个数的总方法(1~n-1) ...

  7. Struts 2 配置Action详解_java - JAVA

    文章来源:嗨学网 敏而好学论坛www.piaodoo.com 欢迎大家相互学习 实现了Action处理类之后,就可以在struts.xml中配置该Action,从而让Struts 2框架知道哪个Act ...

  8. 【Spring】Spring-Session-Data-Redis实现session共享

    前言 在开发中遇到一个关于用户体验的问题,每次当运维进行更新重启服务器时,都会导致会员平台中已登录的用户掉线.这是因为每个用户的会话信息及状态都是由session来保存的,而session对象是由服务 ...

  9. hdu 1724 : Ellipse 【Simpson积分】

    题目链接 题意:给出椭圆方程中的a和b,再给出l.r,求l到r的积分的二倍. 输出时要求精度控制为保留到小数点后3位,如下代码中,eps设为1e-9 1e-8时均TLE,1e-4可以AC,1e-3会W ...

  10. c# 谷歌动态口令对接

    https://www.cnblogs.com/easyauthor/p/11054869.html Google 身份验证器与两步验证功能配合,可在您登录 Google 帐户时为您平添一重安全保障. ...