公司为了对官网做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便可以访问我们开发的前端页面。