概述

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

  1. 部署前端应用
  2. 部署 nginx
  3. 给部署的 nginx 加上 https
  4. 使用 docker compose 进行部署
  5. 给 nginx 加上 redis
  6. 使用 kubernetes

下面我按照这个节奏一一研究一遍,把心得记录下来,供以后开发时参考,相信对其他人也有用。

参考资料:

docker nginx

Beginner’s Guide

注意:因为我正在申请域名和云服务器,所以暂时还不能给部署的 nginx 加上 https。

使用 docker compose 进行部署

在前面我们使用 docker 部署了一个 nodejs 的应用,还部署了一个 nginx。启动的时候还需要分开启动,非常麻烦,其实我们可以一键进行部署和启动的。这就是 docker-compose。

首先来说下我们的目标:

  1. 使用 docker-compose 同时部署 nodejs 和 nginx
  2. 挂载 src 目录,实现本地开发 src,远程自动热更新(本地不需要搭建环境)
  3. 挂载 nginx 配置,实现本地修改 nginx 配置

步骤

1.作为示例,我们使用使用以下命令创建一个新的 vue 项目:

vue create vue-demo

2.在主目录文件夹下面建立 Dockerfile 和 .dockerignore 文件:

// Dockerfile
FROM node:latest
WORKDIR /app/vue-demo
COPY . /app/vue-demo
RUN npm install
CMD npm run serve // .dockerignore
node_modules

3.编写 docker-compose 文件,示例如下:

version: '3.7'
services:
web:
build:
context: ./
dockerfile: ./Dockerfile
image: "vue-demo"
ports:
- "5431:8080"
volumes:
- ./Volumes/src:/app/vue-demo/src
nginx:
image: "nginx"
ports:
- "5432:80"
volumes:
- ./Volumes/default.conf:/etc/nginx/conf.d/default.conf // version 表示用什么版本的 docker-compose
// web 和 nginx 是我们自己取的名字
// 我们用 build 来指定 dockerfile,注意这里需要先指定 context 为主目录
// 我们指定本机的 5431 端口连接 docker 的 8080 端口(8080 是 vue-demo 启动 npm run serve 时的端口)
// 我们挂载 Volumes 文件夹下的 src 到 docker 的 src(/app/vue-demo 是在 Dockerfile 里面写的目录)
// nginx 我们使用 nginx 镜像,而不是用 Dockerfile 生成
// 我们指定本机的 5432 端口 连接 docker 的 80 端口(80 端口是 nginx 代理的端口)
// 我们挂载 Volumes 文件夹下的 default.conf 到 docker 的 default.conf

注意:这里需要新建一个 Volumes 文件夹(挂载目录),然后在里面放入挂载文件。否则需要在 docker 设置里面去增加挂载目录。

进行上面的设置之后,我们:

  1. 修改了 Volumes/src 文件夹之后,0.0.0.0:5431能够自动热重载进行更新。
  2. 我们可以通过修改 Volumes/default.conf 来调整 nginx 的配置。

注意:我们这里部署的是一个开发环境,其实也可以部署一个发布环境,这个比较简单只需要挂载 dist 文件夹就行了。

4.把 src 文件夹复制到 Volumes 文件夹下面并且在里面新建 default.conf 文件。最后组装并运行。

// 有 bash 命令行
docker-compose up // 无 bash 命令行
docker-compose up -d

通过 docker ps 查看正在运行的 container,我们可以看到我们已经部署成功了。

前端必须掌握的 docker 技能(3)的更多相关文章

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

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

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

    概述 作为一个前端,我觉得必须要学会使用 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. 【Java】 Java多线程(一)

    一.对线程的理解 1.线程概念 线程是操作系统能够进行运算调度的最小单位.它被包含在进程之中,是进程中的实际运作单位.一条线程指的是进程中一个单一顺序的控制流,一个进程中可以并发多个线程,每条线程并行 ...

  2. poj 1664 放苹果(dfs)

    放苹果 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 30284   Accepted: 19098 Description ...

  3. 6U VPX 高性能计算存储板卡

    基于6U VPX的 XC7VX690T+C6678的双FMC接口雷达通信处理板   一.板卡概述 高性能VPX信号处理板基于标准6U VPX架构,提供两个标准FMC插槽,适用于电子对抗或雷达信号等领域 ...

  4. httprunner如何提取数据串联上下游接口

    httprunner进行接口测试时,从上一个接口提取参数传递给下游接口,如何获取数据里最后一个值? 突然被学员问道一个httprunner的问题,惭愧的是大猫之前没有是通过httprunner,又不好 ...

  5. SpringBootMybatis02 mybatis-generator-gui|pageHelper|前后端分离|Filter权限实现

    一.Mybatis-generator-gui 下载地址:https://github.com/LittlePageProgram/mybatis-generator-gui.git 使用方法:填写相 ...

  6. 【译文】Git merge 和 Git rebase比较

    [译文]Git merge 和 Git rebase比较 原创: 胡江华 胡同学和朋友们的成长日记 2017-03-22 git rebase 这个命令经常被人认为是一种Git巫术,初学者应该避而远之 ...

  7. 如何使用windows performance recorder

    先下载WPA TOOLS:从该地址下载,选最新的版本,然后可以只选择下载WPA工具 后面编写XML文件等等,可以参考这篇文章. 需要注意: 用管理员启动cmd后,如果想运行特定路径的文件,需要带上绝对 ...

  8. 在win32中使用SetWindowSubclass阻止Enter键

    使用阻止Enter键的编辑控件的简单子类来完成此操作: LRESULT CALLBACK EditSubclassProc(HWND hWnd, UINT uMsg, WPARAM wParam, L ...

  9. c++ primer 5th(中文版)勘误

    \(P_{158}\) "末位大于 3" 改为 "末位大于等于 3" \(P_{302}\) \(P_{319}\) // 添加元素用光多余容量 while ( ...

  10. DevExpress WinForms v19.1新版亮点:Spreadsheet/Sunburst控件功能增强

    行业领先的.NET界面控件DevExpress v19.1终于正式发布,本站将以连载的形式介绍各版本新增内容.在本系列文章中将为大家介绍DevExpress WinForms v19.1中新增的一些控 ...