【大前端】1. 开发环境搭建

阅读数: 2021-03-27

开发环境准备

1614088427035

本地环境（nodejs+nvm+yarn+vue-cli）

1614088494889

教程的本地环境：

[root@imooc ~]# nvm -v
0.34.0
[root@imooc ~]# node -v
v10.15.1
[root@imooc ~]# vue --version
3.7.0
[root@imooc ~]# yarn -v
1.13.0

我的的本地环境：

[root@imooc ~]# nvm -v
Running versionv 1.1.7
[root@imooc ~]# node -v
v12.18.1
[root@imooc ~]# vue --version
@vue/cli 4.5.9
[root@imooc ~]# yarn -v
1.22.4

nvm全称Node Version Manager, 用于在本地切换不同的node版本。注意：windows用户需要使用nvm-windows。

关于nvm-windows的下载安装请看：https://www.cnblogs.com/dreamsqin/p/10885082.html。

关于nvm-window国内源下安装高版本提示is not yet released or available：主要是换成国内源导致，可以注释掉nvm/settings.txt下的node_mirror和npm_mirror，切换回官方源。或者手动下载node压缩包放到nvm目录下(nvm root命令可以找到该目录。=》 C:\Users\用户名\AppData\Roaming\nvm)。
1
2
# node_mirror: npm.taobao.org/mirrors/node/
# npm_mirror: npm.taobao.org/mirrors/npm/

nvm常用命令：

1
2
3

nvm ls   // 查看目前已经安装的版本
nvm install 10.5.0  // 安装指定的版本的nodejs
nvm use 10.5.0  // 使用指定版本的nodejs

我在Yarn官网打开下载Windows的msi文件是404，可以参考这篇文章下载安装：https://www.cnblogs.com/fengzhentian/p/13508969.html （记得安装后设置淘宝源）。

下面是推荐使用yarn的原因：

yarn常用命令：

yarn config get registry // 查看源
yarn config set registry http://registry.npm.taobao.org/ -g // 设置源（淘宝源）
yarn global install @vue/cli // 全局安装@vue/cli包
yarn global add @vue/cli // 全局添加@vue/cli包
yarn global remove @vue/cli // 全局删除@vue/cli包

测试环境（unbuntu+docker+mongodb）

教程的测试环境：

[root@imooc ~]# lsb_release -a
CentOS Linux release 7.6.1810
[root@imooc ~]# docker -v
Docker version 18.09.3
[root@imooc ~]# docker-compse -v
docker-compose version 1.24.0

我的测试环境：

[root@imooc ~]# lsb_release -a
Ubuntu 16.04.4 LTS
[root@imooc ~]# docker -v
Docker version 19.03.13
[root@imooc ~]# docker-compse -v
docker-compose version 1.23.2

下面讲解下如何安装使用docker搭建MongoDB数据库服务。

1、下载docker

1 2	ion@ubuntu:~/myproject$ curl -fsSL https://get.docker.com -o get-docker.sh ion@ubuntu:~/myproject$ sh get-docker.sh

2、下载docker-compose

我这里没有安装成功，因为curl的速度太慢了，还中断过一次。

# 最新版本的安装命令请看：https://docs.docker.com/compose/install/
ion@ubuntu:~/myproj ect$ sudo curl -L "https://github.com/docker/compose/releases/download/1.24.0/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
ion@ubuntu:~/myproject$ sudo chmod +x /usr/local/bin/docker-compose
ion@ubuntu:~/myproject$ docker-compose -v

3、docker安装mongodb

1	docker pull mongo:4

mongo:4 是指安装4版本的MongoDB

默认的情况下相当于：docker pull mongo:lastest

使用docker images查看安装好的镜像
如果遇到安装失败的情况下，需要切换docker国内源：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
vim /etc/docker/daemon.json

# 复制粘贴一下内容，替换原来的内容
{
    "registry-mirrors" : [
    "https://registry.docker-cn.com",
    "https://docker.mirrors.ustc.edu.cn",
    "http://hub-mirror.c.163.com",
    "https://cr.console.aliyun.com/"
  ]
}

# 重启docker，应用国内源
# systemctl daemon-reload
# systemctl restart docker
service docker restart

2024.12.09 更新：上面应用后从docker info 看配置已生效，但是docker pull依旧报错官方源timeout，最终通过该博客解决Error Get “https://registry-1.docker.io/v2/“:环境报错问题~亲测有效解决

sudo vi /etc/docker/daemon.json
# 添加已下内容
{
    "dns": [
        "8.8.8.8",
        "8.8.4.4"
    ],
    "registry-mirrors": [
        "https://docker.m.daocloud.io/",
        "https://huecker.io/",
        "https://dockerhub.timeweb.cloud",
        "https://noohub.ru/",
        "https://dockerproxy.com",
        "https://docker.mirrors.ustc.edu.cn",
        "https://docker.nju.edu.cn",
        "https://xx4bwyg2.mirror.aliyuncs.com",
        "http://f1361db2.m.daocloud.io",
        "https://registry.docker-cn.com",
        "http://hub-mirror.c.163.com",
        "https://docker.mirrors.ustc.edu.cn"
    ]
}
# 修改完成后，重启 Docker 服务：
sudo systemctl restart docker

4、doker运行MongoDB

# -d: 后台运行    --name: 任务名称     -p: 端口 (宿主机10050映射到容器的27017端口)
docker run -d --name some-mongo -p 10050:27017 mongo:4
# 查看当前运行的docker服务
docker ps

如果本地没有该镜像，直接run的话会先从远程拉取。

5、本地远程连接测试mongoDB是否开启

测试前需要关闭防火墙或者放行端口

关闭防火墙：
1
2
Ubuntu: service ufw stop
Centos: service firewalld stop
永久放行端口10050：
1
2
3
4
5
6
Ubuntu:
ufw allow Port 10050

Centos: 
firewall-cmd --zone=public --add-port=10050/tcp --permanent
firewall-cmd --reload

在本地环境中，我使用MongoDB Compass来测试我的MongoDB服务是否可以连接。

看到如上图就是连接成功了。

虚拟化软件

Windows:

Vmware Hyper-V （Windows 10 专业版和 Windows Server都默认安装的）

Vmware Workstation

Mac OS: Parallesls

Linux: KWM

Linux笔记

Linux 操作系统有：Centos, Debian, Ubuntu（基于Debian发行版开发而来，适合新手学习）

目录介绍：home（家目录，用户的文件存放目录） etc（主要存放一些配置文件）tmp（存放临时文件）usr（存放执行文件，主要有sbin目录和local目录） var（常存放www目录，也就是网站）

下载，解压，压缩命令：

1
2
3

[root@imooc test]# wget http://mirror.bit.edu.cn/apache/tomacat/tomcat-9/v9.0.17/bin/apache-tomcat-9.0.17.tar.gz
[root@imooc test]# tar zxvf apache-tomcat-9.0.17.tar.gz
[root@imooc test]# tar zcvf apache-tomcat-9.0.17.tar.gz

z(带.gz结尾的压缩文件) x(解压) c(压缩) v(显示解压过程) f(使用归等的文件名，这里是apache-tomcat-9.0.17)

《SSH密钥方式远程连接Linux》该节课录播无声音，跳过

Docker入门

Docker和虚拟机的差异：

Docker主要特性：

文件，资源，网络隔离
变更管理（和git一样可以管理变更），日志记录
写时复制（比虚拟化平台快的原因）

如何安装Docker：

https://www.toimc.com/docker%E5%85%A5%E9%97%A8%E4%B9%8B%E5%AE%89%E8%A3%85%E6%95%99%E7%A8%8B/

我这里是Ubuntu16.04，尝试可以通过docker官方脚本，仅需一条命令即可安装：

1	curl -fsSL https://get.docker.com \| bash -s docker --mirror Aliyun

如果无法安装，一个可能是ubuntu源的问题，或者可以使用国内的安装脚本（该方式记得手动配置下docker源）。

1	curl -sSL https://get.daocloud.io/docker \| sh

docker常见操作：

# 修改docker为国内源
vim /etc/docker/daemon.json
#{
#    "registry-mirrors" : [
#    "https://registry.docker-cn.com",
#    "https://docker.mirrors.ustc.edu.cn",
#    "http://hub-mirror.c.163.com",
#    "https://cr.console.aliyun.com/"
#  ]
#}
systemctl daemon-reload  # 重新加载配置项
systemctl restart docker

# 查看当前运行的容器（container） 
docker ps
# 查看所有容器（container） 
docker ps -a

# 查看所有镜像（images） 
docker images

# 删除停止的容器（如果没有停止运行的需要先停止它：docker stop [container-ID/Name]）
docker rm [container-ID/Name]

# 运行mysql （--name:容器名为some-mysql   -e: 启动配置  -d: 后台运行 mysql:相当于mysql:latest ）
# -p: 端口映射(宿主机28001映射到容器的3306端口) 
docker run --name some-mysql -e MYSQL_ROOT_PASSWORD=123456 -p 28001:3306 -d mysql

# 进入后台运行的容器
docker exec -it [containerName] /bin/bash

# 停止运行容器
docker stop some-mysql

# 开启停止运行的容器
docker start some-mysql

# 重启容器
docker restart some-mysql

# 打印后台运行的容器日志(-f: 持续打印)
docker logs -f some-mysql

# docker所在的操作系统有安装mysql可以用下面命令连接创建的mysql容器
mysql -h127.0.0.1 -u root -P 28001 -p 123456

docker-compose和docker Hub

docker-compose 是docker的集合命令工具。

在Mac/Windows中，已经集成了docker-compose命令。下面演示Linux下的安装：

# 下载docker-compose
# 最新版本的安装命令请看：https://docs.docker.com/compose/install/
sudo curl -L "https://github.com/docker/compose/releases/download/1.23.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

# 给予执行权限
sudo chmod +x /usr/local/bin/docker-compose

# 测试命令
$ docker-compose --version
docker-compose version 1.23.2, build 1110ad01

更多见：https://www.toimc.com/docker入门之安装教程/

PS: 我这里发现访问很慢，所以通过vpn代理下载：sudo curl --socks5 172.20.0.62:8388 -L "https://github.com/docker/compose/releases/download/1.23.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose。更多关于curl代理的知识请看：Linux curl命令使用代理、以及代理种类介绍

docker-compose使用：

mkdir docker-compose
cd docker-compose

# 编辑配置
vim docker-compose.yml

# docker-compose.yml内容（注意：这里缩进是两个空格而不是TAB键）
version: '3'
services:
  mysql1:
    image: mysql
    environment:
    - MYSQL_ROOT_PASSWORD=123456
    ports:
    - 28002:3306
  mysql2:
    image: mysql
    environment:
    - MYSQL_ROOT_PASSWORD=123456
    ports:
    - 28003:3306
    
# 开启docker-compose.yml中配置的服务
docker-compose up -d


# 此外，还有以下命令
docker-compose [stop|start|rm|run]

docker hub使用：

docker仓库除了官方的docker hub，还可以搭建私有仓库Harbor.

# 登录docker hub(需要先在docker hub上注册账号)
docker login

# 查看现有容器
docker ps -a

# 提交指定容器（lw96/mysql是repository名称，1.0是TAG，可以在下一个命令中看到）
docker commit [containerID] lw96/mysql:1.0

# 查看提交后的镜像
docker images

# 上传到docker hub
docker push lw96/mysql:1.0

# 其他机器下载自建镜像
docker pull lw96/mysql:1.0

PS: 国外的docker hub的速度是很慢的，所以建议使用国内的docker hub, 如阿里的。搭建过程看见：https://www.cnblogs.com/leoxjy/p/9658598.html

centos8安装docker

查看系统版本

# 查看centos版本
cat /etc/redhat-release
# CentOS Linux release 8.2.2004 (Core)

# Docker 要求 CentOS 系统的内核版本高于 3.10 ，查看CentOS 版本是否支持 Docker
uname -r

安装docker

# 确保 yum 包更新到最新（可选步骤）
yum update

# 首先安装 安装 yum-utils 为了使用 yum-config-manager 命令
yum install yum-utils

# 通过 yum-config-manager 设置镜像仓库地址
yum-config-manager --add-repo https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

# 安装依赖 containerd.io
dnf install https://mirrors.aliyun.com/docker-ce/linux/centos/7/x86_64/stable/Packages/containerd.io-1.2.13-3.1.el7.x86_64.rpm

# 安装 docker-ce
dnf install docker-ce

# 设置开机启动、启动docker
systemctl enable docker.service
systemctl start docker.service

# 配置阿里云镜像加速器（https://cr.console.aliyun.com/cn-hangzhou/instances/mirrors）
vim /etc/docker/daemon.json
# { "registry-mirrors": ["https://****.****.aliyuncs.com"] }

# 重启主控制、重启docker
sudo systemctl daemon-reload 
sudo systemctl restart docker

安装docker-compose

# 国内地址下载
sudo curl -L "https://get.daocloud.io/docker/compose/releases/download/1.24.1/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
# 源下载地址
# sudo curl -L "https://github.com/docker/compose/releases/download/1.24.1/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

# 赋权操作
sudo chmod +x /usr/local/bin/docker-compose

# 建立软连接（这里不建立也可以运行命令，但是要对全用户可用，还是建立下吧）
sudo ln -s /usr/local/bin/docker-compose /usr/bin/docker-compose

# 查看版本号
docker-compose version
# docker-compose version 1.24.1, build 4667896b
# docker-py version: 3.7.3
# CPython version: 3.6.8
# OpenSSL version: OpenSSL 1.1.0j  20 Nov 2018

centos7安装docker

参考：https://www.linuxprobe.com/install-use-docker-in-centos7.html

# 查看系统内核版本是否高于3.10
uname -r
3.10.0-1127.13.1.el7.x86_64

# Docker 软件包已经包括在默认的 CentOS-Extras 软件源里
yum install docker

# 启动docker
systemctl start docker.service

# 设置开启自启
systemctl enable docker.service

# 查看docker版本
docker --version
Docker version 1.13.1, build 7d71120/1.13.1

# 配置阿里云镜像加速
# https://cr.console.aliyun.com/cn-hangzhou/instances/mirrors

认识Node

免费、开源、跨平台
服务器上的JavaScript运行环境
基于Chrome V8引擎，事件驱动，非阻塞式I/O

包管理工具：npm, cnpm, Yarn

npm源管理器：NRM （比起cnpm对于新手更友好）

node版本管理工具：NVM

npm包发布：参见我的文章《npm使用记录》

IDE简介

比较推荐WebStorm和VSCode，WebStorm适合新手使用，因为功能更全面，但是是付费使用。VSCode更轻量，但是因为大多功能依赖插件，新手容易混乱。

VSCode的插件库和轻量是其最大的优势。

插件推荐：

通过Settings Sync插件，可以在各个机器上同步插件的配置，减少配置成本。

通过Vue Extension Pack 插件包，安装Vue开发常用的一系列插件, 同样也有 React Extension Pack，Angular Extension Pack, Node.js Extension Pack，Python Extension Pack，PHP Extension Pack，Java Extension Pack 等等等等。

轻量级：

WebStorm占用内存远远大于VSCode

调试功能：WebStorm调试是图形化的，VSCode调试需要填写配置选项（需要学习成本）。

真机调试总结

第一个方法：配合浏览器功能进行调试，缺点是需要数据线并且繁琐。

第二个方法：通过劫持的方式，缺点是只能调试和转发请求，不能调试页面。

第三个方法：植入调试器的代码，模拟一个调试终端。缺点是功能不够全面。

方法一：

我这里演示安卓手机配合Chrome浏览器调试手机端（需要开启虚拟专有网络（梯子），因为调试栏会使用到谷歌服务）。

chrome浏览器打开地址chrome://inspect/#devices
手机进入设置，进入开发者选项（需要先开启开发者模式，方法请根据手机自行查询，如小米8）。
使用数据线连接电脑后，打开USB调试，这时候会提示是否允许USB调试，点击确定后，在chrome浏览器上面的打开的地址就可以看到连接的设备。
手机浏览网页就会在Remote Target里面列出来了，这时候点击inspect即可调试。
注意：如果打开的DevToolsApp长期处于白屏状态，需要检查Chrome是否是最新版本。如果Chrome是最新版本依旧不行，可以下载一个手机端Chrome浏览器。如果还是一直白板，需要给电脑开启虚拟专有网络，这个我就不演示了。

综上所述，该方法还是比较麻烦的。IOS+Safari还可以尝试，Android+Chrome就比较不方便了。所以推荐使用方法3。

方法2：

Fiddler设置一个代理，手机设置代理服务器指定是fiddler设置的代理，这样子通过手机访问的网页都可以在fiddler中查看到。

这里教程没有给到fiddler的具体用法，之后补充。综上所述，还是可以看到，该方法只能调试接口，无法调试页面，所以推荐方法3.

方法3：

推荐使用Weinre, 如果要求不高的话，vConsole也是适合的。

spy-debugger集成了Weinre，有更多的功能。

综上所述，功能最完善，原生支持的最好当然是方法1，在没有代理的情况下优先使用方法3,，如果只需要调试接口，也可以使用方法2.

RESTful API

请求方法有：GET， POST， PUT， DELETE， HEAD， OPTIONS， PATCH

接口测试

插件类是Chrome的扩展程序，我喜欢使用的是Talend API Tester。

平台类是一个web应用，缺点是无法请求本地ip，只能请求具有公网IP的地址。

DOClever是讲师较为推荐的终端类的工具，国人开发的。

DOClever和Yapi是接口管理的平台，包括接口调试，MOCK，文档生成，版本管理等功能，并且都可以线下部署。

MOCK数据

Mock数据工具

讲师推荐的是：DOClever和Yapi

本地安装接口测试工具

我的环境

ion@ubuntu:~$ lsb_release -a
No LSB modules are available.
Distributor ID: Ubuntu
Description:    Ubuntu 16.04.4 LTS
Release:        16.04
Codename:       xenial
ion@ubuntu:~$ docker -v
Docker version 19.03.13, build 4484c46d9d
ion@ubuntu:~$ docker-compose -v
docker-compose version 1.28.5, build c4eb3a1f

安装步骤（下载仓库配置项安装）

# git设置代理(如果下载仓库不慢的话可以不需要设置代理，另外这里是我的内网代理，其他人是用不了的，需要的自己搭建一个，方法自行百度)
# 其实关于github的加速，方法有很多，可见：https://www.bilibili.com/video/BV1Cy4y1871L?t=150
git config --global http.proxy 'socks5://172.20.0.62:8388'
git config --global https.proxy 'socks5://172.20.0.62:8388'

# 下载doclever仓库
git clone https://github.com/sx1989827/DOClever.git

# 下载好后关闭git的代理访问
git config --global --unset http.proxy
git config --global --unset https.proxy

# 我的环境是ubuntu，使用ubuntu下的docker-comose.yml运行
# 如果不是ubuntu的系统，也可以参考DOClever/docker/README.md的说明安装
cd DOClever/docker/ubuntu/

# 运行该命令会自动下载镜像（PS: 运行前最好按照下方我的config.yml修改下）
docker-compose up -d

我的config.yml

# 1.编写自己的配置文件
vim docker-compose.yml

# 2.复制下面到docker-compose.yml中
version: "2"
services:
  DOClever:
    image: lw96/doclever:latest-ubuntu
    restart: always
    container_name: "DOClever"
    ports:
    # 前面是宿主机端口
    - 10000:10000
    volumes:
    # 前面是本地路径
    - /srv/doclever/file:/root/DOClever/data/file
    - /srv/doclever/img:/root/DOClever/data/img
    - /srv/doclever/tmp:/root/DOClever/data/tmp
    environment:
    - DB_HOST=mongodb://localhost:27017/DOClever
    - PORT=10000
    links:
    - mongo:mongo

  mongo:
    image: mongo:latest
    restart: always
    container_name: "mongodb"
    volumes:
    # 前面是本地路径
    - /srv/doclever/db:/data/db

接下来，检查防火墙和安全组是否放行了docker-compose.yml设置的宿主机端口（默认10000）。关于这个可见上面开发环境准备一节，检查后访问 ip:端口 即可看到页面了。

诺，和官网的首页是一样的。点击右上角的登录 → 管理总后台，输入账密DOClever即可登录。

使用方法可自行摸索。

最新github地址里面不知道为什么不再介绍docker部署方式，但是尝试还是可以部署的，参考：https://hub.docker.com/r/lw96/doclever

如果部署后访问不能出现页面，可根据下面方式排查

# 查看启动日志
docker-compose logs
# 进入容器启动查看
docker exec -it [容器id] /bin/bash
/root/DOClever/Server/bin/www

MongoError: Unsupported OP_QUERY command: insert. The client driver may require an upgrade

简而言之不能超过6.0版本
ERROR: BadValue: Invalid value for version, found 7.0, expected ‘4.4’ or ‘4.2’.

之前部署了最新版本的mongodb并将配置文件挂载到了宿主机，删除宿主机里面的数据库文件即可

PS：目前看 doclever 官方镜像最新是2019年的了，mongodb大概是2021年升级到6版本的，所以要使用 doclever 的docker镜像只能考虑使用低于6版本的mongodb。为什么要升级到MongoDB的新版本

>version: "2"
services:
 DOClever:
    image: lw96/doclever
   restart: always
    container_name: "DOClever"
   depends_on:
      - mongo
    ports:
    # 前面是宿主机端口
    - 10000:10000
    volumes:
    # 前面是本地路径
    - /var/www/doclever/file:/root/DOClever/data/file
    - /var/www/doclever/img:/root/DOClever/data/img
    - /var/www/doclever/tmp:/root/DOClever/data/tmp
    environment:
    - DB_HOST=mongodb://mongo:27017/DOClever
    - PORT=10000
    links:
    - mongo:mongo

  mongo:
    image: mongo:4.4
    restart: always
    container_name: "mongodb"
    volumes:
    # 前面是本地路径
    - /var/www/doclever/db:/data/db

也可以考虑单独启动

# 从Docker Hub下载MongoDB 4.4镜像
docker pull mongo:4.4
# 在Docker容器中运行MongoDB实例
docker run -d -p 27017:27017 --name mongodb mongo:4.4
>#  进入MongoDB容器的命令行界面
docker exec -it mongodb mongo admin
># 创建管理员账户
db.createUser({ user: 'admin', pwd: 'password', roles: [ { role: "root", db: "admin" } ] })
# 退出MongoDB容器的命令行界面
exit

# 从Docker Hub下载doclever镜像
docker pull lw96/doclever
# 在Docker容器中运行doclever实例
docker run -it -d --name doclever -p 10000:10000 \
-e DB_HOST=mongodb://www.ionluo.cn:27017/DOClever \
-e PORT=10000 \
-e DB_FILE=/root/DOClever/data/file \
-e DB_IMG=/root/DOClever/data/img \
-e DB_TEMP=/root/DOClever/data/tmp \
-v /var/www/doclever/file:/root/DOClever/data/file \
-v /var/www/doclever/img:/root/DOClever/data/img \
-v /var/www/doclever/tmp:/root/DOClever/data/tmp \
lw96/doclever

使用问题：

通过导入JSON 按钮自动导入数据会把 null 转换成 “Mixed”

本文作者： ionluo
本文链接： http://www.ionluo.cn/blog/posts/c402862b.html
版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！