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 Bootstrapfrom flask import Flaskfrom flask_cors import CORSapp = 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

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

Date: 2017-10-14T08:19:18.595ZHash: aa580b91f10a49a65d87Time: 28823mschunk {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

此处以安装的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 

四、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

这里可以选择编辑原始配置文件，也可以在nginx/conf.d/下新建一个conf文件，因为如果该文件夹下有配置文件，会默认先用这个文件
新建一个配置文件

sudo vi /usr/local/nginx/conf/conf.d/flask_nginx.conf

flask_nginx.conf
修改http->server节点下 localhost和error_page 404的值如下：

# 监听80端口，用于前端访问server { ???listen 80; ???server_name 39.105.61.38; ???location / { ???????root /var/www/dist; ???????index index.html index.html; ???} ???#error_page ?404 ?????????????/404.html; ???error_page 404 ???????????????/;}# 将8098端口，定向到本机8090端口，用于访问flaskserver { ???listen 8098; ???server_name 39.105.61.38; ????location / { ???????proxy_pass http://127.0.0.1:8090; ??????????proxy_set_header Host $host; ???????proxy_set_header X-Real-IP $remote_addr; ???????proxy_set_header REMOTE-HOST $remote_addr; ???????proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; ???}}

4、部署

在nginx官网中下载nginx
把dist文件夹下的打包文件拷贝到nginx/html下并重命名为myProj
修改conf/nginx.conf文件

location / { ???????????root ??html/myProj; ???????????index ?index.html index.htm; ???????}

启动nginx
在浏览器中输入localhost:80即可看到项目

五、注意事项

所有以上配置结束，可能依然访问不了（这就是让我折腾到半夜的问题）
经过排查，都没问题啊，始终是80端口可以访问，任何一个服务换到80都能访问，其他不行，听着酷玩乐队的歌，突然灵光一闪，看一下阿里云，果然，这里有个安全组，默认是关闭其他端口的，需要配置安全组。

1、阿里云服务器

怎么开放阿里云端口

开放了服务器的端口，访问端口不是 timeout 了，出现了 拒绝访问
果然还有centos的防火墙

2、防火墙配置

CentOS 7默认使用的是firewall作为防火墙，也可改为iptables防火墙。
firewall操作：

# service firewalld status; #查看防火墙状态

disabled 表明 已经禁止开启启动 enable 表示开机自启，inactive 表示防火墙关闭状态 activated（running）表示为开启状态

$ service firewalld start; ?或者 #systemctl start firewalld.service;#开启防火墙$ service firewalld stop; ?或者 #systemctl stop firewalld.service;#关闭防火墙$ service firewalld restart; ?或者 #systemctl restart firewalld.service; ?#重启防火墙$ systemctl disable firewalld.service#禁止防火墙开启自启$ systemctl enable firewalld#设置防火墙开机启动$ yum remove firewalld #卸载firewall

安装iptables防火墙及操作：

#yum install iptables-services#安装iptables防火墙#vi /etc/sysconfig/iptables#编辑防火墙配置文件，开放3306端口

添加配置：

-A INPUT -p tcp -m state --state NEW -m tcp --dport 3306 -j ACCEPT#systemctl restart iptables.service #最后重启防火墙使配置生效#systemctl enable iptables.service #设置防火墙开机启动

Web项目部署(Flask Angular2 Nginx)

原文地址：https://www.cnblogs.com/pinetreeps/p/Web-xiang-mu-bu-shu-Flask-Angular2-Nginx.html