阿里云-云小站(无限量代金券发放中)
【腾讯云】云服务器、云数据库、COS、CDN、短信等热卖云产品特惠抢购

Web项目部署(Flask Angular2 Nginx)

245次阅读
没有评论

共计 4531 个字符,预计需要花费 12 分钟才能阅读完成。

独立弄了一个项目,也是锻炼自己的工程能力,使用了比较常用的框架,后端 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 #设置防火墙开机启动

正文完
星哥玩云-微信公众号
post-qrcode
 0
星锅
版权声明:本站原创文章,由 星锅 于2022-01-21发表,共计4531字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
【腾讯云】推广者专属福利,新客户无门槛领取总价值高达2860元代金券,每种代金券限量500张,先到先得。
阿里云-最新活动爆款每日限量供应
评论(没有评论)
验证码
【腾讯云】云服务器、云数据库、COS、CDN、短信等云产品特惠热卖中