【Angular4项目在linux环境构建与部署】--(2)项目部署

上一篇我们已经将Angular4项目的环境搭建完毕，接下来开展部署工作。

首先从svn上拉取前端最新的代码，这里以我们的云平台ITOO为例，ITOO前端的整个文件夹是ITOO-FrontEnd，deploy文件是使用gulp对ITOO-FrontEnd中的html和css，js文件进行了压缩。当然gulp也不仅仅只有压缩的功能，对于gulp的学习以后小编将会在接下来的博客中做详细的分享。

1.在/var/lib下建立文件夹 project放置自己deploy文件和ITOO-FrontEnd.  ps：如果没有使用gulp对前端文件压缩，关于deploy文件操作和gulp的安装这几步可以省去。

2. 全局安装gulp:cnpm install gulp -g
3. 定位到前端文件deploy下：下载node库： cnpm install

4. 测试gulp是否安装成功，gulp testImagemin . 这里的testImagemin是前端的gulp配置文件gulpfile.json中建立的gulp.task()中已经定义好的任务名。大家根据配置文件来写命令就好。

5.定位到我们未压缩的前端项目ITOO-FrontEnd下，下载node库。

6.下载angular项目中用到的组件库Primeng: cnpm install [email protected]
 
7.部署整个项目：ng build --env=prod --base-href ./

8.会看到在ITOO-FrontEnd文件夹下多了个同名文件，这边是我们部署后的文件，我们需要把部署好的发在与/usr/local/文件下，与nginx同级文件目录

为了做一个区分，这里我们将部署好的项目更名为ITOO，另外因为访问需要将其放置在/usr/local/文件下。

9.配置nginx文件关键节点和访问路径

打开/usr/local/nginx/conf/nginx.conf文件，

（1）启动gzip压缩，缩小打包后的目体积。修改gzip部分配置文件。（项目比较小的这步可以省略）

（2）配置访问路径，访问地址：服务器ip+端口+配置访问路径的名称

   gzip on;
   gzip_varyon;
   gzip_min_length 2000000;
   gzip_comp_level 5;
gzip_types text/plaintext/css application/json application/x-javascript text/xml application/xmlapplication/xml+rss text/javascript application/javascript image/png image/jpeg application/octet-streamfont/woff2;

10.最后在浏览器中访问我们的服务器地址：192.168.22.186

至此Angular4 前端项目部署完成，感谢您的阅读。