【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.0

npm -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-devel

python3
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 = true

vim /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.txt

pip 安装离线本地包 

导出本地已有的依赖包
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

配置