基于nginx的angularjs项目部署流程

一、项目目录结构：

D:\EldonZhao\git\Controller\web 的目录

2017/04/10  10:56              .
2017/04/10  10:56              ..
2017/03/06  20:24                41 .bowerrc
2017/03/06  20:24               436 .editorconfig
2017/03/06  20:24                11 .gitattributes
2017/03/06  20:24                62 .gitignore
2017/04/10  10:58              .idea
2017/03/06  20:24               170 .jscsrc
2017/03/06  20:24               256 .jshintrc
2017/04/10  10:56              .tmp
2017/03/06  20:24               310 .yo-rc.json
2017/04/07  16:54              app
2017/04/07  15:11             1,003 bower.json
2017/04/07  11:38              bower_components
2017/04/10  10:57              dist
2017/03/06  20:24            13,054 Gruntfile.js
2017/03/08  10:07              node_modules
2017/03/09  10:10             1,386 package.json
2017/03/06  20:24               285 README.md
2017/04/07  15:11              test
              11 个文件         17,014 字节
               9 个目录 187,551,342,592 可用字节

其中dist目录是在grunt --force后生成的，应该就是打包后的文件。

二、压缩包目录：

D:\EldonZhao\git\Controller\web\dist 的目录

2017/04/10  10:57              .
2017/04/10  10:57              ..
2017/04/10  10:57             3,221 404.html
2017/04/10  10:56              bower_components
2017/04/10  10:57              images
2017/04/10  10:57             2,434 index.html
2017/03/06  20:24                45 robots.txt
2017/04/10  10:57              scripts
2017/04/10  10:57              styles
               3 个文件          5,700 字节
               6 个目录 187,551,338,496 可用字节

三、使用web服务器运行：

我这里使用的是nginx做简单的测试，主要涉及如下步骤：

• a. nginx服务安装：

  从官网下载nginx安装文件，然后安装即可，注意勾选把执行文件加入PATH的选项。

• 修改nginx.conf文件：

    server {
        listen       80;
        server_name  localhost;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location / {
            root   D:\EldonZhao\git\Controller\web\dist;
            index  index.html index.htm;
        }

如上所示，主要修改location属性。

• 启动服务：

nginx的起停比较奇怪，不是杀进程就可以的，启动时直接nginx.exe就可以，但是停止时需要执行nginx.exe -s stop。nginx.exe -h可以知道原因。

• 访问本地80端口：

step1.png

可见打开页面并不是想象那样了，查看错误信息是某些组件没有引入成功。

Uncaught Error: [$injector:modulerr] Failed to instantiate module webApp due to:
Error: [$injector:modulerr] Failed to instantiate module ui.router due to:
Error: [$injector:nomod] Module 'ui.router' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

四、解决js引用问题：

• a.问题发现：

  这个问题的定位过程还是很痛苦的，也趁此机会了解了【grunt整合版】30分钟学会使用grunt打包前端代码，真的是一片很好的文章，对grunt的结构有了更加深刻的了解。
  在根据文章走读Gruntfile.js文件的时候发现如下代码：

    compass: {
      options: {
        sassDir: '<%= yeoman.app %>/styles',
        cssDir: '.tmp/styles',
        generatedImagesDir: '.tmp/images/generated',
        imagesDir: '<%= yeoman.app %>/images',
        javascriptsDir: '<%= yeoman.app %>/scripts',
        fontsDir: '<%= yeoman.app %>/styles/fonts',
        importPath: './bower_components',
        httpImagesPath: '/images',
        httpGeneratedImagesPath: '/images/generated',
        httpFontsPath: '/styles/fonts',
        relativeAssets: false,
        assetCacheBuster: false,
        raw: 'Sass::Script::Number.precision = 10\n'
      },
      dist: {
        options: {
          generatedImagesDir: '<%= yeoman.dist %>/images/generated'
        }
      },
      server: {
        options: {
          sourcemap: true
        }
      }
    },

这段compass代码感觉很有用处，它定义了各种类型资源文件的打包配置，但是脑海闪过一丝不详的感觉，好像从最开始搭建环境的时候，我的compass组件就不是很好用，重新检查一遍编译日志，看到如下一部分内容：

编译日志太多，找不到了....反正就是compass没有安装的告警，使用--force可以跳过。

跳过是跳过了，但是问题就是compass配置的事务都不执行了，导致了文件没有编译到dist目录去。

• b.问题解决：

  感觉首先还是要解决compass组件的安装问题，开始的时候一直查找grunt-contrib-compass的安装解决方法。后来了解到compass是一个公共组件，可以通过ruby安装：

gem update --system && gem install compass

安装好compass后重新编译：

grunt build --force

发现编译日志中有如下日志，说明compass组件没有问题了：

Running "compass:dist" (compass) task
directory .tmp/styles
        write .tmp/styles/login.css (1.515s)
        write .tmp/styles/main.css (1.932s)
        write .tmp/styles/natgw.css (2.006s)
        write .tmp/styles/nattbl.css (2.016s)
        write .tmp/styles/oplog.css (2.148s)
Done, without errors.

打开页面还是提示部分引用不存在，页面出现问题，但是可喜的一点是，查看dist目录发现css文件都打包到dist/styles/main.edb685c7.css文件中了，说明修复compass问题还是很有必要的（前期这个文件大小为0，根本没有打包css文件）。

• 继续解决js应用问题：

  这里的解决还是有点碰巧的，请看下图：
  
  

  requirejs.png
  
  图中方框里面的代码开始是放置在代码段中的，导致没有编译完这部分代码都被删除了，发现这个代码段中的引用都是自动加入的，所以不能添加到这里。 后来修改到代码段中，就出现了上面说的问题，编译都没有问题，但是引用的js不全，后来比较知道，这段代码中的引用的js都是本项目自身创建的js文件。
  所以这部分手动添加的依赖只能放在上图红框中，(⊙﹏⊙)b。

重要：上面房中红框中也是不对的，需要放在和之间。

问题回归：

使用grunt build打包代码，使用nginx服务加载dist目录下静态文件，chrome打开localhost:80地址，页面正常显示：

step2.png

---

参考资料：

• 基于Flask-Angular的项目组网架构与部署
• Linux下uWSGI+NGINX部署Django+AngularJs
• 【Yeoman】热部署web前端开发环境
• Grunt：任务自动管理工具
• grunt搭建前端项目
• 【grunt整合版】30分钟学会使用grunt打包前端代码