【web系列十五】Ubuntu系统部署Web项目

Nicholson07

已于 2022-11-08 16:24:44 修改

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： Web开荒环境搭建文章标签：前端 django nginx ubuntu mysql

于 2022-09-21 17:24:56 首次发布

本文链接：https://blog.youkuaiyun.com/Nichlson/article/details/126972572

Web开荒同时被 2 个专栏收录

25 篇文章

订阅专栏

环境搭建

11 篇文章

订阅专栏

本文详细介绍了使用Vue3、Nginx、Django和MySQL进行项目部署的过程，包括前端Nginx的安装配置、Vue项目编译、文件传输，以及后端Django和数据库MySQL的配置等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

无法使用getCurrentInstance.ctx.$refs获取页面组件元素

写在前面

项目架构：

前端Vue3+后端Django+数据库MySQL

记录一下部署流程，初次尝试还是踩了不少坑的。

前端部署

前端部署使用的是Nginx，可能很多初学者也没有听过这个工具，其实我也是第一次接触。

一句话说Nginx是一款轻量级的Web服务器、反向代理服务器，由于它的内存占用少，启动极快，高并发能力强，在互联网项目中广泛应用。

我体验了一下，感觉就是类似一个方便前端部署的、支持多并发的入口网关。

大家想深入了解可以看这篇文章8分钟带你深入浅出搞懂Nginx - 知乎 (zhihu.com)

安装nginx

先贴出一个参考教程。

ubuntu安装nginx_小白、瑶的博客-优快云博客_ubuntu 安装nginx

教程里讲了两种安装方式，我是直接用apt安装的。

1、安装

sudo apt-get install nginx

2、查看nginx是否安装成功

nginx -v

3、启动nginx

service nginx start

4、重启

service nginx restart

5、停止

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的博客-优快云博客_vim命令

ubuntu中vim多行注释与取消注释_一只大大大媛的博客-优快云博客_ubuntu注释

修改启动用户

这个在/etc/nginx/nginx.conf中，将user www-data;修改成user root;否则启动后，网页会显示403forbidden，且在日志中会看到(13: Permission denied)报错。

这个错误的参考资料如下解决Nginx出现403 forbidden (13: Permission denied)报错的四种方法_西奥斯的博客-优快云博客_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的博客-优快云博客_django 服务端

【web系列十】Vue3+Django+MySQL搭建前后端框架_Nicholson07的博客-优快云博客_前后端通信框架

【web系列十一】使用django创建数据库表_Nicholson07的博客-优快云博客_django创建数据库表

mysql踩坑记录

版本问题

值得注意的是，Ubuntu下Mysqldb不兼容Python3.5，可以使用Pymysql替代，需要修改一下代码，修改完的版本在win下也可以正常运行，博主亲测。

报错如下：NameError: name '_mysql' is not defined

1、安装pymysql

pip install pymysql

2、配置数据库

修改项目的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的博客-优快云博客

中文乱码

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/ |
+--------------------------+----------------------------+