阿里雲 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

服務器負載情況