浅谈前端线上部署与运维

说到前端部署，可能大多数前端工程师在工做中都是使用的公司现成的部署系统，与SRE对接、一块儿完成前端的部署操做。若是我如今给你一台新注册的云主机，那么你应该怎么作才能把一个前端工程部署到一台云主机上，成为一个能够访问的网页呢？今天咱们就来聊聊前端的部署~

1、构成

一、硬件

首先，一个前端工程要变成一个能访问的服务或者网页，必需要跑在宿主机器上。咱们须要寻找一个线上机器来当宿主机器，所幸国内提供云服务器ECS的大厂有不少，BAT、亚马逊提供的产品本质上没有很大的差异，咱们根据本身的喜爱进行选择便可。本文中，做者使用的是阿里云的主机，1核、2GB、1Mbps、Ubuntu 16.04 64位的机器。

二、软件

硬件申请好了以后，咱们来聊聊最少须要安装哪些软件就能将服务跑起来。咱们须要的软件有：nginx、nodejs、PM二、git。

nginx：做为http服务器接受来自internet的请求，并将请求按配置规则转发给对应的端口。

nodejs：在云主机上提供js的运行环境

PM2：node应用的进程管理器

git：将git仓库的代码远程拉取到云主机上

2、安装

（由于本文使用的线上机器系统是Ubuntu，故软件安装使用的是apt-get。若各位读者的机器是centOS，同义替换成yum便可）

一、安装nvm

• 首先安装必要的包

sudo apt-get update

sudo apt-get install build-essential libssl-dev

• 而后使用wget安装nvm

wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.31.4/install.sh | bash

二、安装git

sudo apt-get install git

三、使用nvm安装node

nvm install stable （安装最新的稳定版本）或

nvm install 4.2.2 （安装具体的版本号）

四、使用npm安装PM2

npm install -g pm2

五、手动安装nginx

• 首先安装nginx依赖 pcre、openssl、zlib

sudo apt-get install openssl libssl-dev

sudo apt-get install libpcre3 libpcre3-dev

sudo apt-get install zlib1g-dev

• 而后手动安装nginx

wget http://nginx.org/download/nginx-1.12.2.tar.gz

tar zxvf nginx-1.12.2.tar.gz

./configure --prefix=/server/runtime/nginx/1.12.2 （prefix参数是本身设置的安装目标路径）

make && make install

3、目录设置

细心的读者会感到好奇，个人nginx为何不用apt-get直接安装，而是要本身动手安装呢？

若是我使用apt-get来进行nginx安装，会自动将软件安装到usr目录下，后续版本的安装会覆盖以前的版本。若是我有在一台服务器上安装多个nginx版本的需求，如：Mainline version 和 Stable version，就须要手动安装来对nginx的版本进行物理划分。

个人目录划分为：

如图所示，在 / (根目录)下新建server目录，而后在server目录下新建app、compile、daemon和runtime四个文件夹。

一、app

app目录下存放开发工程的代码，经过git clone将git仓库的代码pull下来。当服务出现问题时，能够人工登陆云主机，在app目录下经过手动的方式重启服务。

二、compile

compile目录下存放下载的tar包以及从tar包解压出来的文件。若是下载的软件多了，为了便于管理，能够按软件分文件夹存放。

三、runtime

runtime目录是软件安装的目标路径，compile目录下的nginx安装包经过configure指令安装到runtime目录下。runtime内部目录结构如图：

如图所示，为了便于管理，runtime目录下根据软件分文件夹(nginx)，再根据版本分文件夹(1.12.2)。

四、daemon

daemon被称为守护进程，daemon目录下存放的是会一直运行的服务，如nginx。daemon内部目录结构如图：

如图，nginx目录下先根据版本（1.12.2）进行划分，后根据端口（80）进行划分。在多版本nginx、多端口并存的场景下，若是我要快速定位nginx的问题，这种划分会给运维带来极大的便利。须要寻找对应版本和对应端口时，只要寻找文件目录便可。

conf文件夹的内容是从nginx安装目录下的conf文件夹整个复制过来的，咱们本身业务须要的设置就直接修改conf文件夹内的配置文件便可。如此配置的好处在于将本身的配置与nginx预设配置分离，根本不用担忧把nginx玩坏了：）

log文件夹内存放nginx的运行日志，以文件的方式进行存储。

除此以外，在80文件夹下还有两个本身写的脚本文件：up、down。up脚本的做用是对nginx进行拉起，down脚本的做用在于将现运行的nginx kill。这里将拉起操做和kill操做写成脚本，便于运维人员快速、准确的对nginx进行操做。

如此进行server文件夹的目录设置，将服务所需软件与机器的通用软件进行了分离，不只便于云主机的平常维护，同时当须要整个删除服务的时候，直接删除server文件夹便可简单清除。

4、步骤

一、阿里云机器申请好后，在机器上创建一个帐号，便于以后用ssh的方式登陆。

二、linux机器的提示符我的以为很差用，能够选用apt-get安装zsh和oh-my-zsh来提高shell的便利性（逼格）。

三、在 / (根目录)下新建server目录，在server目录下新建app、compile、daemon、runtime四个文件夹。

四、用apt-get安装nvm、git；用nvm安装nodejs；用npm安装PM2；用手动方式安装nginx。

五、在daemon目录下新建conf和log文件夹，log存放日志文件，conf里面的内容是从nginx原生复制过来的，根据业务须要修改里面的nginx.conf文件。

六、阿里云主机默认是不开端口的，须要本身在console控制台中开启对应端口(80)。

七、在app文件夹下使用git clone拉代码，并使用PM2指令启动服务。

八、在daemon文件夹下写nginx配置文件，并启动nginx处理http请求。

5、代码

一、PM2的配置文件代码

二、up脚本代码

三、down脚本代码

四、nginx配置文件代码

6、总结

限于篇幅与做者水平有限，本文粗略的讲述了前端线上机器运维与部署的基础知识。本文采用了手动部署的方式，是为了让读者更清楚的知道前端部署的细节。

后续还有不少优化的事情能够作，好比若是node层会访问数据库(MongoDB)，那么推荐加入MemCache缓存；为了提升部署的快捷性，能够写一个部署脚本，一次性将所有部署操做都使用脚本进行等等。

对此感兴趣或本身实践中遇到问题的观众老爷欢迎与我联系~邮箱：wangxinghang@meituan.com