Docker部署前端vue+node（前端入门篇）

ps: 鄙人第一次在掘金写文，还望各大佬口下留情（请忽略排版）。

自我介绍：本人，男，92年，苏州，已婚（哈哈哈），前端入行3年多。好，收~

没错，我是切图仔，平时爱倒腾倒腾而已。docker前后倒腾了我10天，头发掉了无数，咨询了一些大佬，过程较艰辛，故决定分享下这篇文章，技术较接近运维（修电脑的）的日常。但谁让我们前端处在最底层呢，除了切图就没其他事了，搞它！

前言

大多数公司项目部署可能让前端动手的很少，现在很多都是走jenkins自动化部署了。以至于前端也就成为了别人眼中的切图仔。本文将带你打通任督二脉，遨游在docker部署的世界里。（啊呸，醒醒，测试喊你回去改bugssssss）。

简单说下技术，前端vue打包的dist直接扔到服务器(此文应用nginx)里，后端node（此文应用了express）造好接口并且开启服务，nginx配置下接口转发即可。当然也要启一个mysql数据库（我还特意看了一天的mysql，无奈）。简单实现前端输入内容，调接口，存数据库这么一个流程。由于本人较穷，买不起服务器，故用了vmvare+ubuntu耍耍

vmvare：https://www.vmware.com/cn/products/workstation-player/workstation-player-evaluation.html

18.04LTS desktop ubuntu：https://ubuntu.com/#download

整体技术：docker、vue、express+sequelize、mysql

环境介绍

Docker 是一个开源的应用容器引擎,可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中，然后发布到任何流行的 Linux 机器上，也可以实现虚拟化。容器是完全使用沙箱机制，相互之间不会有任何接口。（简单点，就比如你去一个商场，商场里有很多专卖店，小吃店，化妆品店，这些店就好比容器，你根据自己的需求去哪个店就好，而且这些店本质上互不干扰对方做生意）

vue我就不介绍了，这玩意都写的我想吐了。

node呢，现在是很多中高级前端常备的一个技能了，毕竟没那么多精力学java和世界上最好的语言php了。简单的说就是运行在服务端的 JavaScript，基于V8引擎，速度非常快，性能非常好。前端一般用的比较多的是它的服务端框架express/koa。vue-cli我记得就是用了express启的服务。

Docker

首先肯定在ubuntu里安装docker（自行度娘官网）

镜像

镜像仓库官网：hub.docker.com/

镜像是 Docker 运行容器的前提，仓库是存放镜像的场所，可见镜像更是Docker的核心。简单理解Docker 镜像可以看作是一个特殊的文件系统，提供容器运行时所需的程序、库、资源、配置等文件（运行环境）。

方便理解我们来搞下mysql。

docker search mysql ：在仓库里搜下mysql镜像

此时看到mysql版本为官方，大可安心下载，然后docker pull mysql:latest来拉取最新版本镜像。当然我这边下载的是5.6版本。docker pull mysql:5.6成功后，docker images来查看所有已装镜像，即可看到mysql:5.6镜像已安装ok

容器

容器是基于镜像运行的一个软件单元。它将代码及其所有依赖关系打包，以便应用程序从一个计算环境可靠快速地运行到另一个计算环境。是一个轻量的独立的可执行的软件包。容器将软件与其环境隔离开来，并确保它可以统一运行。一台机器上可运行多个容器。

以mysql镜像运行一个容器：

docker run -itd --name mysql-1  -p 3307:3306  -e MYSQL_ROOT_PASSWORD=123456 mysql:5.6
以5.6版本的mysql运行一个名为mysql-1内部端口3306映射到主机3307且密码为123456的容器
-it：一般同时出现 
i：交互式操作 
t：终端 
--name：命名容器名
-p：容器内部端口映射到主机端口 
docker ps -a：查询所有状态的容器（包括停止）

docker ps：查询处于运行状态的容器

此时我们可以用mysql客户端连接看下：

当然先得看下你linux的ip：可以看到此时ip为10.0.0.178（vm网络连接方式采用了桥接）。

此时mysql客户端配置连接测试：

ok，说明你已经离成功不远了

Vue

也就是我们的前端啦，页面很简单，就造了一个接口。

项目github地址：github.com/qianduanwuz…

然后打包一下npm run build生成dist。前面说到前端资源要放到服务器nginx里。

所以我们这继续开搞：

docker search nginx 仓库里为官方最新版本

docker pull nginx:latest 安装

docker images看下nginx镜像是否安装成功

然后我们运行下nginx容器看下浏览器是否能正常访问nginx服务：

docker run --name nginx-test -p 8080:80 -d nginx

运行完后看10.0.0.178:8080能访问说明ok

此时我们可以进入这个容器来看一些配置及操作

docker exec -it 容器id bash：进入容器（推荐exec，容器退出，不会导致容器的停止）

docker ps查看下容器nginx-test

docker exec -it 9900fc8bb5c9 bash 进入容器

此时我们可看见nginx的配置/usr/share/nginx/html/index.html，那我们把前端dist直接放进就ok，但此时我们来用Dockerfile来定制下镜像。

什么是 Dockerfile？

Dockerfile 是一个用来构建镜像的文本文件，文本内容包含了一条条构建镜像所需的指令和说明。

此时可以在vmvare创建Dockerfile文件夹，并且touch一个Dockerfile。命令如下：

然后在/Dockerfile/创建web文件夹，在/Dockerfile/web/创建front文件夹，然后把前端dist拖到/Dockerfile/web/front/。可参照下面看是否文件目录正确

好，我们来开搞Dockerfile，切到/Dockerfile/目录下 vim Dockerfile编辑

FROM：定制的镜像都是基于 FROM 的镜像，这里的 nginx 就是定制需要的基础镜像。后续的操作都是基于 nginx。

COPY：复制指令，从上下文目录中复制文件或者目录到容器里指定路径。

前面我们看过nginx容器里静态文件的目录为/usr/share/nginx/html/，所以故dist复制到此即可。

开始构建镜像

docker build -t web-front:latest . //一定注意末尾加上 .

构建完后docker images可看到web-front:latest镜像

运行容器

docker run -itd --name web-front-1 -p 2222:80 web-front:latest bash

docker ps 查看容器web-front-1

进入容器

docker exec -it f6d33f03653f bash

/usr/sbin/nginx开启nginx服务

访问10.0.0.178:2222

ok，阔以访问前端服务了，你基本接近成功了。

Node

准备造接口啦。express+sequelize（orm）

项目github地址：github.com/qianduanwuz…

贴部分核心代码

连接数据库：

建模：

接口：

server.js:

后面node容器node server.js即可启动服务

部署node准备工作

在/Dockerfile/web/下创建node文件夹，然后把node项目文件放到/Dockerfile/web/node/里，当然也需要/Dockerfile/web/node/创建个Dockerfile来做node的定制镜像（暂不使用docker compose）。

编辑Dockerfile

开始构建镜像

docker build -t web-node:beta . //一定注意末尾加上 .

beta其实就是web-node的tag

运行容器

docker run -itd --name web-node-beta -p 5555:3000 web-node:beta bash

docker ps 查看容器web-node-beta

此时可用postman来跑下接口

ps：数据库里你得预先建张表u_users(sequelize建模时会自动找这张表，没有使用sync来强制建表)

哇！很激动有木有。前后端现在都能访问了，那前端接口跨域怎么办？没事，还记得web-front-1容器吗，对，没错，只要修改容器里nginx里的配置即可。来，我们操作下：

docker exec -it f6d33f03653f bash 进入web-front-1容器，然后我们发现conf配置文件目录为：/etc/nginx/conf.d/default.conf，那我们直接编辑配置即可

保存退出，此时我们需要重启下nginx。可以nginx -s reload 或者 nginx -s stop然后 /usr/sbin/nginx 即可。然后我们可以模拟下前端输入内容，调接口，存数据库这么一个流程。

前端输入内容

调接口

请求成功

数据库发现有这数据了

好了，十分感谢各位大佬的观看。docker我学了10天，写了这篇入门文章，有很多指令没写，也省略了部分步骤，有些东西肯定需要自己摸索，当然文章错误难免，还望各大佬指出~欢迎留言，我继续去当我的切图仔了！