在阿里云服务器上通过nginx+uwsgi部署django+vue3实现的elasticsearch搜索页面

前言

        记录走过的路和踩过的坑

正文

        我通过vue做了一个简单的搜索页面，前端向后端发送请求使用的axios；后端使用了django框架，通过haystack操作elasticsearch搜索引擎返回数据。使用nginx通过uwsgi操作django的wsgi接口。

前端

        前端使用vue+element-plus简单写了3个页面，分别是搜索页面，结果列表和详情页面。通过vue-router实现路由。\

main.js​​​​

在main.js里引入element-plus以及vue-router

搜索页面js代码​​​​​

        搜索页面将用户输入的字符串传给结果列表页面并跳转

结果列表页面js代码（不是很懂vue写的不好）

        结果列表页面通过axios向django发送请求并将返回的数据列表存到list里，这里axios.get（）里面的ip地址和端口是django runserver调试使用的，在你本地调试的时候可以使用localhost，后面的接的是django里写的接口上传到服务器上的时候把ip改成服务器外网ip。

结果列表组件

这里用vue的v-for将list里的数据传给列表项，具体用法可以看vue官网的教程，使用element-plus的分页组件。

列表项组件

列表项接收传入的数据显示。点击链接跳转到详情页面并传递name（上面结果列表组件代码中）。

详情页面js代码

详情页面通过axios发送get请求后接收详情数据。

详情页面组件部分代码

将接收到的数据显示。

路由目录

在vue项目目录的src文件夹里新建一个router文件夹，在里边建一个index.js文件

index.js

简单写一下路由

到这里前端基本就写完了

        我是使用vscode写的，我们新建终端，输入npm run dev就可以将前端页面运行起来了，因为还没有运行django，所以应该只能看第一个页面。

        接下来我们要把写好的vue项目打包

vite.config.js

在vue项目目录里找到vite.config.js

在里面加入

 build:{
    chunkSizeWarningLimit: 5000
  },

这样打包的时候就不会报超出设定大小的错误

我们在终端输入 npm run build进行打包，运行完后在项目目录里会出现一个dist文件夹

dist目录结构

assets里是js和css文件。

后端

        百度一下，建好虚拟环境以及django项目，我们测试的时候可以再windows里建，但我们最后要在阿里云服务器里的linux里建。

要安装的库

打开虚拟环境，然后安装几个库

django目录结构

把我们的dist文件夹复制到django项目根目录下（这里是第一个test_web），myApp是新建的接口app.我们先打开settings.py配置一下django。

在里面加上“*”，允许所有主机访问

加上haystack和自己的app

模版

加上上面两句话，第一个是将我们的vue打包的文件夹添加进去，这样django就能找到我们的网页，第二个是我们通过haystack操作elasticsearch进行检索时用到的关键字

mysql及haystack连接elasticsearch

django本来自带的数据库是sqlite，我们在网上搜索教程把它改为mysql

elasticsearch怎么配置以及haystack如何连接elasticsearch百度一下你就知道

胡乱配置的代码

这些是我遇到错误时胡乱配置的代码，可能有用

此外django还需要配置跨域，百度一下

数据库模型

haystack索引

        

接口url

接口视图

        前端向django发送请求调用上面的接口返回数据，

我们以detail接口为例讲解一下

def search(request):
    name = request.GET['q'] #获取前端发送的要查找的字符串
    # customer = SearchQuerySet().models(Course).facet('法') #没什么用


    customer = SearchQuerySet().models(Course).auto_query(str(name))  
    #使用haystack自带的接口自动操作elasticsearch查
    #找数据，具体细节查看haystack官网相关部分


    searched_data = []
    for i in customer:
        all_results = {"casename": i.name,
                       "court": i.court,
                       "region": i.region,
                       "refereedate": i.refereeDate,
                       "parties":i.party
                       }
        searched_data.append(all_results)

    return JsonResponse({'a': searched_data}) #向前端返回找到的数据

如果你上面已经自己百度了如何配置mysql和elasticsearch，那么我们的后端部分也基本完成了，

如果没有的话就去百度配置mysql和elasticsearch以及django配置mysql和elasticsearch

将我们的项目上传到服务器

百度一下阿里云服务器怎么用

阿里云服务器有一个安全组，只允许安全组里有的地址及端口通过，所以我们先在安全组里加入我们需要的端口

阿里云服务器安全组规则

如果你不知道怎么操作的话可以查看阿里云服务器的帮助文档。

我们打开服务器的实例，在里面安装好python3，mysql以及elasticsearch（百度一下），就可以开始啦

虚拟环境以及项目根目录

我们先在linux里找个地方建立一个python虚拟环境

然后在打开ssh服务，在我们的windows中下载一个ftp软件连接到我们的linux中（百度一下）

将我们的django项目拷到linux里，这里为了方便把他们放一起

接下来我们在linux安装好nginx和uwsgi（百度一下），然后开始配置nginx和uwsgi

配置uwsgi

项目根目录下创建

安装好uwsgi后，我们进入项目根目录在里面创建一个balabala.ini，这里我们使用ftp软件以文本形式打开它配置，你也可以再linux里vi它配置

你可以先百度一下uwsgi托管django方法

balabala.ini

django官网对于uwsgi配置的说明

我们简单说明一下

[uwsgi]
chdir=/home/test_web/  #这里是项目根目录路径
module =test_web.wsgi:application  #这里是django自带的wsgi文件，它在settings.py的旁边
home=/home/pyweb  #虚拟环境路径
master =true
processes=4
socket =172.24.58.149:8002 #我们要用nginx通过这个端口和uwsgi通信，如果你用的是阿里云服务器，那么ip地址必须是内网地址（大概）
chmod-socket = 666
vacuum = true 
buffer-size = 65536

socket部分写我们服务器内网地址，端口写我们安全组里有的（别重复）

这样就配置好uwsgi了，我们可以cd到项目根目录输入uwsgi --ini balabala.ini启动uwsgi，如果你配置好了可以直接输入uwsgi -d --ini balabala.ini让uwsgi在后台运行。

配置nginx

安装好nginx后，cd到/etc/nginx目录，打开nginx.conf文件，这里我们用ftp工具打开它，

#	include /etc/nginx/sites-enabled/*; #如果你查看nginx目录下有什么会发现他默认80端口会导向nginx欢迎页面，我们在nginx.conf找到这段话把他注释掉nginx就不会占用80端口导向欢迎页面了。


#这个是nginx和uwsgi通信的配置
server {
    listen 8000 default_server;
	listen [::]:8000 default_server;
    server_name _;
    charset     utf-8;

    location / {
        include     /etc/nginx/uwsgi_params;
        uwsgi_pass  172.24.58.149:8002;  #uwsgi配置文件里socket写什么这里就写什么
    }
	
}
#配置好这个你在浏览器输入外网ip时就会打开我们的前端页面了
server {
    listen 80 default_server ;
	listen [::]:80 default_server;
    server_name _; #如果你没有域名就输这个
    charset     utf-8;

    location / {
	root /home/test_web/dist; #这个是我们前端页面的根目录
	index index.html;
    }
	
}

这样就基本配置好了，我们在命令行输入nginx就可以启动nginx服务了

将uwsgi服务和nginx服务都启动后我们打开浏览器输入服务器外网ip就可以成功打开我们的页面了！！

成果展示

注意事项

我们上面用了8000、8002、80接口，注意前端链接不要写混地址