阿里云服务器 django+vue前后端分离 nginx配置

Abadbeginning
425 阅读3分钟

「这是我参与2022首次更文挑战的第4天，活动详情查看：2022首次更文挑战」。

0 环境

  • 服务器：阿里云
  • 服务器操作系统：centos
  • ssh：xshell
  • 后端语言：django(文档)
  • python 默认版本：3.6.8

1 导图

环境基础+部署流程

首先根据自身程序所需要的性能，合理购买所需配置的云服务器，我用入门级就够了，看个人需求，你想自己玩玩啥的，可以用自己的电脑作为上线服务器，在通过内网穿透的方式让别人访问也是可以的，选好所需配置的服务器和操作系统后，进入终端，启动云服务器，记下公网ip，用xshell连接即可(这里说一下，xshell是可以免费在官网申请的，可以去试试哦)，查看我们所需要的服务器的环境，是否符合或者缺少库或插件，比如python虚拟环境安装，django的安装以及django项目所需要的库的安装，若是都知道可以提前安装好这些库，省的运行时，报错了，一个个安装，有问题时自行百度搜索解决。程序所需的环境好后，前端打包项目后，将文件传给云服务，后端需要安装uwsgi，配置它的文件好后，启动django项目。然后前后端直接的交流，需要nginx这位中间人连接(接收 转发等等)，两边传话，有点中介的味道，当然更加靠谱些吧。

2 xshell 安装和配置

xshell 安装包+配色方案下载

xshell 安装 使用遇到的问题 + 配色方案

3 nginx 安装

sudo yum install nginx -y

4 nginx 服务配置

  • 开机启动命令 sudo systemctl enable nginx

  • 启动服务命令 sudo systemctl start nginx

  • 重启服务命令 sudo systemctl restart nginx

  • 重新加载服务命令 sudo systemctl reload nginx

  • 查看nginx状态命令 systemctl status nginx

  • 停止服务命令 sudo systemctl stop nginx

5 查看nginx 是否启动

1 通过命令查看

nginx -t

ps -ef | grep nginx

# 通过端口查看
netstat -anp | grep :在Nginx上运行的端口

# 使用lsof命令
lsof -i:在Nginx上运行的端口

nginx -t命令

ps -ef | grep nginx

netstat -anp | grep :在Nginx上运行的端口

lsof命令

2 页面验证

输入阿里云公网ip

6 nginx 配置

进入nginx路径，这里有我们需要的两个文件，nginx.conf文件和uwsgi_params文件。

配置文件

1 uwsgi_params

一般用系统自带的yum安装一下，默认就有该文件了,直接配置 nginx.conf 即可，没有的话添加 uwsgi_params 保存下面的配置代码。

uwsgi_param  QUERY_STRING       $query_string;
uwsgi_param  REQUEST_METHOD     $request_method;
uwsgi_param  CONTENT_TYPE       $content_type;
uwsgi_param  CONTENT_LENGTH     $content_length;

uwsgi_param  REQUEST_URI        $request_uri;
uwsgi_param  PATH_INFO          $document_uri;
uwsgi_param  DOCUMENT_ROOT      $document_root;
uwsgi_param  SERVER_PROTOCOL    $server_protocol;
uwsgi_param  REQUEST_SCHEME     $scheme;
uwsgi_param  HTTPS              $https if_not_empty;

uwsgi_param  REMOTE_ADDR        $remote_addr;
uwsgi_param  REMOTE_PORT        $remote_port;
uwsgi_param  SERVER_PORT        $server_port;
uwsgi_param  SERVER_NAME        $server_name;

2 nginx.conf

进入nginx.conf这个文件。

vim /etc/nginx/nginx.conf

前/后端端口，进入阿里云的安全组中访问规则里添加端口。

1 后端配置

在 http 下粘贴该代码，修改、保存好后，sudo systemctl restart nginx。

注意一点：location指定的url是否对的，监听的后台端口，以及location /下的uwsgi_pass，一定要填对。

server {
    # 前端访问后端端口(8091)
    listen          8091;
    server_name     127.0.0.1;
    charset         utf-8;

    location /static {
        alias /var/program/myprojects/xxx/static;
    }

    # 用于文件上传
    location /upload {
        alias /var/program/myprojects/xxx/upload;
    }

    location / {
    
        uwsgi_pass   127.0.0.1:9090;
        include      /etc/nginx/uwsgi_params;
        # 若是不设置 上传大点图片会报错
        client_max_body_size    20m;
    }
}

访问公网 --> ip:8091/path?参数&参数

2 前端配置

修改、保存好后，sudo systemctl restart nginx。

注意一点哦，端口和xxx.conf、以及一些前端项目的根目录路径等，可能你的服务器里的路径位置和我下面配置的文件路径位置不同，请自行根据自身服务器真实情况更改，免得不生效。还有一点location /设置，假如你的location不是以/，以你的项目真实location为标准，好多人在这里踩坑了。切记切记切记，重要的话说三遍。

server {
        listen      8080 default_server;
        server_name 127.0.0.1;
        location /{
          # 进入前端项目的根目录 pwd 复制完整路径粘贴到下行root后面就行
          root   /var/program/frontend/xxx;
          index  index.html;
          client_max_body_size    10m;
        }

  include /etc/nginx/default.d/*.conf;

  error_page 404 /404.
  html;
      location = /40x.html {
  }

  error_page 500 502 503 504 /50x.html;
      location = /50x.html {
  }
}

访问公网 ip:8080 ，看到首页就ok了，有问题的话，ctrl+F5强制刷新看看。

7 小结

nginx小结

avatar
文章
阅读
粉丝