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編譯安裝

1. cd nginx-1.9.9
2. ./configure --prefix=/usr/local/nginx --with-http_stub_status_module
   這裏也可以添加其他模塊，例如：rewrit模塊（--with-pcre）  --prefix指定安裝的目錄  
   --with-http_stub_status_module啓用狀態統計   
   
3. 如果是使用wget方式則configure時，需要指定pcre 
   
   ./configure --prefix=/usr/local/nginx \

   --with-http_ssl_module --with-http_spdy_module \

   --with-http_stub_status_module --with-pcre
4. make && make install
5. 檢測配置或安裝是否成功：/usr/local/nginx/sbin/nginx -t

6. 如果出現下列信息，則標識安裝或配置成功

    

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

    

7.  啓動，停止nginx服務

   1 2	#/usr/local/nginx/sbin/nginx #/usr/local/nginx/sbin/nginx -s stop 注意： 如果 你當前所在目錄 是  項目目錄  則執行執行如上的語句  即可啓停 nginx 如果進入倒對應的目錄 反而啓動不成功       其次，注意端口：nginx默認監聽的端口是 80   所以啓動後訪問  直接填寫IP地址即可訪問

8. nginx啓動好後啓動tomcat，此時輸入http://主機ip地址即可看到“My web!” 
9. 在/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;
        }