Angularjs2项目打包发布以及部署在Linux上

第一部分，打包项目，主要参考来自：https://segmentfault.com/a/1190000007921675

我们在使用Angular2项目时，直接使用官网提供的基础配置文件，在NodeJS下面就可以生成一个新的ng2项目，但是这样非常不便利，每次都要新建目录，复制配置文件，使用Node命令安装支持库，最后才是写代码。Angular-cli就是用来简化这一操作的，而且官方配置文件不包含打包命令，对于新手来说，对System打包和webpack打包都不熟悉的情况下，使用Angular-cli能够非常方便的生存一样ng2项目，打包ng2项目，集中在编写项目代码上，省略繁琐的配置过程。

操作环境：windows 10 nodeJs版本： v6.11.1 npm版本：3.10.10 在node命令行中进行

1. 安装Angular Cli ： npm install -g angular-cli # -g表示全局安装

2.使用Angular Cli初始化ng2项目，创建名为“my-ng2-app”的项目： ng new my-ng2-app

3.如果要把现有的目录转化成ng2目录，运行如下的命令：

mkdir ng2-test

cd ng2-test

ng init

4.运行项目： ng serve 或者 npm start,

5. 访问项目： http://localhost:4200 默认是 4200端口

6.如果想修改端口： ng serve -p 3000 <假设我行修改成3000端口>

7.编译项目： ng build <如果想编译成静态文件，然后发布到linux上运行，需要先进行编译>

第二部分：部署静态页倒nginx页面惨要参考来自：http://blog.csdn.net/shaoyangdd/article/details/50321829

操作的前提：linux运行环境

8.安装nginx运行环境参考至：https://www.cnblogs.com/yingsong/p/5950452.html

系统：centos nginx版本：nginx-1.9.9.tar.gz

8.1 解压 nginx-1.9.9.tar.gz 在local目录 tar -zxvf nginx-1.9.9.tar.gz

8.2 安装必须要的支持软件： yum -y install make zlib zlib-devel gcc-c++ libtool openssl openssl-devel // 主要是make gcc这些东西

8.3 安装PCRE，其作用是让 Ngnix 支持 Rewrite 功能。使用yum源安装：yum -y install pcre*

8.4编译安装

cd nginx-1.9.9
./configure --prefix=/usr/local/nginx --with-http_stub_status_module
这里也可以添加其他模块，例如：rewrit模块（--with-pcre） --prefix指定安装的目录
--with-http_stub_status_module启用状态统计
如果是使用wget方式则configure时，需要指定pcre

./configure --prefix=/usr/local/nginx \

--with-http_ssl_module --with-http_spdy_module \

--with-http_stub_status_module --with-pcre
make && make install
检测配置或安装是否成功：/usr/local/nginx/sbin/nginx -t
如果出现下列信息，则标识安装或配置成功

the configuration file /usr/local/nginx/conf/nginx.conf syntax is othe configuration file /usr/local/nginx/conf/nginx.conf was tested successfully

启动，停止nginx服务

1 2	`#/usr/local/nginx/sbin/nginx` `#/usr/local/nginx/sbin/nginx -s stop` 注意：如果你当前所在目录是项目目录则执行执行如上的语句即可启停 nginx 如果进入倒对应的目录反而启动不成功其次，注意端口：nginx默认监听的端口是 80 所以启动后访问直接填写IP地址即可访问

nginx启动好后启动tomcat，此时输入http://主机ip地址即可看到“My web!”
在/etc/profile 添加nginx的path全局环境变量，则可以直接使用nginx命令

9.将编译后好的目录提交至 linux 某个目录下（shellx5,xftp5搭配使用），如： /home/tonglunXXX/dist/

10.进入nginx的安装目录：更改配置文件/usr/local/nginx/conf 下的nginx.conf，如下更改：

server {
listen 80;
server_name localhost;

#charset koi8-r;

#access_log logs/host.access.log main;

        location / {
           # root   html;
           # index index.html index.htm;
              root /home/myapp/navi; // 目录
             index PersonalNavi.html; // 首页
        }

#error_page 404 /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504 /50x.html;
        location = /50x.html {
            root   html;
        }

Angularjs2项目打包发布以及部署在Linux上

猜你喜欢