thinkjs + antd项目部署上线

- 日理万妓 2023-03-06 03:53 5阅读 0赞

> 感谢内容提供者：[金牛区吴迪软件开发工作室][Link 1]

### 文章目录 ###

*  thinkjs + antd项目部署上线
 *   *  准备工作：前端与服务端配置开发环境生产环境访问目录
     *   *   *  前端：
             *  服务端：
     *  第一步:将代码提交到远程仓库，而后服务端进行拉取代码
     *  第二步：将服务端代码和前端代码进行打包
     *   *   *  thinkjs打包：
             *  antd-pro打包：
     *  第三步：启动服务和前端项目

# thinkjs + antd项目部署上线 #

## 准备工作：前端与服务端配置开发环境生产环境访问目录 ##

#### 前端： ####

统一处理请求地址

/** * request 网络请求工具 * 更详细的 api 文档: https://github.com/umijs/umi-request */
    import {  extend } from 'umi-request';
    import moment from "moment";
    import {  notification } from 'antd';
    import {  getToken } from '@/utils/utils';
    
    const codeMessage = { 
      200: '服务器成功返回请求的数据。',
      201: '新建或修改数据成功。',
      202: '一个请求已经进入后台排队（异步任务）。',
      204: '删除数据成功。',
      400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
      401: '用户没有权限（令牌、用户名、密码错误）。',
      403: '用户得到授权，但是访问是被禁止的。',
      404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',
      406: '请求的格式不可得。',
      410: '请求的资源被永久删除，且不会再得到的。',
      422: '当创建一个对象时，发生一个验证错误。',
      500: '服务器发生错误，请检查服务器。',
      502: '网关错误。',
      503: '服务不可用，服务器暂时过载或维护。',
      504: '网关超时。',
    };
    const isDev = process.env.NODE_ENV === 'development';
    // 配置根路径
    const baseUrl = isDev ? 'http://127.0.0.1:8360' : 'http://服务器ip地址:8360';
    /** * 异常处理程序 */
    const errorHandler = (error) => { 
      const {  response } = error;
      if (response && response.status) { 
        const errorText = codeMessage[response.status] || response.statusText;
        const {  status, url } = response;
    
        notification.error({ 
          message: `请求错误 ${ status}: ${ url}`,
          description: errorText,
        });
      } else if (!response) { 
        notification.error({ 
          description: '您的网络发生异常，无法连接服务器',
          message: '网络异常',
        });
      }
      return response;
    };
    
    /** * 配置request请求时的默认参数 */
    const request = extend({ 
      errorHandler, // 默认错误处理
    });
    
    // request请求拦截器
    request.interceptors.request.use((url, options = { }) => { 
      options.headers = { 
        ...options.headers,
        ...(
          getToken() ? {  'token': getToken() } : null
        ),
        'redirect_url': window.location.href
      };
      if (['post', 'put'].includes(options.method)) { 
        options.body = { 
          ...options.body,
          modified_user_id: 1, // 改成当前登录人账号
          modified_time: moment(new Date()).format('YYYY-MM-DD hh:mm:ss'),
        };
        options.body = JSON.stringify(options.body);
        options.headers = { 
          'Content-Type': 'application/json; charset=utf-8',
          ...options.headers
        };
      }
      return (
        { 
          url: `${ baseUrl}/api/v1${ url}`,
          options,
        }
      );
    });
    
    // request响应拦截器
    request.interceptors.response.use(async (response, options) => { 
      const data = await response.clone().json();
      if (data?.code !== '0') {  // 界面报错处理
        if ([401].includes(data?.code)) {  // 没权限
          window.location.href = data.data.loginUrl || `${ window.location.href}#/`;
        } else if (data?.errmsg) { 
          notification.error({  message: data.errmsg });
        }
      }
      return response;
    });
    
    export default request;

#### 服务端： ####

1.  配置连接数据库的地址：  
    src -> config -> adapter.js  
    示例代码：

// 判断是不是开发环境
    const isDev = think.env === 'development';
    /** * model adapter config * @type {Object} */
    exports.model = { 
      type: 'mysql',
      common: { 
        logConnect: isDev,
        logSql: isDev,
        logger: msg => think.logger.info(msg)
      },
      mysql: { 
        handle: mysql,
        database: '数据库名字，如果你远端和本地的名字不同需要根据isDev进行判断',
        // prefix: 'think_',
        encoding: 'utf8',
        host: isDev ? '127.0.0.1' : '服务器ip地址',
        port: '3306',
        user: 'root',
        password: isDev ? '本地数据库密码' : '服务器上数据库密码',
        acquireWaitTimeout: 0,
        dateStrings: true,
        reuseDB: true
      }
    };

1.  配置服务端代码根目录的nginx.conf

server {
        listen 8360;
        server_name 114.215.127.148; // 服务器ip地址
        root /home/www/management-system; // 服务端代码在服务器的地址
        set $node_port 8360;
    
        index authValidate.js index.html index.htm;
        if ( -f $request_filename/index.html ){
            rewrite (.*) $1/index.html break;
        }
        if ( !-f $request_filename ){
            rewrite (.*) /authValidate.js;
        }
        location = /authValidate.js {
            proxy_http_version 1.1;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host $http_host;
            proxy_set_header X-NginX-Proxy true;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            proxy_pass http://服务器ip地址:$node_port$request_uri;
            proxy_redirect off;
        }
    
        location ~ /static/ {
            etag         on;
            expires      max;
        }
    }

## 第一步:将代码提交到远程仓库，而后服务端进行拉取代码 ##

> 提交代码和拉取代码部分不做过多描述。不会可以百度一波或者实在不行下方评论亦或者私聊博主。

## 第二步：将服务端代码和前端代码进行打包 ##

> 一般的情况打包命令如下，具体请查看自己项目的package.json

#### thinkjs打包： ####

$ npm run compile

#### antd-pro打包： ####

npm run build

## 第三步：启动服务和前端项目 ##

// 进入到thinkjs目录下，启动pm2.json
    cd /home/www/thinkjs  // 你的thinkjs项目放到哪里了就进入到哪里，
    pm2 startOrReload pm2.json

示例：pm2.json

{ 
    	"apps": [
    		{ 
    			"name": "server",
    			"script": "production.js", // 要执行的脚本或文件
    			"cwd": "/home/www/thinkjs", // 服务端代码在服务器上的地址
    			"exec_mode": "fork",
    			"max_memory_restart": "1G",
    			"autorestart": true,
    			"node_args": [],
    			"args": [],
    			"env": { }
    		},
    		{ 
    			"name": "front",
    			"script": "http-server -c10", // 要执行的脚本或文件
    			"cwd": "/home/www/front_code", // 前端代码在服务器上的地址
    			"exec_mode": "fork",
    			"max_memory_restart": "1G",
    			"autorestart": true,
    			"node_args": [],
    			"args": [],
    			"env": { 
    				"NODE_ENV": "production" // 配置线上环境参数
    			}
    		}
    	]
    }

[Link 1]: http://wdstudio.top/