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

前端必须掌握的 docker 技能(3)
强烈推介IDEA2021.1.3破解激活,IntelliJ IDEA 注册码,2021.1.3IDEA 激活码  

大家好,我是架构君,一个会写代码吟诗的架构师。今天说一说前端必须掌握的 docker 技能(3),希望能够帮助大家进步!!!

概述

作为一个前端,我觉得必须要学会使用 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,我们可以看到我们已经部署成功了。

转载于:https://www.cnblogs.com/yangzhou33/p/11554938.html

本文来源weixin_30595035,由架构君转载发布,观点不代表Java架构师必看的立场,转载请标明来源出处:https://javajgs.com/archives/29258

发表评论