阿里云 Django+mysql+vue搭建个人网站

系统版本：16.04

修改阿里云host名

hostname cat

node环境搭建

# 安装nodejs
sudo apt-get install nodejs  
sudo apt install nodejs-legacy  
sudo apt install npm 
# 更新npm的包镜像源，方便快速下载 
sudo npm config set registry https://registry.npm.taobao.org  
sudo npm config list  
# 全局安装n管理器(用于管理nodejs版本)  
sudo npm install n -g
# 安装最新的nodejs（stable版本）  
sudo n stable
sudo node -v  
# git的安装  
sudo apt-get install git
# 安装vue-cli3
npm install -g @vue/cli
# yarn 安装
npm install -g yarn
# 习惯vue-cli2的话可以安装vue-init
yarn global add @vue/cli-init

python3 安装django

sudo apt-get update
sudo apt-get install python3-pip
sudo pip3 install django

项目搭建

# django项目搭建
root@cat:/home# cd /home
root@cat:/home# django-admin startproject web
root@cat:/home# cd web
root@cat:/home/web# python3 manage.py startapp app_zero
# vue项目搭建
root@cat:/home/web# vue init webpack vue_app
# vue cli4的话用下面语句
root@cat:/home/web# vue create vue_app
root@cat:/home/web# cd vue_app
root@cat:/home/web/vue_app# yarn
root@cat:/home/web/vue_app# yarn run build

修改/home/web/web/urls.py（参考https://www.jianshu.com/p/9093894d2614）

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

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

修改/home/web/web/settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app_zero',#添加此处
]
...
...
...
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['vue_app/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',
            ],
        },
    },
]
...
...
...
LANGUAGE_CODE = 'zh-Hans'  #修改此处
TIME_ZONE = 'Asia/Shanghai'   #修改此处
#TIME_ZONE = 'UTC'   #修改此处

USE_I18N = True

USE_L10N = True

USE_TZ = False    #修改此处


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.2/howto/static-files/

STATIC_URL = '/static/'
STATICFILES_DIRS = [      #修改此处
os.path.join(BASE_DIR,"vue_app/dist/static")
]

启动：
python3 manager.py migrate
python3 manager.py runserver

安装mysql

apt instll mysql-server
#设置密码 xxx
#创建root的一个数据库
mysql>create database pydb;
#创建非root用户
mysql>create user 'user1'@'localhost' identified by 'xxx';
#授权用户数据库权限
mysql>grant all privileges on pydb.* to 'user1'@'localhost';

问题：

安装pymysql

pip3 install pymysql

问题：更新pip3后

解决办法：

sudo vi /usr/bin/pip3
将原来的：
from pip import main
if __name__ == '__main__':
    sys.exit(main())
改为：

from pip import __main__
if __name__ == '__main__':
    sys.exit(__main__._main())

问题：

解决办法：

https://blog.csdn.net/lijing742180/article/details/91966031

启动项目：

python3 manager.py migrate
python3 manager.py runserver 0.0.0.0:80

阿里云服务器为80端口进行安全配置

然后浏览器输入ip就可以访问页面啦

去除vue路径中带的#号

打开vue_app/src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ],
  mode:'history'//添加这一句就可以了
})

ssh断开怎么保持访问？

解决办法

#使用screen
apt install screen
screen -S web1
python manager.py runserver 0.0.0.0:80
# 这样就可以在断开ssh连接后继续访问网站了

再次ssh连接时怎么找到web1?

root@cat:~# screen -ls
There is a screen on:
    18630.web1    (11/27/2019 11:02:24 AM)    (Detached)
1 Socket in /var/run/screen/S-root.
root@cat:~# screen -r web1

服务器负载情况