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

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

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

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

前言

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

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

vmvare：www.vmware.com/cn/products…

18.04LTS desktop ubuntu：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天，写了这篇入门文章，有不少指令没写，也省略了部分步骤，有些东西确定须要本身摸索，固然文章错误不免，还望各大佬指出~欢迎留言，我继续去当个人切图仔了！