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

前端之家收集整理的这篇文章主要介绍了【Angular2项目在linux环境构建与部署】--(2)项目部署前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

首先从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 primeng@4.2.2

7.部署整个项目:ng build --env=prod --base-href ./


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

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

9.配置Nginx文件
打开/usr/local/Nginx/conf/Nginx.conf文件


   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


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

原文链接:https://www.f2er.com/angularjs/145380.html

猜你在找的Angularjs相关文章