【web系列十五】Ubuntu系统部署Web项目
目录
写在前面
前端部署
安装nginx
编译vue工程
传输项目到服务器
修改nginx配置
修改启动用户
重启服务
打开网页
前端踩坑记录
无法使用getCurrentInstance.ctx.$refs获取页面组件元素
后端及数据库部署
mysql踩坑记录
版本问题
远程访问
中文乱码
参考文献
写在前面
项目架构：
前端Vue3+后端Django+数据库MySQL
记录一下部署流程，初次尝试还是踩了不少坑的。
前端部署
前端部署使用的是Nginx，可能很多初学者也没有听过这个工具，其实我也是第一次接触。
一句话说Nginx是一款轻量级的Web服务器、反向代理服务器，由于它的内存占用少，启动极快，高并发能力强，在互联网项目中广泛应用。
我体验了一下，感觉就是类似一个方便前端部署的、支持多并发的入口网关。
大家想深入了解可以看这篇文章8分钟带你深入浅出搞懂Nginx - 知乎 (zhihu.com)
安装nginx
先贴出一个参考教程。
ubuntu安装nginx_小白、瑶的博客-CSDN博客_ubuntu 安装nginx
教程里讲了两种安装方式，我是直接用apt安装的。
1、安装
sudo apt-get install nginx2、查看nginx是否安装成功
nginx -v3、启动nginx
service nginx start4、重启
service nginx restart5、停止
service nginx stop启动后，在网页重输入本机ip地址，即可看到nginx的欢迎页面。至此nginx安装成功。
6、文件位置
我是ubuntu18下安装的，与参考文献中博主的文件位置有一些出入，这里记录一下：
- /usr/lib/nginx：主程序
- /etc/nginx：存放配置文件
- /usr/share/nginx：存放静态文件
- /var/log/nginx：存放日志
编译vue工程
1、修改vue.config.js
const {defineConfig} = require('@vue/cli-service')module.exports = defineConfig({transpileDependencies: true,lintOnSave: false,//关闭语法检查// 基本路径（下面是重点）publicPath: '/',// 输出文件目录outputDir: 'dist',configureWebpack: {externals: {}}
})2、编译项目
npm run build这时候可以发现，工程中多了一个dist文件夹，里面就是编译后的工程，可以直接拿来部署。
传输项目到服务器
这里用的是filezilla工具，如果你的ubuntu服务器没有开启相应的服务的话是使用不了的。也先贴出教程，博主亲测，两种方法都可行。
ubuntu ftp连接 filezilla连接 FileZilla提示错误:认证失败,严重错误,无法连接到服务器：huizai的博客 - IIS7站长之家【WWW.IIS7.COM】
安装完之后直接将dist文件夹传输到服务器上就行。
修改nginx配置
配置文件在/etc/nginx下，叫nginx.conf，打开可以发现他include另外两个文件夹，/etc/nginx/conf.d/*.conf;/etc/nginx/sites-enabled/*；去这两个文件夹下看一下可以发现前一个是空的，后一个有一个default文件快捷方式，指向的问价你在/etc/nginx/sits-available，我们要修改的就是这个文件。
可以把文件中其他内容都注释掉，然后添加一下内容
server {listen 8080;#前端端口server_name web_ui;#服务名，类似域名location / {root /home/Project/web_ui/dist; #刚才传输的dist文件夹try_files $uri $uri/ /index.html; #防止刷新网页时出现404报错index index.html index.htm；}location /vcipro-api/ {proxy_set_header Host $http_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;proxy_pass https://10.40.100.15:8020/;}error_page 500 502 503 504 /50x.html;location = /50x.html {root /usr/share/nginx/html;}
}顺便贴一下ubuntu下vim使用技巧的两篇文章
VIM命令大全_wongIEEE的博客-CSDN博客_vim命令
ubuntu中vim多行注释与取消注释_一只大大大媛的博客-CSDN博客_ubuntu注释
修改启动用户
这个在/etc/nginx/nginx.conf中，将user www-data;修改成user root;否则启动后，网页会显示403forbidden，且在日志中会看到(13: Permission denied)报错。
这个错误的参考资料如下 解决Nginx出现403 forbidden (13: Permission denied)报错的四种方法_西奥斯的博客-CSDN博客_nginx403
重启服务
service nginx restart打开网页
http://服务器地址:8080/
前端踩坑记录
无法使用getCurrentInstance.ctx.$refs获取页面组件元素
这是由于使用dist打包后getCurrentInstance属性会失效，解决办法如下：
import { ComponentInternalInstance, getCurrentInstance } from "@vue/runtime-core";let currentInstance = getCurrentInstance() as ComponentInternalInstance;currentInstance.ctx._.refs.test.test();后端及数据库部署
由于Django后端及Mysql数据库都不是很复杂，因此，我选择直接搭建开发环境的方式。可以参考博主的这几篇文章。
【web系列二】Django服务器搭建_Nicholson07的博客-CSDN博客_django 服务端
【web系列十】Vue3+Django+MySQL搭建前后端框架_Nicholson07的博客-CSDN博客_前后端通信框架
【web系列十一】使用django创建数据库表_Nicholson07的博客-CSDN博客_django创建数据库表
mysql踩坑记录
版本问题
值得注意的是，Ubuntu下Mysqldb不兼容Python3.5，可以使用Pymysql替代，需要修改一下代码，修改完的版本在win下也可以正常运行，博主亲测。
报错如下：NameError: name '_mysql' is not defined
1、安装pymysql
pip install pymysql2、配置数据库
修改项目的setting.py文件
import pymysql
pymysql.install_as_MySQLdb()3、如果还报错
django.core.exceptions.ImproperlyConfigured: mysqlclient 1.4.0 or newer is required; you have 0.10.1.可以加一行代码，直接指定版本来解决。
import pymysql
pymysql.version_info = (1, 4, 13, "final", 0)
pymysql.install_as_MySQLdb()远程访问
在博主的这篇文章->数据库部署->Ubuntu系统下要注意中有了记录。
【web系列九】快速上手MySQL数据库_Nicholson07的博客-CSDN博客
中文乱码
ubuntu下数据库默认是无法显示中文的，中文数据会显示为'"??"。
需要修改一下Mysql的配置文件，在/etc/mysql/mysql.cnf，要注意系统版本。
[client]
default-character-set=utf8
[mysqld_safe]
default-character-set=utf8
[mysqld]
default-character-set=utf8 #ubuntu12.04以前的版本
character-set-server=utf8 #ubuntu12.04以后的版本
[mysql]
default-character-set=utf8然后重启mysql，下面两种方式都可以。
/etc/init.d/mysql restart
service mysql restart旧的mysql数据表是不会生效的，需要重新创建，然后可以输入以下执行查看是否修改成功了。
show variables like 'character%';+--------------------------+----------------------------+
| Variable_name | Value |
+--------------------------+----------------------------+
| character_set_client | utf8 |
| character_set_connection | utf8 |
| character_set_database | utf8 |
| character_set_filesystem | binary |
| character_set_results | utf8 |
| character_set_server | utf8 |
| character_set_system | utf8 |
| character_sets_dir | /usr/share/mysql/charsets/ |
+--------------------------+----------------------------+参考文献
8分钟带你深入浅出搞懂Nginx - 知乎 (zhihu.com)
ubuntu安装nginx_小白、瑶的博客-CSDN博客_ubuntu 安装nginx
ubuntu ftp连接 filezilla连接 FileZilla提示错误:认证失败,严重错误,无法连接到服务器：huizai的博客 - IIS7站长之家【WWW.IIS7.COM】
VIM命令大全_wongIEEE的博客-CSDN博客_vim命令
ubuntu中vim多行注释与取消注释_一只大大大媛的博客-CSDN博客_ubuntu注释
解决Nginx出现403 forbidden (13: Permission denied)报错的四种方法_西奥斯的博客-CSDN博客_nginx403
NameError: name ‘_mysql‘ is not defined_期与遇的博客-CSDN博客
Ubuntu中MySQL中文有乱码的情况如何处理-群英 (qycn.com)
【web系列十五】Ubuntu系统部署Web项目相关推荐
- 一、ubuntu-django+nginx+uwsgi：ubuntu系统部署django项目，前后端不分离项目
一.创建用户和文件夹 #创建www文件夹,所有网站项目都放到这里 $ sudo mkdir /www #创建用户组 sudo groupadd www -g 666 #创建用户 $ sudo user ...
- 第十五章 Python和Web
第十五章 Python和Web 本章讨论Python Web编程的一些方面. 三个重要的主题:屏幕抓取.CGI和mod_python. 屏幕抓取 屏幕抓取是通过程序下载网页并从中提取信息的过程. 下载 ...
- Vue3官网-高级指南（十五）Vue 与 Web Components
Vue3官网-高级指南(十五)Vue 与 Web Components 文章目录 Vue3官网-高级指南(十五)Vue 与 Web Components 1. Vue 与 Web Components ...
- Python之路【第十五篇】：Web框架
Python之路[第十五篇]:Web框架 Web框架本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. 1 2 3 4 5 6 7 ...
- Reflex WMS入门系列十五：Reflex系统上对已经Confirm的Receipt能继续做收货么？
Reflex WMS入门系列十五:Reflex系统上对已经Confirm的Receipt能继续做收货么? 如下的Receipt已经完成了收货,并且已经confirm了, Cfm(confirm)栏位被 ...
- ELK系列(十五)、Elasticsearch核心原理一篇全搞定
目录 Lucene 介绍 核心术语 如何理解倒排索引? 检索方式 分段存储 段合并策略 Elasticsearch 核心概念 节点类型 集群状态 3C和脑裂 1.共识性(Consensus) 2.并发 ...
- 数学之美 系列十五 繁与简 自然语言处理的几位精英
数学之美 系列十五 繁与简 自然语言处理的几位精英 我在数学之美系列中一直强调的一个好方法就是简单.但是,事实上,自然语言处理中也有一些特例,比如有些学者将一个问题研究到极致,执著追求完善甚至可以说完 ...
- [CentOS Python系列] 五.阿里云部署web环境及通过IP地址访问服务器网页
假设我们服务器CentOS系统已经部署好了,现在我们需要向服务器上传一个HTML主页,通过IP地址展示我们的内容,如何实现呢?本篇文章主要介绍讲述部署阿里云服务器web环境,并通过IP地址访问网页的过 ...
- Linux Ubuntu从零开始部署web环境及项目 -----tomcat+jdk+mysql (二)
上一篇介绍如何在linux系统下搭建ssh环境 这篇开始将如何搭建web服务器 1,下载文件 在官网下载好 tomcat.jdk.mysql的linux压缩包 后缀名为.tar.gz 并通过xftp上 ...
最新文章
- flink dataset api使用及原理
- LInux 安全测试 2
- 【云周刊】第205期：阿里云重磅开源实时计算平台Blink，挑战计算领域的“珠峰”...
- python的字典合并有相同的_将列表中的重复项合并到python字典中
- Tkinter用户注册后密码通过MD5加密写入文本文件
- SQL常见面试题总结
- html 字怎么居中怎么写,html文字居中代码怎么写
- AST使用eval运行函数，更换数值
- 仅1cm厚！华硕发布全球最薄13.3英寸笔记本
- 成语——》寻找心中的巴拿马
- 企业如何做新闻软文发布？ 软文推广和新闻源发布有何不同之处？
- 计算机科学排名靠前的大学,纽约州计算机科学学院排名前十的大学哪几所？
- 山西大同大学计算机分数线,山西大同大学录取分数线2021是多少分(附历年录取分数线)...
- 利用tensorflow训练自己的图片数据（1）——预处理
- 【航线运输驾驶员理论考试】操作程序
- 3D Fe3O4@Au@Ag nanoflowers assembled magnetoplasmonic chains for in situ SERS monitoring of plasmon-
- 量子计算机芯片的制造过程,美陆军资助研发制造量子计算芯片的新方法
- 基于simulink的图像处理算法的建模和仿真
- codeforces698A. Vacations （贪心）
- 计算机3十2院校排名,杭州3十2学校排名