《Docker》Docker完整部署Web应用（Vue+Node+MongoDB

// latest代表最新版本，如果是指定版本这里填入对应的版本号，比如latest改为0.18，冒号不能删

docker pull nginx:latest

通过docker将最新一个版本的nginx安装包下载下来

​

查看镜像

下载之后，输入命令

docker images

输入后可以查看到docker下所有的镜像，也就是安装包

安装镜像

先说一个正常的安装方式，这个方式必须了解，但是不是部署时的命令

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

// 参数说明

–name nginx：容器名称。

-p 8080:80： 端口进行映射，将本地 8080 端口映射到容器内部的 80 端口。

-d nginx： 设置容器在在后台一直运行。

这里先了解一个概念，服务器本身是有端口的，这个没问题，docker也是有端口的，上面我们说了，docker是一个类似于虚拟机的存在，虚拟机有端口的，而我们装在docker内部的程序在服务器上是访问不了的，通过端口的映射，可以将docker内部的端口和服务器的端口关联起来；

就拿这里距离，当访问服务器的8080端口时，约等于访问了docker的80端口

​

安装成功后，通过命令查看所有正在运行的镜像，或者说正在运行的程序

docker ps

部署时的安装

首先说明为什么或者上面正常安装不一样，原因很简单，是因为我们的nginx是安装在docker里面的，上文也提到了，docker和服务器并不相通，我们的前端网页，放在服务器里后，Nginx并不能访问到，每次都需要先将网页上传到服务器，之后，在将服务器的文件拷贝进docker里的Nginx下，这样就很麻烦，所以才有了这种方法

​

docker run --name mynginx -d --net=“host” --restart=always --privileged=true --net=host -v /usr/docker/mynginx/html:/usr/share/nginx/html -v /usr/docker/mynginx/conf.d:/etc/nginx/conf.d -v /usr/docker/mynginx/logs:/var/log/nginx nginx

好长的命令，不要紧，分开看：

​

• 这一段就是上面正常的安装 启动，并关联了服务器的所有端口

docker run --name nginx -d --net=“host”

• 保持重启docker时默认打开，并设置一些参数

–restart=always --privileged=true --net=host

1）–privileged=true：开启特权模式，可以不用这个命令。

2）–net=host：容器就和宿主机共用网络。

这段命令可以不要

​

• 关联网页存放路径

-v /usr/docker/mynginx/html:/usr/share/nginx/html

什么意思？就是说，我们把docker内部nginx里的网页存放路径/usr/share/nginx/html，和服务器上面的/usr/docker/mynginx/html文件关联起来，以后就不需要放docker下Nginx里的路径拷贝了，只需要上传一次，上传到关联的路径就可以了

​

• 关联Nginx的配置文件路径

-v /usr/docker/mynginx/conf.d:/etc/nginx/conf.d

同理，Nginx的配置文件路径也要关联，不然，虽然上传了网页文件，但是改配置文件还要进docker里，去找到Nginx的配置文件修改，也太麻烦了

​

• 关联Nginx日志文件路径

-v /usr/docker/mynginx/logs:/var/log/nginx

同理，日志文件也是要关联的

​

配置文件

上面虽然关联了Nginx的配置文件路径，但是里面没有配置文件，因此，我们需要写一个配置文件放入文件夹

前端转发

server{

listen 80;

server_name 服务器地址;

location / {

root /usr/share/nginx/html;

}

}

这里服务器地址填自己的服务器地址

​

小结

到这里，Nginx算是装好了，在这一步中，我们使用docker安装了nginx，并且使用nginx监听了服务器的端口，当端口被触发，那么自动会将网页返回；

​

前端文件上传

---

前端的文件上传比较简单，只需要将网页文件完整的上传到刚刚配置好的Nginx对应的文件夹下就行了。

对了， Vue项目的话需要先将其打包，打包的指令

npm run build

打包完了之后，使用终端工具，比如FInalShell，将前端工程文件整体上传到服务器文件夹下，上文的话，就是上传到/usr/docker/mynginx/html文件夹下。

​

小结

这一环节就结束了，到这里为止，应该访问服务器的IP地址，已经可以打开网页了，只是网页不正常而已，因为没有后台的支撑。

​

安装MongoDB

---

同样，MongoDB具体是什么，怎么使用就不细说了，简单的说，就是一个数据库，是非关联性数据库的代表，它的结构，使用方式，对前端而言还是相对比较容易理解的；

​

拉取镜像

下载镜像，也就是安装包

docker pull mongo:latest

安装启动镜像

docker run -itd --name mongo -p 27017:27017 mongo --auth

// 参数解释

–auth：需要密码才能访问容器服务。

这里将docker内部的27017端口和服务器的27017端口绑定，注意的是，阿里云自己有安全策略的，绑定了端口不代表端口就开放了，因此需要到阿里云官网上面去，进入服务器配置，找到“配置安全规则”，将端口27017加进去

创建用户

数据库肯定要用户名密码才能访问，所以需要先创建一个用户，首先先进入docker下的mongo

docker exec -it mongo mongo admin

然后创建一个用户，设置密码，并赋值该用户对数据库的操作权限，如果是为其它数据库创建用户是一样的操作，就是把db的值对应到数据库名

创建一个名为 admin，密码为 111111的用户。

db.createUser({ user:‘admin’,pwd:‘111111’,roles:[ { role:‘userAdminAnyDatabase’, db: ‘admin’}]});

尝试使用上面创建的用户信息进行连接。

db.auth(‘admin’, ‘111111’)

接着，通过命令切换到admin数据库下

use admin

输入命令db.stats() 或者 show users,你可能会遇到错误 not authorized on admin to execute command…

如果报错了，那么说明此时还没有操作权限，需要进一步创建信息

db.auth(“admin”, “111111”)

db.grantRolesToUser(“admin”, [ { role: “readWrite”, db: “admin” } ])

权限说明

• 数据库用户角色：read、readWrite;

• 数据库管理角色：dbAdmin、dbOwner、userAdmin；

• 集群管理角色：clusterAdmin、clusterManager、clusterMonitor、hostManager；

• 备份恢复角色：backup、restore

• 所有数据库角色：readAnyDatabase、readWriteAnyDatabase、userAdminAnyDatabase、dbAdminAnyDatabase

• 超级用户角色：root

​

连接数据库

数据库创建成功后，那么就是测试是否可以连接了，安装个工具Navicat，点击左上角的“连接”，选择MongoDB，填完后，点击左下角的测试链接，提示“连接成功”

​

小结

到这里数据库就安装成功了，本地的后台应该可以连接到数据库，从数据库读取信息，存储信息

​

安装Node.js

---

在这一环节，默认已经有一个基于Node.js的后台工程了，现在的目标是需要将这个后台在服务器上启动，供前台访问；

​

拉取镜像

还是要先下载镜像

// 最新的，或者latest换成指定的版本号

docker pull nodejs:latest

ES6

• 列举常用的ES6特性：

• 箭头函数需要注意哪些地方？

• let、const、var

• 拓展：var方式定义的变量有什么样的bug？

• Set数据结构

• 拓展：数组去重的方法

• 箭头函数this的指向。

• 手写ES6 class继承。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

微信小程序

• 简单描述一下微信小程序的相关文件类型?

• 你是怎么封装微信小程序的数据请求？

• 有哪些参数传值的方法？

• 你使用过哪些方法，来提高微信小程序的应用速度？

• 小程序和原生App哪个好？

• 简述微信小程序原理？

• 分析微信小程序的优劣势

• 怎么解决小程序的异步请求问题？