【CentOS-7.4】Flask+Vue+nginx+mysql
笪健
【CentOS7.4】Flask+Vue+nginx+mysql
【升级】
yum update
yum upgrade
yum update安装软件
yum install wget tree vim zip unzip -y官方建议使用 LAMP 架构，不过我的服务器已经安装了 nginx 和 MySQL-8，只能使用 LNMP。
【安装】nginx
# 添加 nginx 到 yum 源
rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm或者
vi /etc/yum.repos.d/nginx.repo
[nginx-stable]
name=nginx stable repo
baseurl=http://nginx.org/packages/centos/$releasever/$basearch/
gpgcheck=1
enabled=1
gpgkey=https://nginx.org/keys/nginx_signing.key
[nginx-mainline]
name=nginx mainline repo
baseurl=http://nginx.org/packages/mainline/centos/$releasever/$basearch/
gpgcheck=1
enabled=0
gpgkey=https://nginx.org/keys/nginx_signing.key# 安装依赖
# gcc 是 linux 下的编译器
yum install gcc gcc-c++ -y
# pcre 是一个 perl 库，包括 perl 兼容的正则表达式库，nginx 的 http 模块使用 pcre 来解析正则表达式，所以需要安装 pcre 库。
yum install pcre pcre-devel -y
# zlib 库提供了很多种压缩和解压缩方式 nginx 使用 zlib 对 http 包的内容进行 gzip
yum install zlib zlib-devel -y
# openssl 是 web 安全通信的基石，没有 openssl，可以说我们的信息都是在裸奔
yum install openssl openssl-devel -y# 安装
yum install nginx
# 配置 nginx 开机启动
systemctl enable nginx
# 启动 nginx 服务
systemctl start nginx
# 查看 nginx 服务是否启动成功
ps -ef | grep nginx【配置】https 访问
【配置】防火墙
# 查看防火墙【服务】状态
systemctl status firewalld
# 查看防火墙【运行】状态
firewall-cmd --state
# 开启
service firewalld start
# 重启
service firewalld restart
# 关闭
service firewalld stop
# 查询端口是否开放
firewall-cmd --query-port=8080/tcp
# 开放80端口
firewall-cmd --permanent --add-port=80/tcp
firewall-cmd --permanent --add-port=8080-8085/tcp
# 移除端口
firewall-cmd --permanent --remove-port=8080/tcp
# 查看防火墙的开放的端口
firewall-cmd --permanent --list-ports
# 重启防火墙(修改配置后要重启防火墙)
firewall-cmd --reload如果是阿里云 ECS，则去【安全组】配置防火墙规则。
【配置】SElinux
# 临时关闭 SELinux
setenforce 0
# 临时打开 SELinux
setenforce 1
# 查看 SELinux 状态
getenforce
# 开机关闭 SELinux
# 编辑 /etc/selinux/config 文件，将 SELinux 的值设置为 disabled。
vi /etc/selinux/config
# 查看防火墙规则
firewall-cmd --list-all 【安装】MySQL-8
官方网站
https://dev.mysql.com/downloads/repo/yum/
# 下载 MySQL-8 源
wget https://repo.mysql.com//mysql80-community-release-el7-3.noarch.rpm
# 安装 yum repo 文件并更新 yum 缓存
rpm -ivh mysql80-community-release-el7-3.noarch.rpm
# 配置禁用 mysql5.7 的仓库，启用 mysql8.0 的仓库
yum install yum-utils -y
yum-config-manager --disable mysql57-community
yum-config-manager --enable mysql80-community
# 检查是否正确启用了仓库
yum repolist enabled | grep mysql
# 安装
yum install mysql-community-server
# 启动 MySQL 服务
systemctl start mysqld
# 配置开机启动
systemctl enable mysqld
# 查看 MySQL 密码
grep 'temporary password' /var/log/mysqld.log
# 输入密码
mysql -uroot -p
# 修改密码
mysql> ALTER USER 'root'@'localhost' IDENTIFIED BY 'UUUUXXXX';
exit
# 启动 MySQL 服务
systemctl restart mysqld# 查看
show databases;
# 创建数据库
create database mydatabase;
# 删除数据库
drop database mydatabase;
# 打开、使用数据库
use mydatabase;
# 查看数据库表结构
desc student;
# 查询表中的记录
select id,name,sex,degree from student;【安装】 Node.js
NodeJS 官网：https://nodejs.org/dist/
清华大学源：https://mirror.tuna.tsinghua.edu.cn/nodejs-release/
下载
cd /usr/src && wget https://mirror.tuna.tsinghua.edu.cn/nodejs-release/v13.14.0/node-v13.14.0-linux-x64.tar.xz解压
xz -d node-v13.14.0-linux-x64.tar.xz
tar -xvf node-v13.14.0-linux-x64.tar链接
ln -s /usr/src/node-v13.14.0-linux-x64/bin/node /usr/bin/node
ln -s /usr/src/node-v13.14.0-linux-x64/bin/npm /usr/bin/npm验证
node -v
v13.14.0npm -v
6.14.4安装依赖
cd /var/www/UUUXXX更换 npm 源
npm config set registry https://registry.npm.taobao.org/
npm set sass_binary_site https://npm.taobao.org/mirrors/node-sass查看 npm 配置
npm config get安装
npm install --unsafe-perm【安装】 python3
查看当前 python 版本
python
Python 2.7.5 (default, Aug 7 2019, 00:51:29)
[GCC 4.8.5 20150623 (Red Hat 4.8.5-39)] on linux2
Type "help", "copyright", "credits" or "license" for more information.
>>> quit()# 安装 python3
yum install python3 python3-develpython3
Python 3.6.8 (default, Aug 7 2019, 17:28:10)
[GCC 4.8.5 20150623 (Red Hat 4.8.5-39)] on linux
Type "help", "copyright", "credits" or "license" for more information.
>>> quit()【安装】 pip3
yum install python3-pip【查看】pip 版本
pip -V
或者
pip3 -V【安装】pipenv
# 方法一
pip install pipenv
或者
pip3 install pipenv
# 方法二
pip install -i https://pypi.tuna.tsinghua.edu.cn/simple pipenv
或者
pip3 install -i https://pypi.tuna.tsinghua.edu.cn/simple pipenv离线安装
pip3 install \
pipenv-2018.11.26-py3-none-any.whl \
virtualenv-16.7.9-py2.py3-none-any.whl \
virtualenv_clone-0.5.3-py2.py3-none-any.whl \
certifi-2019.3.9-py2.py3-none-any.whl进入文件夹，执行 pipenv shell 启动 pipenv
在 pipenv 虚拟环境中执行：
pip3 list 查看这个虚拟环境有哪些安装包
pipenv graph 可以查看依赖关系
pipenv install flask 安装包
pipenv --venv 查看这个虚拟环境所属目录，在 pycharm 中添加
【创建项目】，且在对应的目录下创建对于的虚拟环境
# 建立目项目录
mkdir -p /var/www/UUUXXX
# 进入项目目录
cd UUUXXX/
# 创建虚拟环境
pipenv install【配置】源
vim /var/www/UUUXXX/Pipfile
# [[source]]
# name = "pypi"
# url = "https://pypi.org/simple"
# verify_ssl = true
[[source]]
name = "pypi-tsinghua"
url = "https://pypi.tuna.tsinghua.edu.cn/simple/"
verify_ssl = truevim /var/www/UUUXXX/Pipfile.lock
"name": "pypi-tsinghua"
"url": "https://pypi.tuna.tsinghua.edu.cn/simple/"在 pipenv 中虚拟机安装【Flask】及其他【whl】
# 首先进入 pipenv shell
pipenv shell
# 进入 requirements.txt 文件目录
cd
pipenv install -r requirements.txt
# 生成 requirement.txt 文件
pipenv lock -r --dev > requirements.txtpip 安装离线本地包
导出本地已有的依赖包
pip freeze > requirements.txt
将依赖包下载到本地
# 下载到当前目录，指定 pip 源
pip download -r requirements.txt -d . -i https://mirrors.aliyun.com/pypi/simple/
创建虚拟环境
# -q 安静的方式创建
# --no-site-packages 不拷贝本地的第三方包,创建干净的虚拟 python 运行环境
# --python=python3.6 指定创建 python 版本环境
# .venv 虚拟环境目录
virtualenv -q --no-site-packages --python=python3.6 .venv
进入虚拟环境
source .venv/bin/activate
安装本地依赖包
pip install --no-index --find-links=. -r requirements.txt
certifi==2019.3.9
chardet==3.0.4
Click==7.0
cymysql==0.9.13
Flask==1.0.2
Flask-Cors==2.1.0
Flask-JWT-Extended==3.12.1
Flask-SQLAlchemy==2.3.2
Flask-WTF==0.14.2
idna==2.6
itsdangerous==1.1.0
Jinja2==2.10
MarkupSafe==1.1.1
pipfile==0.0.2
PyJWT==1.7.1
requests==2.18.4
six==1.14.0
SQLAlchemy==1.2.11
toml==0.10.0
urllib3==1.22
Werkzeug==0.14.1
WTForms==2.2.1
oss2==2.6.1
pandas==0.25.3
xlrd==1.2.0
xlwt==1.3.0
markdown==3.2.1# 或者
pipenv install certifi
配置 VUE API
1. 将前端、后端开发的电脑连接至同一局域网内（如同一个WiFi下），将虚拟机设置的网络连接方式改为桥接
2. 修改前端、后端虚拟机的IP地址，保证在同一个网关下。（如前端：192.168.31.142，后端：192.168.31.143）
3. 在前端虚拟机上，修改前端程序代码src/config/index.js中的baseURL切换为后端服务器IP地址。（如：baseURL: 'http://192.168.31.143:5000/'）
4. 在后端虚拟机上启动后端服务（python starter,py）
5. 在前端虚拟机上启动前端程序
6. 在局域网内使用浏览器访问前端IP。（如：http://192.168.31.143:5000）
7. 点击登录，后端显示请求接受日志，前后端连接成功。找到 VUE 目录下 src/config/index.js
vi index.js
# 更改改成服务器IP地址，端口 5000（与flask后端一致）此虚拟机IP为 192.168.11.139
baseURL: 'http://192.168.11.139:5000/',
# 在 VUE 的根目录下运行
# 生成 dist 文件夹
npm run-script build
将文件夹放入 Nginx 目录中（替换原目录中的HTML文件夹）
cp -R dist /usr/share/nginx # 拷贝dist到 Nginx文件夹中
cd /usr/share/nginx #到该路径中
rm -rf html #删除原有的文件夹
mv dist html #把build的文件夹dist改名为html
到 flask 根目录中的 starter.py 中 端口为 5000
cd /var/www/UXmall
vi starter.py #进行编辑
app.run(host='0.0.0.0',port=5000,debug=True) #
找到 nginx 配置文件
cd /etc/nginx/conf.d
vi default.conf #进行编辑
#server 的参数
listen 80; #参数可改为80
server_name localhost; #参数为localhost
#location 的参数
root /usr/share/nginx/html; #nginx 代理的路径
index index.html index.htm; #nginx 代理的页面
启动 nginx
在 flask 根目录下，进入虚拟环境
pipenv shell
运行starter.py
python3 starter.py启动后端，激活 pipenv 虚拟环境
# 启动
pipenv shell
# 退出
exit
# 执行
python3 starter.py
# 快捷执行
cd /var/www/UUUXXX && pipenv shell && python3 starter.py测试
# 访问网页
curl http://127.0.0.1:5000/启动前端，配置 nginx
……
location / {
root /var/www/UXmall/dist;
index index.html index.htm;
}
……
###
###
###
这里注意
1、【目录】及【用户】权限
2、SELinux
3、防火墙前端——后端，连接
# 安装 uwsgi
pip3 install uwsgi
# 安装 C、C++ 的编译器
yum install -y gcc pcre-devel openssl-devel
# 安装 python 依赖
yum install -y python3-devel
Dependencies Resolved
=========================================================================================================================
Package Arch Version Repository Size
=========================================================================================================================
Installing:
python3-devel x86_64 3.6.8-10.el7 /python3-devel-3.6.8-10.el7.x86_64 621 k
Installing for dependencies:
dwz x86_64 0.11-3.el7 rhel-7-server-rpms 99 k
perl-srpm-macros noarch 1-8.el7 rhel-7-server-rpms 4.7 k
python-rpm-macros noarch 3-32.el7 rhel-7-server-rpms 8.9 k
python-srpm-macros noarch 3-32.el7 rhel-7-server-rpms 8.5 k
python3-rpm-generators noarch 6-2.el7 rhel-7-server-rpms 20 k
python3-rpm-macros noarch 3-32.el7 rhel-7-server-rpms 7.8 k
redhat-rpm-config noarch 9.1.0-88.el7 rhel-7-server-rpms 81 k
# 安装 uwsgi
pip3 install uWSGI-2.0.18-cp36-cp36m-linux_x86_64.whl将前端、后端开发的电脑连接至同一局域网内
将虚拟机设置的网络连接方式改为桥接
修改前端、后端虚拟机的IP地址，保证在同一个网关下。（如前端：192.168.0.142，后端：192.168.0.143）
在前端虚拟机上，修改前端程序代码 src/config/index.js 中的 baseURL 切换为后端服务器 IP 地址。（如：baseURL: 'http://192.168.0.143:5000/'）
在后端虚拟机上启动后端服务（python starter.py）
在前端虚拟机上启动前端程序
在局域网内使用浏览器访问前端IP。（如：http://192.168.0.143:5000）
点击登录，后端显示请求接受日志，前后端连接成功。
更换IP或者端口时需要做哪些更改
前端
.env.environmment 和 .env.production中 vue_app_base_url = 改成后端的 IP 和端口
cd /etc/nginx/conf.d/ default.conf
里 listen 改成前端端口后端
starter.py port
更改为与前端相同的端口
uWSGI 中127.0.0.1:port
port 改为 starter.py 中的端口配置 nginx https（http_ssl）
# 查看是否已经开启了 http_ssl
/usr/local/nginx/sbin/nginx -V
# 安装 openssl 包
yum -y install pcre pcre-devel zlib zlib-devel openssl openssl-devel【迁移项目】
上传项目压缩包至服务器目录
/var/www/UUUXXX解压
unzip UUUXXX.zip配置
类似资料：