Centos7+Djaogo+Vue环境项目部署

简介: Centos7+Djaogo+Vue环境项目部署

最近想搭一个基于Djaogo+Vue的网站,centos作为服务器,个人pc作为前端设计使用。
centos7软件版本:
python系统自带2.7版本,也可以下载3.6版本,注意尽量使用这两个版本
django: 1.11.7

node: 8.5.0

按照下面步骤一般可以一路畅行,搞这个环境太痛苦了各种报错,如果要安装最新版本,注意需要查阅一下版本中一些配置文件中的写法,会有一些细微差别导致无法运行之类的。

实战

1.安装依赖+更新,为了避免各种环境报错建议执行下面命令来更新系统和安装相关软件的依赖环境。(建议使用管理员登录执行)

yum源变更为国内163安装源

cd /etc/yum.repos.d
mv CentOS-Base.repo CentOS-Base.repo.backup
wget http://mirrors.163.com/.help/CentOS6-Base-163.repo
mv CentOS6-Base-163.repo CentOS-Base.repo
yum clean all

安装依赖

yum update -y
yum -y groupinstall "Development tools"
yum install openssl-devel bzip2-devel expat-devel gdbm-devel readline-devel sqlite-devel psmisc libffi-devel python-pip python-devel epel-release
yum install -y zlib zlib-dev openssl-devel sqlite-devel bzip2-devel libffi libffi-devel gcc gcc-c++

更新密钥

rpm --import /etc/pki/rpm-gpg/RPM-GPG-KEY-CentOS-7

2.安装node环境

wget https://nodejs.org/dist/v8.5.0/node-v8.5.0-linux-x64.tar.gz
tar zxvf node-v8.5.0-linux-x64.tar.gz

配置变量环境注意解压路径

export NODE_HOME="/root/node-v8.5.0-linux-x64"export PATH={
    
    mathJaxContainer[0]}NODE_HOME/bin
source /etc/profile

查看是否安装成功

node -v
npm -v

3.安装Django

pip install Django==1.11.7

查看django版本

python -m django --version

4.安装vue-cli

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -g vue-cli
npm install webpack -g

5.Djaogo新建一个项目

注意taibai就是项目名称也是www根目录名字

django-admin startproject taibai

6.配置settings.py也就就是配置文件

djaogo建立项目后会有两层,第一个是根、第二个是全局配置文件

vi taibai/taibai/settings.py

修改全ip访问,可以使用固定ip

ALLOWED_HOSTS = []    修改为  ALLOWED_HOSTS = [*]

7.关闭防火墙

systemctl stop firewalld
systemctl disable firewalld
systemctl is-enabled firewalld
改/etc/selinux/config文件中设置SELINUX=disabled

8.运行验证

查看自己的IP地址

ifconfig

根目录下运行,0.0.0.0是IP 80是端口

python manage.py runserver 0.0.0.0:80

想要停止项目按住ctrl+c

(其他电脑访问显示下面页面代表成功)
image.png

9.新建vue前端项目

进入根目录,taibai_vue是项目名

vue-init webpack taibai_vue

打包

npm install

运行

npm run build

10.配置vue页面为项目前端

修改配置文件,找到TEMPLATES配置项,修改如下:

vi taibai/taibai/settings.py
#修改 'DIRS':['taibai_vue/dist']
TEMPLATES = [
    {
    
    
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        # 'DIRS': [],
        'DIRS':['taibai_vue/dist'],
        'APP_DIRS': True,
        'OPTIONS': {
    
    
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

最下面添加

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "taibai_vue/dist/static"),
]

11.配置路由让前端显示为vue页面

修改路由文件

vi taibai/taibai/urls.py

添加下面内容

from django.contrib import admin
from django.urls import path
from django.views.generic.base import TemplateView

urlpatterns = [
    # path('admin/', admin.site.urls),
    path('admin/', admin.site.urls),
    path(r'', TemplateView.as_view(template_name="index.html")),
]

12.运行验证

python manage.py runserver 0.0.0.0:80

(显示下面页面则成功)
image.png

相关文章
|
21天前
|
Web App开发 搜索推荐 Unix
Linux系统之MobaXterm远程连接centos的GNOME桌面环境
【10月更文挑战第21天】Linux系统之MobaXterm远程连接centos的GNOME桌面环境
168 4
Linux系统之MobaXterm远程连接centos的GNOME桌面环境
|
1月前
|
安全 Linux 数据库连接
CentOS 7环境下DM8数据库的安装与配置
【10月更文挑战第16天】本文介绍了在 CentOS 7 环境下安装与配置达梦数据库(DM8)的详细步骤,包括安装前准备、创建安装用户、上传安装文件、解压并运行安装程序、初始化数据库实例、配置环境变量、启动数据库服务、配置数据库连接和参数、备份与恢复、以及安装后的安全设置、性能优化和定期维护等内容。通过这些步骤,可以顺利完成 DM8 的安装与配置。
222 0
|
2月前
|
Kubernetes Linux Docker
在centos7上搭建k8s环境
在centos7上搭建k8s环境
|
3月前
|
关系型数据库 MySQL Linux
Linux(CentOS7)搭建LAMP服务环境
本文介绍了在Linux (CentOS 7) 上搭建LAMP服务环境的详细步骤,包括安装Apache HTTPd、解决编译时依赖问题、配置Apache服务、安装PHP以及处理PHP与Apache集成时遇到的问题。同时,还涉及了防火墙设置和SELinux权限调整,确保Web服务能够正常运行。
79 2
|
3月前
|
JavaScript
VUE——配置本地运行指定不同环境
VUE——配置本地运行指定不同环境
86 0
|
3月前
|
JavaScript 测试技术
VUE——打包时如何指定环境
VUE——打包时如何指定环境
36 0
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的环境保护生活App附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的环境保护生活App附带文章源码部署视频讲解等
60 0
|
5月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的营商环境行动计划管理系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的营商环境行动计划管理系统附带文章和源代码部署视频讲解等
38 4
|
5月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的环境保护生活App附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的环境保护生活App附带文章和源代码部署视频讲解等
34 0
|
6月前
|
Go
CentOS6.4安装GO语言环境
CentOS6.4安装GO语言环境
50 0