Docker部署前端vue+node(前端入门篇)

Docker部署前端vue+node(前端入门篇)

技术杂谈小彩虹2021-07-16 11:29:36150A+A-

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天,写了这篇入门文章,有很多指令没写,也省略了部分步骤,有些东西肯定需要自己摸索,当然文章错误难免,还望各大佬指出~欢迎留言,我继续去当我的切图仔了!


点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1

联系我们