[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