部署伺服器上線部分

卡优卡1255發表於2024-06-13
伺服器

想要將自己的畢設放在自己買的伺服器上，該專案前端由vite+ts支援，後端使用python flask，資料庫是MySQL8.0；
部署分成以下步驟，前端UI部分，後端資料庫部分，伺服器命令除錯部分
目前專案已經完成部署，來我的網站看看吧：https://www.8765430.xyz/

前端UI部分

修改tsconfig.json 在build的時候不會報各種error，包括但不限於anyType、alias別名有可能在vite.config.ts或者tsconfig.json中都要配置，以下提供一份簡略的配置：

tsconfig.json

點選檢視程式碼 
{
  "compilerOptions": {
    "noUncheckedIndexedAccess": false,
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "allowJs": true,
    "noImplicitAny": false,
    "moduleResolution": "Node",
    "strict": false,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": [
      "ESNext",
      "DOM"
    ],
    "skipLibCheck": true,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "*.vue",
    "*.ts",
    "src/**/*.vue",
  ],
  "exclude": [
    "node_modules"
  ],
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

vite.config.ts

點選檢視程式碼 
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import path from 'path'

export default defineConfig({
  base: './',
  resolve: {
    alias: {
      '@': path.resolve(__dirname,'./src'),
    },
  },
  plugins: [
    vue(),
    VueSetupExtend(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  optimizeDeps: {
    include: ['schart.js'],
  },
})

額外的，在vite.config.ts 開啟了 gzip 壓縮（最佳化開啟時間達到毫秒級）

npm i vite-plugin-compression --save-dev

import { defineConfig } from 'vite';
import compression from 'vite-plugin-compression';

export default defineConfig({
  plugins: [
    compression({
      verbose: true,
      disable: false,
      threshold: 10240, // 壓縮閾值，小於這個值的檔案將不會被壓縮（單位為位元組）這裡就是大於 10kb 菜壓縮
      algorithm: 'gzip', // 壓縮演算法
      ext: '.gz', // 壓縮檔案字尾名
    }),
  ],
});

在執行 npm run build 後可以發現資料夾下多出了一個dist資料夾，裡面就是vite幫我們打包出來的

解決圖片無法顯示問題

  1. 換成變數載入
 imageList: [
        'view1.jpg',
        'view2.jpg',
        'view3.jpg',
      ],
	  
 getImageUrl(imageName) {
      return require(`@/assets/img/${imageName}`);
    },
  1. 提前require載入|
const imageList = [
  require('@/assets/img/view1.jpg'),
  require('@/assets/img/view2.jpg'),
  require('@/assets/img/view3.jpg'),
];
  1. 靜態載入
  '/assets/img/view1.jpg',
  '/assets/img/view2.jpg',
  '/assets/img/view3.jpg',

後端資料庫部分

事前準備：

  1. 資料庫首先匯出sql可執行語句檔案，方便我們在雲端資料庫執行
  2. 執行 pip freeze > requirements.txt 生成 requirements.txt方便docker打包容器

這裡踩了個雷，在開始專案的時候沒有用venv去隔離環境，導致最後生成的全域性pip依賴，最後為了優雅，重新隔離開安裝了一次

  1. 編寫Dockerfile （最後還沒部署docker，因Windows10版本問題） 暫時用nohup去代替
  2. 最後遇到ttf字型確實用下面這個方法解決
    https://blog.csdn.net/weixin_39929377/article/details/110547982
  3. 最後成功部署，但部署後仍有問題，時間也已經不早啦，該下班咯~

相關文章