毕业设计部署踩坑笔记 #
首先为什么要叫踩坑，主要还是之前从来没有正式的发布过
其次就是最后想要的效果，就是用docker直接在服务器上发布
1.nginx直接发布编译好的vue项目 #
先停掉apache2或其他服务
sudo /etc/init.d/apache2 stop
sudo /etc/init.d/apache2 stop
安装nginx #
sudo apt update
sudo apt install nginx
sudo apt update
sudo apt install nginx
nginx 配置 我们使用最简单的配置
sudo vim /etc/nginx/nginx.conf
sudo vim /etc/nginx/nginx.conf
/etc/nginx/nginx.conf
#最简单的配置
worker_processes 1;
events {
worker_connections 1024;
}
http {
include conf/mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 80; #端口
server_name localhost; #主机名
location / {
root html; #项目根目录
index index.html index.htm; #起始页
}
}
}
#最简单的配置
worker_processes 1;
events {
worker_connections 1024;
}
http {
include conf/mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 80; #端口
server_name localhost; #主机名
location / {
root html; #项目根目录
index index.html index.htm; #起始页
}
}
}
/etc/nginx/conf/mime.types
types {
text/html html htm shtml;
text/css css;
text/xml xml rss;
image/gif gif;
image/jpeg jpeg jpg;
application/x-javascript js;
text/plain txt;
text/x-component htc;
text/mathml mml;
image/png png;
image/x-icon ico;
image/x-jng jng;
image/vnd.wap.wbmp wbmp;
application/java-archive jar war ear;
application/mac-binhex40 hqx;
application/pdf pdf;
application/x-cocoa cco;
application/x-java-archive-diff jardiff;
application/x-java-jnlp-file jnlp;
application/x-makeself run;
application/x-perl pl pm;
application/x-pilot prc pdb;
application/x-rar-compressed rar;
application/x-redhat-package-manager rpm;
application/x-sea sea;
application/x-shockwave-flash swf;
application/x-stuffit sit;
application/x-tcl tcl tk;
application/x-x509-ca-cert der pem crt;
application/x-xpinstall xpi;
application/zip zip;
application/octet-stream deb;
application/octet-stream bin exe dll;
application/octet-stream dmg;
application/octet-stream eot;
application/octet-stream iso img;
application/octet-stream msi msp msm;
audio/mpeg mp3;
audio/x-realaudio ra;
video/mpeg mpeg mpg;
video/quicktime mov;
video/x-flv flv;
video/x-msvideo avi;
video/x-ms-wmv wmv;
video/x-ms-asf asx asf;
video/x-mng mng;
}
types {
text/html html htm shtml;
text/css css;
text/xml xml rss;
image/gif gif;
image/jpeg jpeg jpg;
application/x-javascript js;
text/plain txt;
text/x-component htc;
text/mathml mml;
image/png png;
image/x-icon ico;
image/x-jng jng;
image/vnd.wap.wbmp wbmp;
application/java-archive jar war ear;
application/mac-binhex40 hqx;
application/pdf pdf;
application/x-cocoa cco;
application/x-java-archive-diff jardiff;
application/x-java-jnlp-file jnlp;
application/x-makeself run;
application/x-perl pl pm;
application/x-pilot prc pdb;
application/x-rar-compressed rar;
application/x-redhat-package-manager rpm;
application/x-sea sea;
application/x-shockwave-flash swf;
application/x-stuffit sit;
application/x-tcl tcl tk;
application/x-x509-ca-cert der pem crt;
application/x-xpinstall xpi;
application/zip zip;
application/octet-stream deb;
application/octet-stream bin exe dll;
application/octet-stream dmg;
application/octet-stream eot;
application/octet-stream iso img;
application/octet-stream msi msp msm;
audio/mpeg mp3;
audio/x-realaudio ra;
video/mpeg mpeg mpg;
video/quicktime mov;
video/x-flv flv;
video/x-msvideo avi;
video/x-ms-wmv wmv;
video/x-ms-asf asx asf;
video/x-mng mng;
}
编译vue项目 #
yarn run bulid
yarn run bulid
修改nginx.conf http server location root 为 项目所在位置 （dist文件夹）
访问localhost，成功
2.发布flask应用 #
这里没有其他项目就不用虚拟环境了
sudo pip3 install gunicorn
gunicorn -w 2 -b 127.0.0.1:5000 waterMeter:app
sudo pip3 install gunicorn
gunicorn -w 2 -b 127.0.0.1:5000 waterMeter:app
3.部署阿里云服务器 #
首先初始化服务器并下载项目
# 初始化
sudo apt update
sudo apt upgrade
# 创建目录
sudo mkdir /app
sudo chmod 777 /app
cd /app
# 安装git
sudo apt install git
# 设置git
git config --global user.name wiidede
git config --global user.email [email protected]
# 克隆前后端仓库
git clone -b dist https://gitee.com/wiidede/water-meter-frontend.git
# 安装tree
sudo apt install tree
# 查看目录
tree -L 2
# .
# ├── water-meter-backend
# │ ├── app
# │ ├── assets
# │ ├── base
# │ ├── main
# │ ├── README.md
# │ ├── utils
# │ ├── waterMeter.py
# │ └── 毕业设计.md
# └── water-meter-frontend
# ├── dist
# └── README.md
# 8 directories, 4 files
# 安装nginx
sudo apt install nginx
# 修改配置
cd /etc/nginx/sites-available/
# defalut默认被占用 可以先删除它
sudo vim default
# 添加server配置
# server {
# listen 80;
# server_name localhost;
# location / {
# root /app/water-meter-frontend/dist;
# index index.html;
# }
# }
# 重启
sudo nginx -s reload
# 或者
sudo systemctl reload nginx
sudo systemctl restart nginx
# 后端配置
cd /app/water-meter-backend/
sudo apt install python3-pip
# sudo pip3 install tensorflow==1.15 # python3.8 无法安装 tf1
# 使用虚拟环境
sudo pip3 install virtualenv
# 安装python3.6
sudo apt install software-properties-common
sudo add-apt-repository ppa:deadsnakes/ppa
sudo apt update
sudo apt install python3.6
python3.6 -V
virtualenv venv --python=python3.6
source venv/bin/activate
# 虚拟环境（venv）
pip install gunicorn
pip install flask
pip install flask-cors
pip install tensorflow==1.15
pip install scipy
pip install easydict
pip install Pillow
pip install opencv-python
# 安装依赖
sudo apt install libgl1-mesa-glx
# 传输checkpoints
# scp -r file(ubuntu的文件) root(用户名)@xx.xx.xx.xx(公网ip):/home/(目标文件夹)
scp -r -i ssh-key.pem /home/robot/dd_demo/watermeter/WaterMeter/checkpoints [email protected]:/app/water-meter-backend
gunicorn -w 2 -b 127.0.0.1:5001 waterMeter:app
# 退出虚拟环境
deactivate
# 修改配置
cd /etc/nginx/sites-available/
# defalut默认被占用 可以先删除它
sudo vim default
# 添加这个服务
# proxy服务器
# server {
# listen 5000;
# server_name xx.xx.xx.xx;
# location / {
# proxy_pass http://127.0.0.1:5001; #反向代理
# proxy_cookie_domain 127.0.0.1 xx.xx.xx.xx; #修改cookie里域名
# # 当用webpack-dev-server等中间件代理接口访问nignx时，此时无浏览器参与，故没有同源限制，下面的跨域配置可不启用
# # add_header Access-Control-Allow-Origin *; #当前端只跨域不带cookie时，可为*
# # add_header Access-Control-Allow-Credentials true;
# }
# }
cd /usr/lib/systemd/system
vi water-meter-backend.servier
# [Unit]
# After=syslog.target network.target remote-fs.target nss-lookup.target
# [Service]
# #项目所在目录
# user=root
# WorkingDirectory=/app/water-meter-backend/
# #gunicorn启动命令
# #解释1.先是虚拟环境下的gunicorn所在位置
# #2.--bind 绑定端口 承接上篇所以选用0.0.0.0:8001
# #3.xxx表示项目名称
# ExecStart=/app/water-meter-backend/venv/bin/gunicorn -w 2 -b 127.0.0.1:5001 waterMeter:app
# Restart=on-failure
# [Install]
# WantedBy=multi-user.target
# 添加到开机自启动项
sudo systemctl enable water-meter-backend.servier
# 初始化
sudo apt update
sudo apt upgrade
# 创建目录
sudo mkdir /app
sudo chmod 777 /app
cd /app
# 安装git
sudo apt install git
# 设置git
git config --global user.name wiidede
git config --global user.email [email protected]
# 克隆前后端仓库
git clone -b dist https://gitee.com/wiidede/water-meter-frontend.git
# 安装tree
sudo apt install tree
# 查看目录
tree -L 2
# .
# ├── water-meter-backend
# │ ├── app
# │ ├── assets
# │ ├── base
# │ ├── main
# │ ├── README.md
# │ ├── utils
# │ ├── waterMeter.py
# │ └── 毕业设计.md
# └── water-meter-frontend
# ├── dist
# └── README.md
# 8 directories, 4 files
# 安装nginx
sudo apt install nginx
# 修改配置
cd /etc/nginx/sites-available/
# defalut默认被占用 可以先删除它
sudo vim default
# 添加server配置
# server {
# listen 80;
# server_name localhost;
# location / {
# root /app/water-meter-frontend/dist;
# index index.html;
# }
# }
# 重启
sudo nginx -s reload
# 或者
sudo systemctl reload nginx
sudo systemctl restart nginx
# 后端配置
cd /app/water-meter-backend/
sudo apt install python3-pip
# sudo pip3 install tensorflow==1.15 # python3.8 无法安装 tf1
# 使用虚拟环境
sudo pip3 install virtualenv
# 安装python3.6
sudo apt install software-properties-common
sudo add-apt-repository ppa:deadsnakes/ppa
sudo apt update
sudo apt install python3.6
python3.6 -V
virtualenv venv --python=python3.6
source venv/bin/activate
# 虚拟环境（venv）
pip install gunicorn
pip install flask
pip install flask-cors
pip install tensorflow==1.15
pip install scipy
pip install easydict
pip install Pillow
pip install opencv-python
# 安装依赖
sudo apt install libgl1-mesa-glx
# 传输checkpoints
# scp -r file(ubuntu的文件) root(用户名)@xx.xx.xx.xx(公网ip):/home/(目标文件夹)
scp -r -i ssh-key.pem /home/robot/dd_demo/watermeter/WaterMeter/checkpoints [email protected]:/app/water-meter-backend
gunicorn -w 2 -b 127.0.0.1:5001 waterMeter:app
# 退出虚拟环境
deactivate
# 修改配置
cd /etc/nginx/sites-available/
# defalut默认被占用 可以先删除它
sudo vim default
# 添加这个服务
# proxy服务器
# server {
# listen 5000;
# server_name xx.xx.xx.xx;
# location / {
# proxy_pass http://127.0.0.1:5001; #反向代理
# proxy_cookie_domain 127.0.0.1 xx.xx.xx.xx; #修改cookie里域名
# # 当用webpack-dev-server等中间件代理接口访问nignx时，此时无浏览器参与，故没有同源限制，下面的跨域配置可不启用
# # add_header Access-Control-Allow-Origin *; #当前端只跨域不带cookie时，可为*
# # add_header Access-Control-Allow-Credentials true;
# }
# }
cd /usr/lib/systemd/system
vi water-meter-backend.servier
# [Unit]
# After=syslog.target network.target remote-fs.target nss-lookup.target
# [Service]
# #项目所在目录
# user=root
# WorkingDirectory=/app/water-meter-backend/
# #gunicorn启动命令
# #解释1.先是虚拟环境下的gunicorn所在位置
# #2.--bind 绑定端口 承接上篇所以选用0.0.0.0:8001
# #3.xxx表示项目名称
# ExecStart=/app/water-meter-backend/venv/bin/gunicorn -w 2 -b 127.0.0.1:5001 waterMeter:app
# Restart=on-failure
# [Install]
# WantedBy=multi-user.target
# 添加到开机自启动项
sudo systemctl enable water-meter-backend.servier