[Ionic]從代碼打包到代碼部署

簡單總結一下Ionic項目的手動打包與發佈流程:

• typescript/angular/ionic的關係

  • Typescript: 是javascript的超集，也即包含了javascript所有的元素，同時它也是面向對象編程語言；
  • Angular: 除了AngularJs(1.0), 當前新版的angular是基於typescript構建的一個web前端框架；
  • Ionic: Ionic默認是基於Angular之上(也開始支持Vue/React)構建的一個UI框架，重點實現了UI庫與交互方面的庫。

• 代碼打包

cd <工程根目錄>
ionic build --prod --release
# 打包後會得到一個www目錄，裏面就是打包後的代碼文件
# 正式發佈用的代碼需要加上參數--prod, 達到優化代碼/減少發佈文件的體積/代碼混淆等效果。

• 代碼部署

# 假設使用nginx作爲反向代理，那麼www下的文件可以配置到nginx的某個靜態目錄下， 比如:

server {
    server_name  some.example.com;
    client_max_body_size 100m;

    gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/octet-stream;

    location / {
       root /usr/share/nginx/your_directory/; # 打包好的www下的文件夾及文件放到其目錄下
       try_files $uri $uri/ /index.html =404;
       index index.html;
    }
}

• 瀏覽器訪問

# 在瀏覽器中輸入以下URL, 即可訪問我們剛剛正式發佈的網站。
http://some.example.com