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

文章目录

• 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
  }
};

2. 配置服务端代码根目录的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" // 配置线上环境参数
			}
		}
	]
}