angularjs开发部署流程

公司为了对官网做seo(Search Engine Optimization)优化,提高在搜索引擎中的排名,需要我对网页的keywords优化。
由于之前一直负责服务端,所以接手前端项目我经历了安装node.js、安装@angular/cli、导入项目到IDE、开发、打包、部署的流程。
下面我对上述各个环节进行依次讲解:
1. 安装node.js;
由于node.js中有的npm工具,而npm工具可以帮助我们方便的管理我们需要的类库,因此我们第一步安装node.js工具。安装步骤可以参考:Node.js安装及环境配置之Windows篇
2. 安装@angular/cli;
由于项目依赖angularjs/cli的大量类库,因此我们需要为开发环境安装@angular/cli,安装方式为在cmd窗口运行:npm install -g @angular/cli,安装完成后会显示angular/cli版本;
3. 导入项目到IDE;
我们从gitlab上clone下代码,用idea的open操作,便打开了前端项目;
4. 打包项目;
本来运行npm run build便可以完成打包操作,结果由于@angular/cli版本的问题,报ERROR in ./src/main.ts Module not found。
通过查阅相关资料得知,需要运行npm install enhanced-resolve@3.3.0后再执行npm run build,执行完成后会在项目的根目录出现dist文件夹,dist文件夹便是打包后的内容;
5.部署项目;
这里我们是部署到nginx。
我在nginx.conf的location配置好root后,运行nginx发现服务端的接口地址无法访问。
我对比了npm start运行起来的开发环境和部署到nginx的部署环境访问的接口地址,除了端口不一样(都是localhost+运行端口号),其他路径一致,因此可以排查路径的问题。
在运维同学的帮助下,我拿到了正式环境的nginx.conf文件,对比后发现需要配置upstream和proxy_pass,修改后的nginx.conf文件如下:

http {
    upstream baseapi {
        server *.*.*.*:8080;
        server *.*.*.*:8080;
    }

    upstream cmsapi {
        server *.*.*.*:8080;
        server *.*.*.*:8080;        
    }

    server {
        listen       80;
        server_name  localhost;       

        location / {
            root   D:\angularjs\dist;
            index  index.html index.htm;
            try_files $uri @prerender;
        }   

        location /cmsapi/ {          
          proxy_pass http://cmsapi/;

        } 

        location /baseapi/ {                  
             proxy_pass http://baseapi/;
        }

        location @prerender {
            set $prerender 0;
            if ($http_user_agent ~* "baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator") {
                set $prerender 1;
            }
            if ($args ~ "_escaped_fragment_") {
                set $prerender 1;
            }
            if ($http_user_agent ~ "Prerender") {
                set $prerender 0;
            }
            if ($uri ~* "\.(js|css|xml|less|png|jpg|jpeg|gif|pdf|doc|txt|ico|rss|zip|mp3|rar|exe|wmv|doc|avi|ppt|mpg|mpeg|tif|wav|mov|psd|ai|xls|mp4|m4a|swf|dat|dmg|iso|flv|m4v|torrent|ttf|woff|svg|eot)") {
                set $prerender 0;
            }

            resolver 8.8.8.8;

            if ($prerender = 1) {                               
                set $prerender "127.0.0.1:3000/http://mobile.leplay.cn$request_uri";
                rewrite .* /$scheme://$host$request_uri? break;
                proxy_pass http://$prerender;
            }
            if ($prerender = 0) {
                rewrite .* /index.html break;
            }
        }           

    }

}

现在启动nginx,输入localhost便可以访问我们开发的前端页面。

相关文章

ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中...
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是...
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题,...
Angular实现下拉菜单多选写这篇文章时,引用文章地址如下:h...
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目...
Angular数据更新不及时问题探讨前言 在修复控制角标正确变...