工具网站部署笔记

1. 前端配置

1.1 前端目录(本项目使用acro design pro开发)

此目录通过 treer -e ./dir.txt -i “/(.git|node_modules|dist)/” 生成


├─.env.development
├─.env.production
├─.eslintignore
├─.eslintrc.js
├─.prettierignore
├─.prettierrc.js
├─.stylelintrc.js
├─babel.config.js
├─commitlint.config.js
├─components.d.ts
├─dir.txt
├─Dockerfile
├─index.html
├─package.json
├─pnpm-lock.yaml
├─README.md
├─tsconfig.json
├─yarn.lock
├─src
|  ├─App.vue
|  ├─axios.d.ts
|  ├─env.d.ts
|  ├─main.ts
|  ├─views
|  |   ├─redirect
|  |   |    └index.vue
|  |   ├─not-found
|  |   |     └index.vue
|  |   ├─navigationPreview
|  |   |         └index.vue
|  |   ├─navigation
|  |   |     ├─personal
|  |   |     |    ├─index.vue
|  |   |     |    ├─nav
|  |   |     |    |  ├─index.vue
|  |   |     |    |  └info.vue
|  |   |     |    ├─category
|  |   |     |    |    ├─index.vue
|  |   |     |    |    └info.vue
|  |   |     ├─list
|  |   |     |  └index.vue
|  |   ├─memorandum
|  |   |     └index.vue
|  |   ├─login
|  |   |   ├─index.vue
|  |   |   ├─locale
|  |   |   |   ├─en-US.ts
|  |   |   |   └zh-CN.ts
|  |   |   ├─components
|  |   |   |     ├─banner.vue
|  |   |   |     ├─login-form.vue
|  |   |   |     └register-form.vue
|  |   ├─dashboard
|  |   |     ├─workplace
|  |   |     |     ├─index.vue
|  |   |     |     ├─mock.ts
|  |   |     |     ├─locale
|  |   |     |     |   ├─en-US.ts
|  |   |     |     |   └zh-CN.ts
|  |   |     |     ├─components
|  |   |     |     |     ├─announcement.vue
|  |   |     |     |     ├─banner.vue
|  |   |     |     |     ├─carousel.vue
|  |   |     |     |     ├─categories-percent.vue
|  |   |     |     |     ├─content-chart.vue
|  |   |     |     |     ├─data-panel.vue
|  |   |     |     |     ├─docs.vue
|  |   |     |     |     ├─popular-content.vue
|  |   |     |     |     ├─quick-operation.vue
|  |   |     |     |     └recently-visited.vue
|  ├─utils
|  |   ├─auth.ts
|  |   ├─env.ts
|  |   ├─event.ts
|  |   ├─index.ts
|  |   ├─is.ts
|  |   ├─monitor.ts
|  |   ├─route-listener.ts
|  |   ├─save.ts
|  |   └setup-mock.ts
|  ├─types
|  |   ├─echarts.ts
|  |   ├─global.ts
|  |   └mock.ts
|  ├─store
|  |   ├─index.ts
|  |   ├─modules
|  |   |    ├─user
|  |   |    |  ├─index.ts
|  |   |    |  └types.ts
|  |   |    ├─tab-bar
|  |   |    |    ├─index.ts
|  |   |    |    └types.ts
|  |   |    ├─app
|  |   |    |  ├─index.ts
|  |   |    |  └types.ts
|  ├─router
|  |   ├─constants.ts
|  |   ├─index.ts
|  |   ├─typings.d.ts
|  |   ├─routes
|  |   |   ├─base.ts
|  |   |   ├─index.ts
|  |   |   ├─types.ts
|  |   |   ├─modules
|  |   |   |    ├─dashboard.ts
|  |   |   |    └navigation.ts
|  |   |   ├─externalModules
|  |   |   |        ├─arco.ts
|  |   |   |        └memorandum.ts
|  |   ├─guard
|  |   |   ├─index.ts
|  |   |   ├─permission.ts
|  |   |   └userLoginInfo.ts
|  |   ├─app-menus
|  |   |     └index.ts
|  ├─mock
|  |  ├─index.ts
|  |  ├─message-box.ts
|  |  └user.ts
|  ├─locale
|  |   ├─en-US.ts
|  |   ├─index.ts
|  |   ├─zh-CN.ts
|  |   ├─zh-CN
|  |   |   └settings.ts
|  |   ├─en-US
|  |   |   └settings.ts
|  ├─layout
|  |   ├─default-layout.vue
|  |   └page-layout.vue
|  ├─hooks
|  |   ├─chart-option.ts
|  |   ├─loading.ts
|  |   ├─locale.ts
|  |   ├─permission.ts
|  |   ├─request.ts
|  |   ├─responsive.ts
|  |   ├─themes.ts
|  |   ├─user.ts
|  |   ├─visible.ts
|  |   └waterfall.ts
|  ├─directive
|  |     ├─index.ts
|  |     ├─scrollView
|  |     |     └index.ts
|  |     ├─permission
|  |     |     └index.ts
|  ├─config
|  |   └settings.json
|  ├─components
|  |     ├─index.ts
|  |     ├─tab-bar
|  |     |    ├─index.vue
|  |     |    ├─readme.md
|  |     |    └tab-item.vue
|  |     ├─navbar
|  |     |   └index.vue
|  |     ├─message-box
|  |     |      ├─index.vue
|  |     |      ├─list.vue
|  |     |      ├─locale
|  |     |      |   ├─en-US.ts
|  |     |      |   └zh-CN.ts
|  |     ├─menu
|  |     |  ├─index.vue
|  |     |  └use-menu-tree.ts
|  |     ├─global-setting
|  |     |       ├─block.vue
|  |     |       ├─form-wrapper.vue
|  |     |       └index.vue
|  |     ├─footer
|  |     |   └index.vue
|  |     ├─chart
|  |     |   └index.vue
|  |     ├─breadcrumb
|  |     |     └index.vue
|  ├─assets
|  |   ├─logo.svg
|  |   ├─world.json
|  |   ├─style
|  |   |   ├─breakpoint.less
|  |   |   └global.less
|  |   ├─images
|  |   |   ├─avatar.jpeg
|  |   |   ├─login-banner.png
|  |   |   ├─bg
|  |   |   | ├─1080p-2.webp
|  |   |   | ├─1080p.webp
|  |   |   | ├─2k.webp
|  |   |   | ├─ipad2020.webp
|  |   |   | ├─mobile-2.webp
|  |   |   | └mobile.webp
|  ├─api
|  |  ├─category.ts
|  |  ├─dashboard.ts
|  |  ├─file.ts
|  |  ├─interceptor.ts
|  |  ├─message.ts
|  |  ├─navigation.ts
|  |  └user.ts
├─config
|   ├─vite.config.base.ts
|   ├─vite.config.dev.ts
|   ├─vite.config.prod.ts
|   ├─utils
|   |   └index.ts
|   ├─plugin
|   |   ├─arcoResolver.ts
|   |   ├─arcoStyleImport.ts
|   |   ├─compress.ts
|   |   ├─imagemin.ts
|   |   └visualizer.ts
├─.vscode
|    └settings.json
├─.husky
|   ├─commit-msg
|   ├─pre-commit
|   ├─_
|   | └husky.sh
1.2 接口相关
.env.production文件
# 前缀用于反向代理后端接口
VITE_API_BASE_URL= '/violet-tool-api'
nginx.conf文件
location /violet-tool-api/ {
    proxy_pass http://127.0.0.1:9000/violet-tool-api/;
}
1.3 部署相关
vue-router配置history路由的基础路由为violet-tool,由于主域名carolin-violet.cloud挂着自己的博客,所有得在后面加后缀通过nginx转发,将工具网站的地址转为carolin-violet.cloud/violet-tool,,不然访问到的就是博客的404页面
vue-router配置
const router = createRouter({
  history: createWebHistory('violet-tool'),
  routes: [],
});
vite.config.prod.ts
import { mergeConfig } from 'vite';
import baseConfig from './vite.config.base';
import configCompressPlugin from './plugin/compress';
import configVisualizerPlugin from './plugin/visualizer';
import configArcoResolverPlugin from './plugin/arcoResolver';
import configImageminPlugin from './plugin/imagemin';

export default mergeConfig(
  {
   	// 静态资源打包目录,html中引用打包的静态资源都用这个前缀,如/violet-tool/assets/xxx
    base: '/violet-tool/', 
    mode: 'production',
    plugins: [
      configCompressPlugin('gzip'),
      configVisualizerPlugin(),
      configArcoResolverPlugin(),
      configImageminPlugin(),
    ],
    build: {
      rollupOptions: {
        output: {
          manualChunks: {
            arco: ['@arco-design/web-vue'],
            chart: ['echarts', 'vue-echarts'],
            vue: ['vue', 'vue-router', 'pinia', '@vueuse/core', 'vue-i18n'],
          },
        },
      },
      chunkSizeWarningLimit: 2000,
    },
  },
  baseConfig
);

nginx.conf文件
location /violet-tool {
    # 前端打包的dist文件夹内部资源通过jenkins构建放在tool_portal下,html和其他资源都是通过这个路径代理获	取
    alias /var/www/html/tool_portal/;
    index index.html;
    # 加这个是因为我在系统中新打开一个本系统路由窗口报错nginx404,使找不到就用原来的index.html
    try_files $uri $uri/ /violet-tool/index.html;
}

2.后端配置

2.1 后端目录,运行treer -e ./dir.txt -i “/(.git|node_modules)/”

├─app.js
├─data.json
├─Dockerfile
├─package-lock.json
├─package.json
├─README.md
├─utils
|   ├─GenId.js
|   └JwtUtil.js
├─routes
|   ├─category.js
|   ├─file.js
|   ├─log.js
|   ├─navigation.js
|   ├─notice.js
|   └user.js
├─model
|   ├─category.js
|   ├─log.js
|   ├─navigation.js
|   ├─notice.js
|   ├─tool.sql
|   └user.js
├─middleware
|     ├─auth.js
|     ├─log.js
|     ├─permission.js
|     └spendTime.js
├─config
|   └mysqlConfig.js
2.2 部署相关

暂无

3.jenkins配置

jenkins分配创建两个自由风格的任务,前端为tool-portal,后端为tool-server

3.1 tool-portal Build Steps 配置
  • 执行shell

    node -v
    npm -v
    npm cache verify
    npm install --registry http://mirrors.cloud.tencent.com/npm/
    npm run build
    cd dist
    tar zcvf dist.tar.gz *
    
  • Send files or execute commands over SSH

    Transfer Set
    Source files: dist/dist.tar.gz
    Remove prefix: dist
    Remote directory: /
    Exec command:
    	cd ~
        mkdir -p /var/www/html/tool_portal
        mv dist.tar.gz /var/www/html/tool_portal
        cd /var/www/html/tool_portal
        tar zxvf dist.tar.gz 
        rm -rf dist.tar.gz
    
    
    

    执行shell时将前端带包打包成dist并压缩,Send files or execute commands over SSH 时主要将代码上传至服务器并解压放到tool_portal目录下

3.2 tool-server Build Steps 配置
  • 执行 shell

    tar zcvf server.tar.gz *
    
  • Send files or execute commands over SSH

    Transfer Set
    Source files: server.tar.gz
    Remove prefix: 
    Remote directory: 
    Exec command:
        cd ~
        mkdir -p /var/www/server/tool_server
        mv server.tar.gz /var/www/server/tool_server
        cd /var/www/server/tool_server
        tar zxvf server.tar.gz
        rm -rf server.tar.gz
    
  • Send files or execute commands over SSH

    Transfer Set
    Source files: server.tar.gz
    Remove prefix: 
    Remote directory: 
    Exec command:
        cd ~
        cd /var/www/server/tool_server
        rm -rf node_modules
        node -v
        npm -v
        npm cache verify
        npm install
        pm2 delete tool-server
        pm2 start app.js --name tool-server
    

    首先执行shell将代码打包,然后第一次ssh将代码上传至服务器的tool_server目录下并解压,第二次ssh进入后端代码目录安装依赖并用pm2执行代码

Q.E.D.


一个二次元web开发咸鱼