作为前端的童鞋们，也许很少接触到服务器相关的知识，但是要做一名合格的软件工程师，就不得不用到这些『软技能』啦，在踩了无数次坑后，终于搭建好属于自己的开发环境，成就感妥妥的。

简单介绍

本文基于MacOS High Sierra 10.13.3 系统，系统的差异可能导致搭建过程中出现不同问题，请自行Google哦。
vagrant是一款利器，利用 vagrant + vitualBox 可以搭建虚拟开发环境并且把代码同步共享到linux虚拟机，你可以把这个虚拟机配成和生产环境一样的。还可以将自己的系统打包成虚拟机镜像，发给小伙伴们使用。
vagrant 常用来做开发环境的部署工具，而 docker 是一种虚拟化技术，生产环境上基本上使用docker,并且更轻量级 ,当然你也可以折腾一下docker。
centos 与 ubuntu 都是 linux 发型版本之一，但通常来说公司都是使用centos作为自己生产环境的系统。

工具及要安装的软件

Mac
vitualBox
vagrant
centos/7
宝塔面板（简单好用的服务器管理面板工具）
SwitchHosts（好用的hosts管理工具）

安装

到官网下载并安装vitualBox,我下载的是OS X 版的，版本号是 5.2.12
再安装vagrant,此处选择Mac os 版本，以上就根据安装器的提示进行安装即可。

打开终端进到mac系统的宿主目录，创建一个存放你的配置的文件夹, 名字最好取得简单易懂，此处取为centos_vagrant：

$  ～mkdir centos_vagrant

去网上查找可用的 box , 可以把box理解为类似于iso的镜像文件，搭载了你需要的系统，这里我们去官网查看:

找到要下载的镜像，点进去，发现可以用vagrant 命令下载并且初始化box：

但是由于网速原因，在终端下载安装简直比龟速还龟速，这里提供其他两种方法下载：

搭建环境

了解vagrant常用命令

$ vagrant

安装 box

进入到刚刚创建的centos_vagrant文件夹，如果里面有vagrantfile文件, 先删除它，刚刚下载好的box文件，也放到这个文件夹，重命名一下，这里命名为centos-7.box
打开终端，进入到centos_vagrant文件夹，使用以下命令：

$ vagrant box add centos-7.box
$ vagrant init centos-7
$ vagrant up

这个过程最好保证你的应用 vitualBox 是开着的

设置文件及目录共享

可以将常用的命令加入到alias 里，在全局使用，因为我安装了zsh，所以编辑.zshrc并保存,没有安装的同学找到.bashrc或.bash_profile进行编辑。

#vagrant-centos
alias centos_up='cd ~/centos_vagrant && vagrant up'
alias centos_status='cd ~/centos_vagrant && vagrant status'
alias centos_ssh='cd ~/centos_vagrant && vagrant ssh'
alias centos_halt='cd ~/centos_vagrant && vagrant halt'
alias centos_reload='cd ~/centos_vagrant && vagrant reload --provision'
alias centos_vi='cd ~/centos_vagrant && vi Vagrantfile'

修改vagrantfile
在本地随意建一个文件夹，假设为centos_vagrant_project，使用 centos_ssh或者vagrant ssh(后面默认使用centos_xxx),登录到虚拟机
使用 ls -al命令，会发现虚拟环境里只有.ssh、.bashrc等文件

在虚拟机也创建一个，最好是同名的文件夹，方便管理

$ mkdir centos_vagrant_project

重开终端，使用 centos_vi对vagrantfile进行编辑，并且一定要去掉前面的#号注释！！（不会使用vim 命令的也可使用文本编辑)，修改如下：

第一个文件夹目录是你本机要映射到虚拟机的目录，第二个是你虚拟机上的目录,第二句config.vm.synced...是将原本的默认路径禁止掉
但是这里有个坑，在我以为配置完成后，centos_reload重启后，在本机的centos_vagrant_project文件夹中做了一些改动，发现在虚拟机里并没有任何变化,经过排查，发现是虚拟机映射的那个目录（后面那个）路径不对，应该是：/home/vagrant/centos_vagrant_project ,即这个路径是绝对路径, pwd命令可以查看文件路径
需要注意的是，前面的本机的目录 ～/centos_vagrant_project里面的波浪线代表的是宿主目录，即 /users/username
这样目录映射共享就做好了，在本机的文件夹下，添加一个文件，会发现在虚拟机里的文件也同步了。

外部访问与端口转发

自己安装Nginx去做域名映射太复杂，这里推荐一个简便的工具——宝塔面板，当然你也可以自己安装Nginx去折腾...
登录到虚拟机，使用 root 账户

$ centos_ssh
$ sudo su -

使用以下命令安装：

$ yum install -y wget && wget -O install.sh http://download.bt.cn/install/install.sh && sh install.sh

安装完成后，会分配一个账户及密码给你，一定要记好

如果之前你已经装了Nginx，可以使用命令删除它

$ yum remove nginx

修改vagrantfile做端口转发与外部访问
centos_vi打开并编辑vagrantfile文件，配置如下

简单说一下，guest是虚拟机上对应的端口，host是本机对应的端口，由于我本机80端口常用来做项目，避免哪天不小心开着虚拟机，端口被占用，还一直找不到原因，所以选择了不常用的8089
本机的8888端口也对应虚拟机的8888端口，即之前安装宝塔的时候它需要的端口。配置好后重启虚拟机，浏览器里输入127.0.0.1:8888，使用之前分配给你的账户和密码，登录到宝塔面板，登录后最好改个好记的账户名和密码

域名映射

打开宝塔面板，在 “软件管理” 中安装你需要的，比如：Nginx、PHP、Mysql...
在 “网站” 中可以添加站点，但是使用宝塔面板建站的时候默认给你建到了 www/wwwroot目录下，不过问题也不大
推荐使用 SwitchHosts 软件管理你本地的hosts

域名映射示例

在本地创建test_erp文件夹，路径为'~/my-pro/test_erp'
新建站点时，路径为/www/wwwroot/test_erp，域名为test-erp.com
建好站点不用再进到虚拟机建目录，宝塔会帮你创建好
使用SwitchHosts配置hosts站点：127.0.0.1 test-erp.com
增加vagrantfile的配置，做好目录映射，重启虚拟机
浏览器中使用 test-erp.com:8089访问

宝塔域名配置：

页面如下：

本机文件路径：

虚拟机文件路径：

vagrantfile文件配置：

打包镜像

$ vagrant package --output centos-7-ydj.box --vagrantfile Vagrantfile

输出结果：

➜  centos_vagrant vagrant package --output centos-7-ydj.box --vagrantfile Vagrantfile
==> default: Attempting graceful shutdown of VM...
==> default: Clearing any previously set forwarded ports...
==> default: Exporting VM...
==> default: Compressing package to: /Users/zhangyilan/centos_vagrant/centos-7-ydj.box
==> default: Packaging additional file: Vagrantfile
➜  centos_vagrant ls
Vagrantfile      centos-7-ydj.box centos-7.box

打包完成！！

tips

每次修改完vagrantfile文件或者对虚拟机做了操作，一定要reload重启！！
Nginx配置易出现403 Forbbiden 权限问题，涉及到linux 的目录/用户/权限等系列问题
端口、文件名等等，主机和虚拟机最好保持一致，不然会很头疼的
涉及到服务器等相关的，不学点 linux、vim 命令，几乎动不了手...

结语

折腾服务器，搭建环境是一个需要耐心、恒心的过程，会遇到各种各样的问题，这个时候就需要去google，不断排查bug，并且要记录，免得再次掉坑里。
合理使用工具也很重要，毕竟咱不是专业的运维er...
Finally , 小哥哥小姐姐们，如果觉得OK，不要吝啬你的小心心咯 (´▽`ʃ♡ƪ),躁起来吧！