express build生产环境部署脚本

       首先我做过很多nodejs和react项目，每次都会逃避不了的就是在服务器上去部署一个测试环境（如果小项目的话，也可以叫生产环境），网上很多资料都不全，我也经过很多自己摸索，总结了一套可以完全从0开始部署的流程分享给大家。

部署前安利两个工具，我都会使用，不错的。Xshell6以及WinSCP，前者是终端模拟器，需要破解的。后者是终端文件管理器，这个百度有的下，下面会用到这两个东西。

现在正式开始了：

第一步：申请服务器

你需要先申请个服务器，我一般用云服务器，可以阿里云也可以腾讯云，一般我的申请配置如下：

服务器：2核4G，5Mpbs带宽，系统盘40GSSD云盘，系统为centOS7；

数据库：RDS云数据库基础版，Mysql5.7；（在这里选区域的时候，记得一定要和服务器选一个区域，速度会快）

项目的文件架构（因为我有项目模板，你做了很多之后也可以行程自己的模板，这个我以后会具体介绍）：

--项目文件夹
    --admin-pc   //桌面版的后台管理前端工程（以这个为例展开）
        --build         //编译所需的文件
        --config        //nodejs配置文件
        --dist          //生成的执行目录
        --src           //源文件目录
        --static        //静态资源文件
        --node-modules  //依赖库，npm install安装之后才会出现的
    --oem-mobile //客户端的前端工程
    --server     //服务端工程
    --vhost      //虚拟服务器的配置

第二步：nginx安装

首先利用xshell6进入到我们上一步申请的云服务器当中，然后下一步：

1）安装make

yum -y install gcc automake autoconf libtool make

2）安装g++

yum install gcc gcc-c++

3）选定安装环境，这里我的默认选择是：/usr/local/src

安装PCRE库

cd /usr/local/src
wget https://ftp.pcre.org/pub/pcre/pcre-8.39.tar.gz 
tar -zxvf pcre-8.39.tar.gz
cd pcre-8.39
./configure
make
make install
cd /usr/local/src 
wget http://zlib.net/zlib-1.2.11.tar.gz
tar -zxvf zlib-1.2.11.tar.gz
cd zlib-1.2.11
./configure
make
make install

这里大家注意，每一个换行都是一句执行，知道执行完毕后再接着输入，如果你完全按照我的顺序，应该不会出错。里面的版本注意，这是我用的版本号，你可以选择用更新的版本，不过我不知道会不会出现别的问题。

4）安装openssl

这一步不是必要的，不过我建议安装上，因为如果你的网址之后要用的https，那么你就得装，想要在微信里面打开，你就必须是https的。

cd /usr/local/src
wget https://www.openssl.org/source/openssl-1.0.1t.tar.gz
tar -zxvf openssl-1.0.1t.tar.gz

5）安装nginx

到现在才真正开始安装nginx

cd /usr/local/src
wget http://nginx.org/download/nginx-1.1.10.tar.gz
tar -zxvf nginx-1.1.10.tar.gz
cd nginx-1.1.10
./configure
make
make install

到这里第二步算是完成了，大家还顺利吧，接下来我们要进入下一步。

第三步：安装nodejs

1）同样我们需要选定安装的环境

cd /usr/local/src

2）下载nodejs新的bin包

wget https://nodejs.org/dist/v10.14.2/node-v10.14.2-linux-x64.tar.xz

3）然后解压它

xz -d node-v10.14.2-linux-x64.tar.xz
tar -xf node-v10.14.2-linux-x64.tar

4）这一步很关键啊，因为这一步是为了让它能够全局调用，相当于Windows里面的环境变量设置

ln -s /usr/local/src/node-v10.14.2-linux-x64/bin/node /usr/bin/node
ln -s /usr/local/src/node-v10.14.2-linux-x64/bin/npm /usr/bin/npm

大家要看清楚后面是有空格的，代表是把某个文件复制到指定的目录当中，在centos7里面默认的全局目录就是/usr/bin/

5）我们来测试一下：

node -v
npm –v

如果这个时候能够看到版本号，说明已经安装成功了。

6）接下来全局安装pm2

npm install –g pm2
ln -s /usr/local/src/node-v10.14.2-linux-x64/bin/pm2 /usr/bin/pm2

虽然这里-g代表是全局安装的意思，但是本人亲测，还需要手动将它放置到全局目录中去，然后我们同样来测试一下

pm2 -v

如果看到版本号，那么恭喜你，已经整个生产环境部署成功了，这个时候离成功已经完成50%了哦！加油！

第四步：正式进行项目的搭建，这一步比较长，大家有点耐心哦！

1）通过WinSCP连接我们申请的云服务器，然后我们进入到root文件夹下面（我是把项目文件都放在这个文件夹下面的，你们可以自己定）

打码了，每一个文件夹都是一个项目，这里我就以scteam为例来讲吧。我们打开这个项目文件，可以看到这些工程

2）这里我们先改server端配置，可以看到如下文档（我的因为运行过了，文件会多一点）

修改package.json，找到最上面的name,把它改写成自己的工程名，其他由很多东西，比如版本号，你也可以改。

修改pm2.json，修改很多东西：

Name:     填写nodejs服务名称，和上述一致
Cwd:       填写server的目录
MYSQL_HOST:     填写生产环境的数据库host的地址
MYSQL_PORT：    填写生产环境的数据库管理端口
MYSQL_USER:      填写数据库管理用户名
MYSQL_PASSWORD:  数据库密码
MYSQL_DATABASE： 数据库名
SERVER_PORT:      访问nodejs服务的端口

我的是这样写的：

大家要注意一下mysql_host，如果之前我们申请服务器和数据库的时候是在同一个区，那这里其实我们可以填写内网的地址就行了，如果不在同一区，就不能用内网访问了。

同样的道理，我们在server/src目录下面有个config.js文件，也是个配置文件，改为和上述pm2.json里相同即可，这是为了区别开发和生产环境的不同，可以设置为一样，当你的工程目录放置在data下面时，pm2.json里的数据库信息才生效，不然只识别devDB里的数据库信息。当然这是我们模板文件，实际你们的可能没有。以下是我的配置：

大家注意一下标红的信息，这句话的意思是如果我的工程文件是放在/data目录下面的，我的配置文件就选择serverDB，如果不是（我们放在了root下面），就选择devDB，这样配置的好处是为了测试环境和生产环境区分开了方便调试的。你们如果不想这么麻烦，改成一样的就行了。

3）然后通过xshell6进入到云服务器，对每一个文件夹工程都进行依赖库的安装；

先对server进行安装：

cd /root/scteam/server
npm install

安装完成之后，进行编译项目，然后开启服务

npm run build
pm2 start pm2.json

这样server就部署完成了。已经离成功只有不到20%了！

4）我们需要配置虚拟服务器的反向代理，也就是vhost文件夹，vhost文件夹下面新建一个.conf的文件，然后输入如下：

server {
  listen 80;
  server_name xxx.xxx.com ;   //自己的域名
  index index.html index.htm ;

  set $node_port 9055;
  set $project_root /root/scteam;

  location / {
    root $project_root/admin-pc/dist; #pc
    try_files $uri $uri/ /index.html;
  }

  location ~ ^/(api|webhook)/ {
    proxy_http_version 1.1;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header Host $http_host;
    proxy_set_header X-NginX-Proxy true;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_pass http://127.0.0.1:$node_port$request_uri;
    proxy_redirect off;
  } 
  location /upload/ {
    alias $project_root/server/runtime/upload/;
  }
}

这里要注意两点，一个是server_name，这个需要你们自己去申请一个域名，把一个域名解析的子域名放进去就行了，如果有需要你们想知道怎么弄的话，请给我留言，我可以再写一篇关于申请子域名的详细步骤。

另一个是location，代表的就是域名后面跟着的怎么写法，就映射到哪个文件页面，比如直接访问xxx.xxx.com，那么就认为后面什么也没有，那就定位到admin-pc/dist目录，然后映射index.html文件。大家只需要修改root后面的就行了。

5）接下来是全局nginx配置更改，利用winSCP进入到目录 /usr/local/nginx/conf，打开nginx.conf文件，改为如下

在文件的末尾的大括号里面添加需要加载的conf文件：

include /root/scteam/vhost/xxx.conf;   //这个文件就是刚刚添加的conf文件

利用xshell6进入到nginx，启动nginx

cd /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx

这个时候，离成功就差最后10%了，再坚持坚持啊！！！

6）后端已经完全部署好了，接下来是前端工程开启，通过xshell6将进入到admin-pc目录，安装依赖库

cd /root/scteam/admin-pc
npm install

7）为了不占用编译资源，前端（除server以外所有项目）都需要在本地编译（npm run build），然后到将编译好的dist文件夹利用winscp上传到服务器admin-pc文件夹下面。

这里我们要注意一下在当前目录下的config文件夹下面的index.js，里面有一段这样的代码：

注意一下这些目录，assetsPublicPath代表你在浏览器里输入的网址是不是xxx.xxx.com，后面没有跟其他东西，这代表根地址，上面对应的就是执行目录。

8）完成后重启nginx，利用xshell6

/usr/local/nginx/sbin/nginx –s reload

这个时候，你可兴奋的在浏览器中输入：xxx.xxx.com，然后按回车

由于是帮别人做的项目，还是打码比较好，o(*￣︶￣*)o。成功了，快开瓶酒庆祝吧！

 

----------------------------------------------------------------------------