Web项目部署(Flask Angular2 Nginx)

独立弄了一个项目，也是锻炼自己的工程能力，使用了比较常用的框架，后端Flask，前端Angular2，采用前后端完全分离的方式，通过接口传输json，但是在具体部署过程中，查找资料较为零散，故整理如下，希望能在自己提高的同时帮助别人。

一、部署环境

服务器架设在阿里云，linux环境为
* CentOS7.3
* mysql 5.6
* Python2

二、Flask项目部署

flask项目具体就不详细介绍了，这里只把启动脚本列出，此处用nohup启动，当然还可以用supervisor启动。此例子中flask启动文件，名为 main.py

from flask_bootstrap import Bootstrap from flask import Flask from flask_cors import CORS app = Flask(__name__) # 解决跨域问题 send_wildcard=True) CORS(app, supports_credentials=True) if __name__ == '__main__': app.run(host='0.0.0.0', port=8090,debug=True)

然后使用nohup在后台启动（尽量使用全路径）

nohup python main_test.py > main_test.log 2>&1 & 三、Angular2发布 1、安装nodejs yum install -y nodejs # 查看安装是否成功 node -v 2、安装angular cli npm install -g @angular/cli

如果出现长时间加载，可切换淘宝镜像后再安装
安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org 3、安装依赖包

在有package.json的目录下

npm install

IDE中运行

ng serve 或 npm install， 在localhost:4200中查看 4、打包

项目文件夹下生成dist文件，里面是打包后的文件。
在项目主目录下输入以下命令：

ng build # 或者 ng build --prod

成功则输入类似于下面的信息：

Date: 2017-10-14T08:19:18.595Z Hash: aa580b91f10a49a65d87 Time: 28823ms chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered] chunk {main} main.bundle.js, main.bundle.js.map (main) 55.9 kB {vendor} [initial] [rendered] chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 217 kB {inline} [initial] [rendered] chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 163 kB {inline} [initial] [rendered] chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 5.74 MB [initial] [rendered]

并生成了新的目录dist及其下的子文件/目录，此时则成功将应用编译成静态资源。

5、如果提示版本不兼容 则需要安装指定版本的Angular CLI 或者升级nodejs 5.1 升级nodejs

如果nodejs版本较低，可以用一种非常简单的方法来管理你的Node版本，即使用Node Binary管理模块“n”。

1）首先：查看当前node版本：node –v

2）安装n模块：

npm install -g n

3）升级到指定版本/最新版本（该步骤可能需要花费一些时间）升级之前，可以执行n ls （查看可升级的版本）

n 6.9.1

或者你也可以告诉管理器，安装最新的稳定版本

n stable

4）安装完成后，查看Node的版本，检查升级是否成功 node -v

注：如果得到的版本信息不正确，你可能需要重启机器

扩展说明：
有很多同学会发现，安装完成之后，用node –v查看，还是老版本，安装未生效。

原因：
n 切换之后的 node 默认装在 /usr/local/bin/node，先用 which node 检查一下当前使用的 node 是否是这个路径下的。如上缘由，一般都是因为当前版本指定到了其他路径，更新下/etc/profile文件指定即可。轻松解决。

5.2 安装的特定版本的 Angular CLI

此处以安装的Angular CLI 5.2.0的版本为例

卸载之前的版本

npm uninstall -g @angular/cli

清除缓存，确保卸载干净

npm cache verify ，在低版本的nodejs里面清除缓存使用的命令是npm cache clean

检查是否卸载干净，输入命令

ng -v # 若显示command not found则卸载干净

安装指定版本

npm install -g @angular/cli@1.5.2

检查版本号 看是否安装成功

ng -v 6、Error: Local workspace file ('angular.json') could not be found 报错处理

如果执行 ng build --prod 时报错

Error: Local workspace file ('angular.json') could not be found

可尝试如下方法（取自于stackoverflow）

$ ng update @angular/cli --migrate-only --from=1.7.4 # This removed .angular-cli.json and created angular.json. # If this leads to your project using 1.7.4, install v6 locally: $ npm install --save-dev @angular/cli@v6.0.0-rc.4 # And try once again to update your project with: $ ng update @angular/cli --migrate-only --from=1.7.4 四、Nginx配置 1、前提

服务器已经安装nginx，并假设nginx安装目录为/usr/local/nginx
nginx 的部分相关命令：

- nginx : 启动服务 - nginx -s stop : 先查出 nginx 进程 id，然后使用 kill 命令强制杀掉进程 - nginx -s quit : 等待 nginx 进程处理任务完毕，然后再进行停止 - nginx -s reload : 重启服务 - ps aux|grep nginx : 查看 nginx 进程 2、准备源文件

拷贝项目编译后的dist目录下的所有文件到服务器上，比如拷贝至/usr/local/web/home

3、配置nginx