独立弄了一个项目,也是锻炼自己的工程能力,使用了比较常用的框架,后端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

这里可以选择编辑原始配置文件,也可以在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端口,用于访问flask
server {
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)的更多相关文章

  1. Web项目部署指南

    Web项目部署指南 本文记录了部署Vue项目到阿里云服务器上的过程,其中云服务器的操作系统是CentOS 7,Web服务器用的是nginx.因为项目涉及发送异步请求,而由Flask编写的后端应用监听的 ...

  2. Spring整合Redis&JSON序列化&Spring/Web项目部署相关

    几种JSON框架用法和效率对比: https://blog.csdn.net/sisyphus_z/article/details/53333925 https://blog.csdn.net/wei ...

  3. Linux06 /Python web项目部署

    Linux06 /Python web项目部署 目录 Linux06 /Python web项目部署 1. 部署方式 2. 纯后端代码部署/CRM为例 1. 部署方式 2. crm项目详细部署步骤 3 ...

  4. 如何将Java Web项目部署到服务器上

    转自:(此处更详细)http://blog.csdn.net/gulu_gulu_jp/article/details/50994003 一.前言 前面我们已经尝过了在云服务器上部署代码的甜头了,现在 ...

  5. 怎样将本地web项目部署到腾讯云服务器上?

    怎样将本地web项目部署到腾讯云服务器上? 1.本地计算机的工作: (1).用eclipse新建一个web项目,然后在webcontent下新建一个index.html,然后在本地部署到Tomcat服 ...

  6. Maven Web项目部署到Tomcat下问题

    但是也遇到了很多问题,下面记录一下Web项目部署到Tomcat下的问题 1.普通的WEB项目,就是虽然是用maven搭建的,但是没有使用profiles.xml文件来配置参数.这样的项目可以通过以下的 ...

  7. web项目部署在不同环境中需要修改配置文件的解决方法

    web项目部署中存在的配置文件问题: web项目以war包的形式,部署在tomcat中,同时项目需要访问一些其他的东东,例如访问数据库,调用别的项目的API.在开发中,这些需要访问的外部地址通常以配置 ...

  8. Eclipse导入git上的maven web项目 部署 - lpshou

    http://www.tuicool.com/articles/fqm2Qf   推酷 文章 微博 主题 站点 活动 应用 周刊 登录   Eclipse导入git上的maven web项目 部署 - ...

  9. eclipse修改web项目部署路径 wtpwebapps webapps 的设置

    eclipse修改web项目部署路径 wtpwebapps   webapps  的设置,在添加完server------>tomcat后,到server控制台进行设置 eclipse默认的部署 ...

随机推荐

  1. POJ 1755

    列出不等式后,把同时除Z把它去掉. 注意了,这里应该 是把直线变两点表示的向量更为简单,我开始就直接用直线写,后来,唉,写不下去了.. #include <iostream> #inclu ...

  2. js限制checkbox选中个数

    今天在做项目时,碰到一个问题,我须要展示多个checkbox复选框,而仅仅能同意最多选6个.调试了老半天.最终出来了,代码例如以下: <SCRIPT LANGUAGE="JavaScr ...

  3. JavaScript或者Jqurey把控件id作为參数来调用

    1.JavaScript把控件id作为參数调用 <script type="text/javascript"> function xx(pmba) { document ...

  4. luogu2754 星际转移问题 网络流

    题目大意:地球与月球间有可容纳无限人的太空站,还有在太空站与星球间按周期行驶的.有固定容量的太空船,每一艘太空船从一个太空站驶往任一太空站耗时均为 1.地球上有一定数量的人,问所有人到月球最少需要多少 ...

  5. hdoj--1151--Air Raid(最大独立集)

    Air Raid Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total S ...

  6. 自定义数据类型 C++ 结构体类型 共同体类型 枚举类型 类类型{}

    一.结构体类型 结构体类型,共用体类型,枚举类型,类类型等统称为自定义类型(user-defined-type,UDT). 结构体相当于其他高级语言中的记录(record);例如: struct St ...

  7. C++字符串与指针 所有的内容也就这么多了。

    1.定义一个字符串数组并初始化,然后输出其中的字符串. #include <iostream> using namespace std;int main(){ char str[]=&qu ...

  8. [ASP.Net] MVC2,3,4,5的不同

    现在MVC的技术日趋成熟,面对着不同版本的MVC大家不免有所迷惑 -- 它们之间有什么不同呢?下面我把我搜集的信息汇总一下,以便大家能更好的认识不同版本MVC的功能,也便于自己查阅. View Eng ...

  9. OC数组和字典中存入niu值

    在NSArray和NSDictionary中nil有特殊的含义.但是某些时候,我们必须要放入nil怎么办? 要想放入nil就必须用到一个类NSNull,这个类只有一个类方法,就是null.[NSNul ...

  10. Oracle-基本SQL语句

    --添加一个表 create table TestUser ( id int primary key , name varchar(20) , address varchar(20) ) /* *设置 ...