【CentOS7.4】Flask+Vue+nginx+mysql
【升級】
yum update
yum upgrade
yum update
安裝軟件
yum install unzip
yum install tree
yum install htop
yum install tmux
【安裝】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
# 查看 MySQL 密碼
grep 'temporary password' /var/log/mysqld.log
# 輸入密碼
mysql -uroot -p
# 修改密碼
mysql> ALTER USER 'root'@'localhost' IDENTIFIED BY 'UUUUXXXX';
exit
# 配置開機啓動
systemctl enable mysqld
# 啓動 MySQL 服務
systemctl start mysqld
【安裝】 Node.js
下載
cd /usr/src && wget https://nodejs.org/dist/v12.13.1/node-v12.13.1-linux-x64.tar.xz
解壓
xz -d node-v12.13.1-linux-x64.tar.xz
tar -xvf node-v12.13.1-linux-x64.tar
鏈接
ln -s /usr/src/node-v12.13.1-linux-x64/bin/node /usr/bin/node
ln -s /usr/src/node-v12.13.1-linux-x64/bin/npm /usr/bin/npm
驗證
node -v
npm -v
安裝依賴
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
【安裝】pipenv
# 方法一
pip install pipenv
# 方法二
pip3 install -i https://pypi.tuna.tsinghua.edu.cn/simple pipenv
【創建項目】，且在對應的目錄下創建對於的虛擬環境
# 建立目項目錄
mkdir -p /var/www/UUUXXX
# 進入項目目錄
cd UUUXXX/
# 創建虛擬環境
pipenv install
【配置】源
vi /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
在 pipenv 中虛擬機安裝【Flask】及其他【whl】
pipenv install -r requirements.txt
# 生成 requirement.txt 文件
pipenv lock -r --dev > 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
XXXXXXXXXXXX
MarkupSafe==1.1.1
pipfile==0.0.2
PyJWT==1.7.1
requests==2.18.4
six==1.12.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.2
xlrd==1.2.0
xlwt==1.3.0
配置 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
# 初始化
# 安裝虛擬機環境
pip install -r requirements.txt
# 啓動
pipenv shell
# 退出
exit
# 執行
python3 starter.py
# 快捷執行
cd /var/www/UUUXXX && pipenv shell && python3 starter.py
測試
# 訪問網頁
curl http://127.0.0.1:5000/
成功
【遷移項目】
上傳項目壓縮包至服務器目錄
/var/www/UUUXXX
解壓
unzip UUUXXX.zip
配置
